twitterfacebook
Top 30 sites for freelancers
Every site you'll ever need! check it out →

The Importance of Typography in Web Design

The Importance of Typography in Web Design

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.

 

Z layout typography

Z-layout via vanseodesign.com

F layout typography

F-layout via vanseodesign.com

 

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:

Hierarchy

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.

Proper Typeface(s)

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.

Adjust Line-height

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.

Line-Height Typography

Line-Height in Web Design typography

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.

 

Your turn:

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?

Written by Steve

Steve is a freelance web designer, technologist, educator, Adobe Certified Expert and friend from the San Francisco bay area. He is a incessant seeker of knowledge and tirelessly thinks about how he can make things better. You can learn more about him on his website, www.stevedolan.com or by following him on Twitter: @scribblesteve

  • http://www.seochat.com Nannie Burgoyne

    my paper is all about graphic arts and graphic design please help….i would really appreciate it.
    thank you(:

  • Patrick

    I have never personally used Typography in web design, mostly because I am not a web designer. But I can say that I use the internet enough to tell the difference between good font and bad font. If a site is hard to read I close it or navigate away from it as fast a possible to avoid headaches.