Typography on the Web

Introduction

Crucial to the ethos of the web is providing information in a way which is easy to read. It sounds simple, but there are many design considerations which factor into this, one of the most obvious being: "Which font do I choose?"

Even though we are limited to a handful of fonts on the web, choosing the right one for the job can seem a frustrating task. Fonts not only need to legible but they also convey certain moods which affect the way people interpret the words and concept they represent.

So when you're creating a new website there's clearly no right font. You've got to look at what you are trying to say, the identity or brand and incorporate a font appropriate for the design.

What types of font are there?

Although there are many classifications for fonts we generally think of two kinds: Serif and sans-serif. Serif fonts (Times New Roman, Garamond etc) are the ones with the little "feet" on the bottom while sans-serif fonts (Arial, Verdana etc) are without the extra adornments. Generally speaking serif fonts have a more traditional old-fashioned feel, and a sense of history attached to them, while sans-serif fonts have a more modern, contemporary look.

It is often thought that in print serif fonts are more legible, while on screen sans-serif fonts are more readable. Indeed the most common fonts on the web these days are sans-serif fonts like Arial and Verdana, but that's not to say the serif fonts can't and shouldn't be used.

Lets take a look at the most popular fonts and how they can be tweaked for maximum legibility with the help of CSS.

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Hofstadter's Law: It always takes longer than you expect, even when you take into account Hofstadter's Law.”