Typography is an element of web design that is often misunderstood by Software Engineers. I think most people think of useful typography in terms of how legible it is. This is an important part obviously since you’re communicating with your user through text, but there are other important things to consider when choosing a typeface that is appropriate for your purpose. In this post I will run through some of the basics of typography, the rules that you should follow, some examples of good typography, the purpose of typography, the anatomy of typography, web safe fonts and how to optimize your typography.
Large companies like Red Bull and Mercedez and plenty more employ professional typographers to design them custom fonts from scratch. Having a font designed can cost thousands so why do they do it? Well with a company like Mercedez, their target is to convey a message of luxury and one of the most useful mediums of conveying this kind of message is via typography. The logo uses a serif font which is traditionally more ‘classic looking’ than a serif font.
The difference between serif and sans serif fonts is that the serif fonts have have little feet/kicks on them and sans serif don’t. Typically sans serif fonts are easier to read than serif fonts so they generally used as a body font. Serif fonts are more difficult for the eye read as the little feet/kicks slow down the eye’s peripheral vision from anticipating the next word. Serif fonts word well for logos where legibility is not an issue since it will not be surrounded by any other words.
In contrast the Red Bull font uses a sans serif font which is a lot bolder and more modern. Red Bull is a brand all about conveying energy and a youthful vibe so the font selection is a nice one.
The anatomy of typography
The x height – height of lower case x
Apature – Open aperture creates more visual space – opening in letter like c, a, e
Bowls – Rounded part of lower case letters
Kerning – The distance between letters. Good letter spacing makes it easy to read
Ascenders & Descenders
There are certain rules that should be followed when selecting an appropriate font. These rules should be customised for your own needs.
- In relation to the body copy you should never use more than 13 words per line. This is know as ‘the measure’. However if you use too few words paragraphs can look choppy and break the momentum of reading!
- The line height should be 1.4 multiplied by the font size in pixels. For example if my font size is 20px, line height should be 28px (so round up to 30px).
- Use a max of 2 fonts per page. Any more than this can create confusion around what is important on the page and what is not. You don’t ever want to make your user think or have to figure what’s important on the page.
- Taking the time to choose appropriate font pairings. Sans-serif and serif normally pair well together.
- Create a clear and limited font hierarchy
- All caps, font size, font weight etc.
- When scanning, user should be able to discern important information from less important information
- Font choice and colour should reflect tone/mood of the content. E.g Red Bull and Mecedes fonts above.
- Don’t adjust kerning (letter spacing) unless necessary. Doing so can negatively impact legibility.
- Don’t stretch fonts in Photoshop, just don’t. Pick the right font size so it’s easier when implementing on the web.
- Not technically typography but…good grammar! Nothing undermines a product/website faster than typos.
- Avoid widows and orphans. See below.
- Fonts must be legible and follow the rule son all screen sizes.
The Purpose of Typography
- To communicate the meaning of a word in a way that is simple for the user.
- Help readers find, connect and understand text.
- Font choice and size – makes text meaningful and legible.
- Line height and length guides eyes.
- User should be able to scan the page and be able to discern the important parts from the unimportant parts.
Typeface conveys meaning
The form of the letter, the weight, the colour, typeface, font size and whether it’s uppercase or lowercase all should convey the meaning. Below you can see how strange the word ‘QUIET’ looks in all caps and bold and how weird ‘loud’ looks when it’s lower case, a medium font weight and in Comic Sans
- People don’t read one word at a time they use their peripherals and central vision.
- Letter strokes allow reader to recognise word shapes.
- Bold and italic lose legibility because they usually reduce letter spacing. Increasing letter spacing makes it more work for the eye to read words and it inhibits reading flow.
- Generous line height (1.4 x font size) promoted horizontal motion but too far apart, sentences float away from each other.
- 12px-16px is the recommended size for the body text, depends what font.
Visually chunking information
- Things close to each other on a page become associated with each other e.g headers and sub header.
- The opposite of similarity is contrast. If heading and body are too similar it’s hard to discern between them.
- Readers learn quickly how to use similarity and associate related chunks of text with each-other.
- Don’t use too many levels of hierarchy, 3 is good.
- Tightening distance between elements to associate them with each other (title and author).
Use web safe fonts
- Comic sans
Some cool examples of typography design
It’s not all about legibility!
Good colour selection and use of grid
- ilovetypography.com – Inspiration
- alistapart.com – Web typographer
- nicewebtype.com – Stay informed
- fontsquirrel.com – Free fonts