|
Type E:
From Beyond the Envelope™
|
|
|
‘What font-size should we use for body copy? What font-size should we use for legal copy? What should be our minimum font-size?’ These questions come up often, especially the latter!
The truth is, there are no rules around font-size, not even in the Web Content Accessibility Guidelines (WCAG). And there’s a good reason for that, which I’ll explore in this issue.
The x-height
The x-height is, literally, the height of a font’s lowercase ‘x’, and it differs from font to font. A font with a smaller x-height will appear smaller than a font with a larger x-height, even if they’re both styled with the same font-size.
Take Georgia and Baskerville, for example. When styled with the same font-size and overlaid on top of one another, you can see how their x-heights and, therefore, their visual sizes differ.
It’s for this reason that a font’s font-size can’t be relied upon to determine its readability and accessibility, and, arguably, why WCAG doesn’t define a minimum font-size.
The glyph
A glyph is a character or symbol, and each font has a glyph set, which includes letters, numbers, symbols and spaces.
|
What the Web Content Accessibility Guidelines have to say about glyphs.
While WCAG doesn’t define a minimum font size, it does define how many glyphs, or characters, should appear on a single line of text. This has a direct impact on font-size.
Success Criterion 1.4.8 Visual Presentation
(Level AAA)
For the visual presentation of blocks of text, a mechanism is available to achieve the following:
- Width is no more than 80 characters or glyphs (40 if CJK).
|
What this Success Criterion says is this. If you have more than 80 glyphs, or characters, on one line of text, or 40 in the case of Chinese, Japanese or Korean languages, your font-size is too small. And don’t forget, spaces are glyphs too!
|
Readability and the optimal line length
The Baymard Institute, which conducts independent, large-scale UX research studies, published an article on readability and the optimal line length, which supports this guideline. In its key takeaways, it states, ‘The optimal line
length for body text is 50-75 characters’.
|
|
|
The small print
The ‘small print’ in the footer, which typically includes legal copy, such as caveats, terms and conditions, registered addresses, and copyright information, is often styled in sizes too small to conform to WCAG 1.4.8.
In my own, rather small-scale research, I found that three emails in my inbox were failing WCAG 1.4.8, with lines of text that had 94, 99 and 123 glyphs, or characters on them, respectively.
I’ve often argued that we don’t really need to style legal copy in a smaller font-size. It’s a practice that hails from the print world, where limited space means that any legal copy has to be smaller to fit on the page or package. With email, we don’t have the same limitations (we have the scroll), so there’s no reason to reduce the font-size.
The large print
The ‘large print’ in the headline can introduce its own challenges. Not from a readability or accessibility point of view, but from an email client point of view. If the headline’s styled with a large font-size, it can cause rendering issues on mobile.
Some email clients may render a word that’s too large and too long as small groups of characters over two or three lines. Other email clients may render a word in full, but will break the layout on mobile.
Careful copywriting (avoiding long words) and careful sizing (avoiding large sizes) of headlines will help prevent these issues. And testing your email rendering will help you to identify them should they arise.
Colour contrast
In addition to a font’s size, a font’s colour contrast is also important, to ensure it’s readable and accessible. It’s perhaps no surprise, then, that WCAG has not one but two Success Criteria on the subject, which, interestingly, also refer to font-size.
|
What the Web Content Accessibility Guidelines have to say about colour contrast in relation to font-size.
The two Success Criterion for colour contrast are 1.4.3 Contrast (Minimum), which is Level AA, and Success Criterion 1.4.6 Contrast (Enhanced), which is Level AAA. They both specify what a font’s colour contrast ratio should be in relation to its size.
Success Criterion 1.4.3 Contrast (Minimum)
(Level AA)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
|
Success Criterion 1.4.6 Contrast (Enhanced)
(Level AAA)
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
|
Both Success Criteria make a distinction between text and ‘large-scale text’, so it’s important to understand what those distinctions are in order to conform to them. This is what WCAG says about ‘large-scale text’:
large scale (text)
with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts.
|
According to WCAG, any font-size smaller than 18 point or 14 point bold is considered ‘text’, and any font-size 18 point or 14 bold and above is considered ‘large-scale text’. As we typically work with pixels, we need to convert the points into pixels. Thankfully there are tools, like this one from Simple CSS, that can help us!
If we convert 18pt into pixels, we get 24px, and if we convert 14pt into pixels, we get 19px. We can use these sizes as a reference for conforming to these Success Criteria. To check conformance, use the WebAIM Contrast Checker.
|
|
|
Conclusion
When it comes to font-size, readability and accessibility are all important. Let me conclude this issue of Type E: by summarising the considerations that’ll help you achieve them:
- Within WCAG, there is no mention of a minimum font-size, but there is mention of a maximum glyph number.
- Ensure your body copy doesn’t exceed 80 glyphs, or characters, per line (including spaces). If it does, increase its font-size.
- If you want to conform to WCAG 2.1 (Level AAA), ensure your legal copy doesn’t exceed 80 glyphs, or characters, per line.
- If you have a large headline, ensure it renders as expected. If it doesn’t, try reducing its font-size, and try replacing any long words with short ones.
- Ensure the colour contrast of your ‘text’ and ‘large-scale text’ conforms to WCAG 1.4.3 Contrast (Minimum) (Level AA) – at a minimum!
|
|
Made with Envelope Developer™
Powered with 
|
|
|