When the Internet was first conceived, there were only a couple of fonts available to use. With the introduction of CSS, designers now have much more control over which fonts are displayed and how they are laid out on the page.

Serif Fonts

Serif fonts have been around for thousands of years. Their characteristic is that they have a small flick at the edges of lines making up the letters, leading to legible and easy to scan type.

You can see above this is particularly noticeable on certain characters. Good examples of serif fonts include Times New Roman and Garamond.

Sans-Serif Fonts

Sans Serif fonts are much more recent, and are used heavily in online media. This is because they have less clutter, and are easier to read at much smaller sizes – lending themselves to use online where space is limited. On Design Shack, you can see that Serif fonts are used for headings and titles, with Sans-Serif for the main body of text.

Limitations

It is tempting when designing to feel that you are able to specify any of the fonts you have on your computer for your website. Unfortunately, this isn’t the case. Only fonts available on your visitor’s computer will work on your website, with the browser defaulting to its standard font otherwise. For this reason it is important to specify several fonts in your CSS file:

body {font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif; }
blockquote {font-family: Georgia, Garamond, serif; }

This ensures that you can degrade the font to your choosing if the ideal one isn’t installed on the viewers system.

Why typography is important

It is all too easy to focus on the layout, colours and pictures on your website and let careful font consideration fall to the wayside. This is a recipe for disaster! Your readers need to be able to navigate clearly through your website, and using headings, lists and fonts clearly can facilitate easy scanning of pages.

Splitting your writing up into small blocks of text also makes deciphering it’s meaning and message much easier. Take care when choosing fonts and you’ll reap the benefits. For more information, take a look at our further tutorials on Fonts & Typography.