One of our most asked question is – how do I choose a typeface for my web design work? Unfortunately, there’s not a standard recipe for perfect typography, because it’s all about finding the right fit for the occasion. Rather than make text legible, we need to make it scrumptiously readable.
This is part 1 of our web typography series, we detail the perfect recipe for creating web typography from hierarchy to white space and tell you what happens when good typography goes bad. Don’t forget to also check out A beginner’s guide to using Google Fonts and Introduction to Icon Fonts.
Typography is like baking
Typography is a vital ingredient for any web page. The relationship between letters and words, sentences and titles are the flour that binds your cake, as well as the jam between layers. Whether in the comments of your newsfeed, the morning news or the mid-morning article there’s type in every morsel. Type has the power to affect the way we feel, and influence our understanding.
You know how easy it can be to mess up a recipe with one wrong ingredient? Unfortunately that principal also applies to typography.
The perfect recipe for web typography
There’s no single recipe for perfect typography (sorry). It’s about finding a dish fit for the occasion. Rather than make text legible, we need to make it scrumptiously readable. The following principals are important to consider and can help ensure that your typesetting hits the spot.
A combination of font size, weight, colour, position, and font selection can be used to achieve hierarchy. It’s the practice of providing focal points to make the text scannable.
It’s important to provide the right contrast between font colour and background. Keep in mind that too much contrast such as white agains a black can also be hard to read.
Default letterspacing should be ok for standard text, however it’s recommended to add add 5–12% extra letterspacing to the use of capital letters together.
The goal in line-length is is for the reader’s eyes to esily flow from the end of one line to the beginning of the next. 65 characters is often considered ideal for a optimum reading experience.
Line height is the space between individual lines of text, it applies to body text as well as headers. Line height that is too short will cause users to squint while reading. If it is too large, the text will seem like separate bodies instead of grouped together as one.
White space / Negative space
The space around the typography including margins and gutters plays an important role as it contributes to a balanced feeling page. It offsets large amounts of text and helps eye flow with ease.
When good typography goes bad…
- Poorly set type can cause eyestrain and frustration to readers. An example of this is when the line length is too wide and causes a reader to loose their place on the following line.
- If a reader is unable to easily scan an article they may abandon it. This increases bounce-rate which may lead to a negative impact on Google page rank.
- Lack of hierarchy in a written document can prevent a reader from finding sought after information, reducing their likelihood of returning to the site.
- Poor typesetting can make a web page look dated and may be seen as less credible.
How to keep your typography fresh
Stay fresh, stay new. Stay aware. There’s a multitude of blogs and resources to help you keep your type inline. Trends change over time and it’s important to check out what the competition is up to. Here’s a little something we prepared earlier:
Tutorials & resources:
An indepth look at best pratices and praticle application for web typography.
Google Material Design Specification
Google has outlined some fantastic approach to type specification, and all matters design.
A list Apart – How we read
Look at the type, it’s just beautiful. The article is helpful too!
Smashing Magazine – Typographic Design Patterns And Current Practices (2013)
An in depth study of developments and trends in Web typography reveals interesting statistics, such as 84% of websites use the same fonts in the print and standard style sheets.
Visual examples and inspiration:
Type we Like
A beautiful showcase of Google font combinations and creative uses. Just click or hover to see the font in use.
I love typography & Friends of type
While primarily used in print design hand lettering can be an incredible source of inspiration for interesting and engaging title fonts in web design. This is a fantastic source of inspiration and might just inspire you to push your type a little further.