Font choice is one of the most important considerations of any web design project.
The right font can have powerful subliminal effects. Choose poorly and you can instantly make your brand look outdated, amateur, or cold. Choose wisely, though, and you can create a brand that feels modern, trustworthy, and approachable.
But font choice doesn't only come down to style. The fonts you use have an impact on how people consume your content. They affect legibility, readability, and comprehension.
If people can't read your content, does it matter how good it looks? Luckily, you can have the best of both worlds. In this article I'll help you choose fonts that ensure as many people as possible read your content while improving your design.
What is a font?
Before we begin, I'd like to clarify what a font actually is. The chances are that you'll have come across the terms ‘font’ and ‘typeface’. Often these terms are merged, mixed up, or simply misunderstood.
A typeface is comprised of a ‘family’ of fonts, whose characters share common design features.
A font is a set of text characters in a specific style and size.
Each font of a typeface has its own weight, ornamentation, and associated attributes.
In layman’s terms, serifs are the little sticky out bits on the ends of a character. Traditionally serif fonts are regarded as more difficult to read online. They were generally regarded as best used for headlines only. This is largely due to the fact that the old-style CRT monitors (remember them?) rendered fonts far less crisply – not to mention the fact that some earlier browsers lacked good font rendering capability. As a result serif fonts tended to break up more readily, especially at smaller sizes. Today with sharper LCD, LED, and retina monitors – along with far better browser technology – this is no longer an issue. You can use serif fonts to great effect in most circumstances.
Serif fonts come in several flavours:
Your basic serif such as Times, Georgia, or Palatino;
Semi-serifs such as Rotis or Museo;
Or slab serifs such as Rockwell, Lubalin Graph, or Clarendon;
The direct opposite of serif fonts, san-serif fonts don't have serifs (sans being French for 'without').
As a rule, sans-serif fonts are regarded as easier to read due to their clean appearance and regular structure.
But don't be fooled, as this regular structure makes for poorer legibility. This is because the uniform nature of all those uprights and their square format can make san-serif fonts harder to read for many people. Using them in large swathes of body copy only makes this problem worse. As a result, many modern sans-serif fonts are primarily designed for use in headlines and don’t translate well as paragraphs.
So, choose your paragraph fonts wisely. Looks aren’t everything – especially if a user doesn’t read the copy.
Helvetica is the classic example of a sans-serif font family;
Cursive font families are generally script-like in style. They tend to be very decorative.
Beware when using these fonts at small sizes. Whilst they may technically pass accessibility standards, in the wrong environment they can be hard to read. Use them with a healthy dose of common sense.
Decorative & Display
Currently a little out of favour as a key part of web design, decorative or display font families are just that – ornamental styles.
Display fonts come in many guises. Too many to list here. As their name suggests, they can be quite decorative – in some cases taking legibility to the edge. As a rule these should be used only for headlines.
Monospaced fonts have fixed widths for all the characters, which makes them ideal for displaying code examples. However, it also makes their legibility pretty poor when used for paragraphs and headlines.
Everyone knows there are normal and bold weights to most typefaces. CSS allows us to specify font weights numerically, with 400 usually being used for normal or regular and 700 for bold. Beware that not all faces have multiple weights – some only have one, while others have a wide variety ranging from 100 right up to 900.
If you are thinking of using custom web fonts, it's worth considering your weights before you approach the design. Try to stick to a small range – the more weights you add, the greater the size of the download required to get them to render. If you insist on including all available weights, along with the related italics, then you could seriously affect your page weight, and thus the time it takes to load. This can often result in a delay for the fonts to be rendered on screen, resulting in a jump from a fallback style to the specified font. Even worse – if no fallback is specified, visitors will see a blank page until the web font has finished its download.
As with font weight, when choosing a font for your beautiful web design don’t forget to consider whether it will be used in italic form. Not all typefaces have an italic style. Relying on a faux italic rendered by the browser rather than the proper style associated with the typeface can produce clumsy results.
Design trends tend to go in cycles, and every now and then all uppercase or all lowercase becomes a bit of a thing. If you are considering this, don’t forget to take into consideration the legibility of your font when it's used in this way.
Occasionally a design will have its text set in block capitals to emphasize a message. However, often the opposite is true, as capitalising every letter reduces the shape contrast for each word.
Uppercase letters tend to be squarer in their proportions, with regular parallel edges creating limited variation and contrast. This makes it harder for people to recognise individual letters and slows down reading. Usability expert Jakob Nielsen found that people read text on screen around 25% slower than they read from paper, and reading type set in block capitals can reduce this by a further 10%.
The lack of variation in the tops of capitalised letters is another factor that reduces their legibility. When text is written in sentence case, the tops of the letters help us recognise the shapes of the characters. This enables the eye to easily flow from one word to the next.
Is it ever okay to use all caps? Block capitals are fine in contexts that don’t involve lengthy reading, such as logos, labels, acronyms, and abbreviations. Generally where your message doesn’t require reading large areas of text.
But, if you want people to actually read your message, consider using a sentence or title case.
Pixels, points, ems, and rems
For online use font sizes can be defined in several ways:
Ems are relative to the font size of the parent element. Say, for instance, that you set a parent
div element to have a font size of 16px, and a
p element within it to have a font size of 2em. The result will be that the
p element has 32px text. This can get mighty complicated if you define all font sizes on all your elements in ems.
Rems (root ems)
Rems are like ems but relative to the root. The difference with rems is that they are relative to the font size of the
html, so it doesn’t matter how deeply nested your element is. If your base font size is 16px 2rem will always be 32px.
CSS pixels are not the same thing as the number of pixels on your monitor. Pixels are an absolute unit of measurement. Absolute means that they are the same size regardless of the size of anything else.
Unless you are creating a print stylesheet, I would strongly advise you to avoid points in web development or digital design. 1 point in CSS is equal to 1/72 inch. It's easy to assume that because we design websites at 72ppi the 1pt must equal 1px. It doesn’t. 1px is 0.75pt. Confused? This all stems from the CSS 2.1 standards and when you read it it makes sense. At least a little.
The pixel unit refers to the whole number of device pixels that best approximates the reference pixel. The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches (0.71m), the visual angle is about 0.0213 degrees. So, for reading at arm's length, 1px corresponds to about 0.26 mm (1/96 inch).
Font size and accessibility
However, the biggest challenge lies in using fonts in an accessible way. You're aiming for that fine balance between a top-quality design and an accessible design.
The World Wide Web Consortium, known as W3C, publishes a set of guidelines for building accessible websites. There are three levels of accessibilty in the latest Web Content Accessibility Guidelines (WCAG 2.0) – A, AA, and AAA. Guidelines that conform to A are the least accessible and have the lowest impact on design choices, while AAA guidelines are the most accessible but will impose significant limtations on your design.
WCAG 2.0 guideline 1.4 states:
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
What does this actually mean?
As a rough guide having standard body text colour of #777777 (grey) on a white background is the minimum you need to attain to a AA pass. For larger text, which is defined as 18pt (24px) or 14pt (18.666px) if its bold, you’ll need #828282 (about 52% grey).
Colour is one of the most powerful weapons available in typographic arsenal. It can be used to add emphasis, create a certain mood, and flag an element's purpose such as a primary heading or a pull quote – as well as much, much more.
Colour is equally important in reverse
You can convert pixels to point using this online tool.
When is bold isn’t bold
The definition of bold is open to interpretation and should really be based on common sense. Some typefaces only come in one weight and that weight might be very heavy but not specified as bold, but as bold is a visual reference then this is OK. Equally a typeface may have a bold weight included that is actually very light in which case it doesn’t count. Be sensible and be honest with yourself. Is that font bold enough?
Most of the time, AA is good enough. However some companies and government institutions require a AAA level of conformance.
You can read more about the WCAG 2.0 guidelines on colour contrast at w3.org.
Usage best practices – the basics
Use real text rather than text within graphics
There are two main reasons for using ‘real’ text rather than images that include text.
First of all, screen readers are able to read real text by transforming the words on screen, then synthesising them into sounds to be ‘spoken’ by your computer.
Secondly, most modern browsers and operating systems have the ability to enlarge text. Real text is able to scale without losing any visual quality. Whilst it's possible to provide alternative text for images, they are not scalable*.
Left: Real text. Right: Text as an image scaled up
*This is with the exception of SVGs (scalable vector graphics) which are indeed fully scalable. However, it's worth noting that if you're adhering to semantics it's far simpler to stick to standard text for your content, not to mention that even in this day and age you need to provide a fallback for your SVGs for older browsers that don't support them.
Try to stick to simple, easy-to-read fonts
Keeping to easy-to-read fonts particularly in body text or for your main paragraphs is essential to aid legibility. I’ll be going through what makes a font legible throughout this article.
Avoid long line lengths
As a rule of thumb, any line of text should be around 75 characters long. Beyond this a reader’s concentration begins to waver. Large bodies of text can result in readers losing their place, and ultimately struggling to read your well-crafted article.
Beware very short line lengths though. Lines that are too short cause the eye to travel back and forth a bit too much. This breaks the reader's rhythm and can cause them to skip potentially important words. To avoid this keep line length to at least 50 characters.
Learn more in this article about line length from the Baymard Institute.
Avoid small font sizes
WCAG 2.0 AA standards recommend that text is 14pt or larger (more on this later). It's also worth noting that the recommended line height (leading to all you print designers) should be a minumum of 1.5 times the font size, but that doesn’t mean we should get silly. It goes without saying that extremely loose line height is far worse than if it's too tight.
You can find out more about font size in this article from Smashing Magazine.
Use relative sizes for font size
Relative font sizes such as ems or rems allows for scalability in your typography. Fixed units such as pixels do not. Scalable fonts allow users to enlarge text as well as making it easier to create responsive designs that work across various screen sizes.
Keep an eye on the colour contrast
Text, whether it is ‘real’ or image-based, should reach a minimum contrast ratio of 7:1. In terms of using greyscale images, this means using a grey of #777 (47% black) on white or #fff or greater. If in doubt, use a contrast checking tool.
Some people find a harsh black on white can be tiring to read, so it's often worth considering softening the contrast just a little. Try a colour that’s not quite black, such as a very dark grey like #262626 (85% black), which is easier on the eyes.
It’s also worth bearing in mind that reverse text (light text on a dark background) can be more difficult to read. So, as a rule, it’s best to avoid using large swathes of reverse text where you can.
Test the accessibility of different combinations of foreground and background colours at contrastchecker.com.
Don't rely on appearance alone
Although you can use colour, shape, variations and placement to convey meaning visually, assistive technologies and search engine spiders rely on the correct use of semantics to understand the content of a page. They aren’t able to differentiate visual differences in the way that you and I can. Visual differences essentially mean nothing to machines.
Avoid the use of animations
Moving text is harder to read. So, scrolling or blinking text is a big no-no. If you really must animate your text, or have animations occurring behind text, it is acceptable if it stops after five seconds.