Email Design Email Typography 2 — Questions and Answers
Question 1: Which email clients support web fonts loaded via @import or @font-face?
- All major email clients
- Only Gmail and Outlook
- Apple Mail, iOS Mail, and some Android clients (not Outlook) (Correct answer)
- Only desktop email clients
Correct answer: Apple Mail, iOS Mail, and some Android clients (not Outlook)
Web fonts are supported in Apple Mail, iOS Mail, and some Android clients, but Outlook on Windows does not support them.
Question 2: What does 'kerning' refer to in email typography?
- The height of capital letters
- The spacing between individual character pairs (Correct answer)
- The width of the text column
- The color contrast between text and background
Correct answer: The spacing between individual character pairs
Kerning refers to adjusting the space between specific pairs of characters to improve visual balance and readability.
Question 3: What is the CSS property used to control spacing between all characters in email text?
- line-height
- word-spacing
- letter-spacing (Correct answer)
- text-spacing
Correct answer: letter-spacing
The letter-spacing property (also called tracking) adjusts the space between all characters uniformly in a block of text.
Question 4: In email design, what is 'visual hierarchy' in typography?
- Ordering fonts alphabetically in the font stack
- Using size, weight, and color to guide readers through content in order of importance (Correct answer)
- Listing font sources from most to least preferred
- Applying bold formatting to every line
Correct answer: Using size, weight, and color to guide readers through content in order of importance
Visual hierarchy uses variations in font size, weight, and color to signal what's most important and lead readers through the content.
Question 5: What text alignment is generally recommended for email body copy?
- Justified alignment
- Right alignment
- Center alignment
- Left alignment (Correct answer)
Correct answer: Left alignment
Left-aligned text is easiest to read for left-to-right languages because it creates a consistent starting point for each line.
Question 6: Which HTML attribute ensures a fallback font renders in Outlook when web fonts aren't supported?
- mso-font-alt (Correct answer)
- font-fallback
- mso-generic-font-name
- font-family
Correct answer: mso-font-alt
The mso-font-alt attribute is a Microsoft Office-specific CSS property that specifies a fallback font for Outlook email clients.
Email Design Email Typography 2
Which email clients support web fonts loaded via @import or @font-face?