Typography on the web is more important now than ever. With the recent advances in HTML5 and CSS3, and the trends with responsive design for optimizing your site content for all devices, it’s easy to get lost in the creative space and choose fonts that you like, and it’s easy to forget about what’s best for the users of your site.
Typography is important because it is the primary way a website communicates to users.
With the explosion in the use of tablets and smartphones to access the web, the first thing you should be thinking about is letting the user focus on the most important part of any website: The content. Jakob Neilson, web usability expert, author, and owner of useit.com famously wrote:
How users read on the web: They don’t.
They scan, instead. There are two major identified types of reading on the web. They have been identified as an F-shaped pattern and a Z-shaped pattern.
To learn more about layout patterns on websites, check out Steven Bradley’s excellent article on Vanseo Design.
Here is a list of typography tips to consider for your site:
There are many sections on a website you can use text: headlines, paragraphs, navigation, etc. With Hierarchy, you’re guiding the user to the most useful and important information on the page. The use of color, size, contrast and alignment is vital for the user to find the information they are looking for. Generally, the biggest type on the page should be the most important, while the smallest would be the least important.
Serif or Sans-Serif?
Ask yourself first if the text is readable and easy to follow. Keep the number of different fonts to a minimum. Aim for two but don’t go over three. Having numerous font-faces and type styles can be the equivalent of many voices in a small room. Oliver Reichenstein via informationarchitects.net notes that against common beliefs, both serif and sans serif can perform equally well, if you choose a body text size above 12 pixels. Below 12 pixels serifed typefaces don’t render sharply enough.
The perfect line-height will depend on your choice of font. Proximity is one of the principles of design. Lines of text that are too close together is difficult to read and text that is farther apart. Adjusting the line-height can also allow you to fit text in tight spaces.
Do a site readability check
My favorite tool for web readability is The Readability Test Tool at http://www.read-able.com. It’s reports are easy to understand and provides valuable insight to adjustments you can make.
What is your experience with Web Typography? What are your favorite examples of web-fonts that gave you a good experience on a web site?