Figure 1: Github's current homepage, is it's typography too big? (right click and open in new tab, then click on the image, to view it full size)
There seems to be a trend towards really big typography in the modern web, for screen sizes that are as iPad size or larger. I'm not sure that's such a good idea. Those who are vision-impaired might do very well when viewing larger text (although they can always font-size in their browser settings, so long as you're using flexible measurements in your CSS),[^4] but is it legible for the rest of us?
Font size
Big fonts for short and snappy lines.
To me, Github's typographic sizing on a laptop is just too big. It looks a bit clownish and even though it has impact, I'm not sure it's easy on the eye! I'm all for stand-out visuals in advertising and Apple do this quite nicely with short and sweet lines, but the font they use feels a bit more elegant to me. But maybe that's just me!
Large fonts might work fine for headings and callout sections, but for general reading I'd set the base font-size at 100% (which is about 16px) and use rem to expand on that. So 1rem would be 16px; 1.5rem for line-height at 24px; 1.25rem would be 20px and so on. I try to keep calculations simple and divisible by 4. This means 16px, 24px, 32px, 40px, etc. It doesn't always work out that way, but it means everything is fitting to a grid baseline of 4px, give or take.
The basic idea is to make sure that there's enough contrast between the foreground and background, whether that background is a neutral colour (black or white) or something more adventurous (hot pink). So if your background is pink and you're text is white, better make sure that the contrast is high enough so that those who are hard of sight can distinguish the words from the background.
You can check contrast and aim for AA or AAA passing results. The higher the contrast, the better the results. Black on yellow has a high contrast, which is why it's used for warning signs on the road, but that doesn't mean it's the best for readability. In fact, black on creme is suggested by the British Dyslexia Association as the best combination.
Word count, leading, line-height
Word count is easy: 10-15 words per line, with a preference for around 12. Headings can have fewer words per line, as they're generally more pithy than body font, and at a larger size fewer is often better.
Leading is also easy: eyeball it! At larger sizes, you can afford to be a little looser with the spacing between letters, but only to a point. The letters form shapes that make up a word and that shouldn't be obstructed. Sometimes you'll find posters with very large leading where the word takes up the horizontal width of the page, but they're rare. You'll also find logos that decrease the leading, so the characters bleed into each other. For the most part though, leading should be at a comfortable distance.
Line-height is not easy: and in print typography comes in different sizes. You'd generally set a baseline grid that your base font-size would read nicely at (in my case 24px for a 16px body font) and most of the typography would sit on that baseline. However, if you're using a very small font size, say for instance, the page number, or image descriptions, you might want to create a separate line-height that fits between the 24px baseline grid. Or even offsets it. One of the best books I know of that covers this is "Grid Systems" by Josef Müller-Brockmann.
The web, alas, is not print, and grid systems are a lot more painful on websites ... I generally stick to a baseline grid and have everything else follow it.
Other tools to help you read
You also have at your disposal website tools like Recite Me, which have lots of options for visitors with various disabilities, or use Safari's reader (or Microsoft Edge's excellent "Read Aloud" feature) which I use on mobile sometimes.
The shape of the words and the space around them, and how they affect the eye is important. A high number for leading can make reading uncomfortable; large fonts (especially with thin strokes) with lots of whitespace between the words, lines, and paragraphs make it difficult for the eye to focus on the shapes that text makes (figure 2: paragraph 1).
The brain needs to focus more on the shapes that make up the letters, words, sentences, rather than the space around them to make sense of the text at-a-glance (as in figure 2: paragraph 2). Large typography can work nicely on big screens, where you'll be reading at a distance, but if you're up close with a laptop, not so good. It's the difference between riding in your car looking at a billboard in the distance, vs stepping out of the car and looking at it up close. The closer you get, the more indecipherable it becomes.
Once again, it largely depends on whether you're viewing your screen at a distance, or up close.
[^1]: This covers everything from vision impaired to loss of sight, through to disabilities that affect motor functions. It needn't be difficult, even checking your colour contrast between foreground and background can really help.
[^2]: Butterick's Practical Typography says "aim for an average line length of 45–90 characters, including spaces". This also depends on font-size as very large fonts (for headers, etc) should generally hold fewer words per line, or else it looks uncomfortable to the eye.
[^3]: Leading is the space between the letters; line-height is the vertical space between lines of text.
[^4]: It's always best to use % or rem for your font-size which makes sure that it respects the user's browser settings, should they decide to increase the font size.
Big
font-sizein modern designFigure 1: Github's current homepage, is it's typography too big? (right click and open in new tab, then click on the image, to view it full size)
There seems to be a trend towards really big typography in the modern web, for screen sizes that are as iPad size or larger. I'm not sure that's such a good idea. Those who are vision-impaired might do very well when viewing larger text (although they can always
font-sizein their browser settings, so long as you're using flexible measurements in your CSS),[^4] but is it legible for the rest of us?Font size
To me, Github's typographic sizing on a laptop is just too big. It looks a bit clownish and even though it has impact, I'm not sure it's easy on the eye! I'm all for stand-out visuals in advertising and Apple do this quite nicely with short and sweet lines, but the font they use feels a bit more elegant to me. But maybe that's just me!
Large fonts might work fine for headings and callout sections, but for general reading I'd set the base
font-sizeat100%(which is about16px) and useremto expand on that. So1remwould be16px;1.5remfor line-height at24px;1.25remwould be20pxand so on. I try to keep calculations simple and divisible by4. This means16px,24px,32px,40px, etc. It doesn't always work out that way, but it means everything is fitting to a grid baseline of4px, give or take.That's pretty much the same units as the original Material Design documentation.
Colour contrast
The basic idea is to make sure that there's enough contrast between the foreground and background, whether that background is a neutral colour (black or white) or something more adventurous (hot pink). So if your background is pink and you're text is white, better make sure that the contrast is high enough so that those who are hard of sight can distinguish the words from the background.
You can check contrast and aim for AA or AAA passing results. The higher the contrast, the better the results. Black on yellow has a high contrast, which is why it's used for warning signs on the road, but that doesn't mean it's the best for readability. In fact, black on creme is suggested by the British Dyslexia Association as the best combination.
Word count, leading, line-height
Word count is easy: 10-15 words per line, with a preference for around 12. Headings can have fewer words per line, as they're generally more pithy than body font, and at a larger size fewer is often better.
Leading is also easy: eyeball it! At larger sizes, you can afford to be a little looser with the spacing between letters, but only to a point. The letters form shapes that make up a word and that shouldn't be obstructed. Sometimes you'll find posters with very large leading where the word takes up the horizontal width of the page, but they're rare. You'll also find logos that decrease the leading, so the characters bleed into each other. For the most part though, leading should be at a comfortable distance.
Line-height is not easy: and in print typography comes in different sizes. You'd generally set a baseline grid that your base
font-sizewould read nicely at (in my case24pxfor a16pxbody font) and most of the typography would sit on that baseline. However, if you're using a very small font size, say for instance, the page number, or image descriptions, you might want to create a separateline-heightthat fits between the24pxbaseline grid. Or even offsets it. One of the best books I know of that covers this is "Grid Systems" by Josef Müller-Brockmann.The web, alas, is not print, and grid systems are a lot more painful on websites ... I generally stick to a baseline grid and have everything else follow it.
Other tools to help you read
You also have at your disposal website tools like Recite Me, which have lots of options for visitors with various disabilities, or use Safari's reader (or Microsoft Edge's excellent "Read Aloud" feature) which I use on mobile sometimes.
The shape of words
Figure 2: Royal National Institute of Blind People's own site makes some mistakes, in my view. (right click and open in new tab, to view full size image)
The shape of the words and the space around them, and how they affect the eye is important. A high number for leading can make reading uncomfortable; large fonts (especially with thin strokes) with lots of whitespace between the words, lines, and paragraphs make it difficult for the eye to focus on the shapes that text makes (figure 2: paragraph 1).
The brain needs to focus more on the shapes that make up the letters, words, sentences, rather than the space around them to make sense of the text at-a-glance (as in figure 2: paragraph 2). Large typography can work nicely on big screens, where you'll be reading at a distance, but if you're up close with a laptop, not so good. It's the difference between riding in your car looking at a billboard in the distance, vs stepping out of the car and looking at it up close. The closer you get, the more indecipherable it becomes.
Once again, it largely depends on whether you're viewing your screen at a distance, or up close.
[^1]: This covers everything from vision impaired to loss of sight, through to disabilities that affect motor functions. It needn't be difficult, even checking your colour contrast between foreground and background can really help.
[^2]: Butterick's Practical Typography says "aim for an average line length of 45–90 characters, including spaces". This also depends on
font-sizeas very large fonts (for headers, etc) should generally hold fewer words per line, or else it looks uncomfortable to the eye.[^3]: Leading is the space between the letters; line-height is the vertical space between lines of text.
[^4]: It's always best to use
%orremfor yourfont-sizewhich makes sure that it respects the user's browser settings, should they decide to increase the font size.