Post-Thumbnail

Choosing typography for your website is almost as essential as the design itself. It not only helps your visitor have a clear understanding of your websites content the type also sets a mood for your website. Since this kind of consideration can be very subjective, there are a lot of “right” answers. But the answer is easier than you think!

Tech Context

Since the mid-nineties, when Netscape introduced the font tag for changing the typeface of text (now obsolete), web masters have been trying to use custom fonts on their websites to certain success.

Throughout the history of the web and as new technologies emerge; different types of solutions were being used at several stages. These workarounds could go from using actual images instead of text, to CSS or Flash based image replacement or JavaScript.

Nowadays there are several tools and technology available, like Google Fonts (free), or Adobe Typekit (premium) that makes using custom fonts very easy. Even more, online website builder an editor tools such as Breezi, Squarespace, Moonfruit and others take care of the whole process, so you don’t have to worry about code and workarounds.

Readability First

The first thing you should focus on is readability. You may be tempted to choose a font by its appearance, and it is of course something important, but you must always remember the main reason you present some text on your site: so that people can read it.

So if an image lacks readability, there’s no point presenting it. The idea of a publication that contains text is to deliver a message. If there’s interference on the way, the message won’t be delivered. It’s better to avoid a stylish but unreadable typography than to risk your visitors not being able to understand what you are trying to state.

Start with the Type for the Body

It’s probable that the part that visitors will focus the most would be the body text. It will be where they spend more time reading your content, simply because it will be the most abundant text on your site.

For this reason, it is recommended that you don’t use a complicated custom font. Any of the sans serif “web safe” fonts (you’ll learn more about this term below) will do. In the body text is where the previous point makes most sense: readability.

Font size is something relevant to think about too. Each different design can have different implications and variations of sizes, so there’s no “one-size-fits-all” statement that we can issue regarding it, but something around 14 and even up to 16 pixels can work right.

Type for Titles

Titles are also important, because they will be the starting/introductory point to the larger blocks of text. This is due to the fact that people scan pages on the web, instead of reading them linearly from start to finish.

And in titles, since they usually feature a larger font size and in smaller blocks of text, you can have more flexibility on the typography. You can allow your title to have a more elaborated or complex font.

Again, the larger the type the easier it is to read, this is why you can have more type options for the headings of your site, if you present these in a larger size.

Furthermore, if you use custom typography, you may need some kind of method to present the right font for your headings. And for example, if you’re using a solution that uses JavaScript to display a font on your website (like Google Fonts, Adobe Typekit, or Cufon), it will add to the loading time. And the more the script is needed to render text, the slower the page can get. This is also another reason that you may want to avoid using custom fonts for the body/paragraph text.

As mentioned above, there is not a set standard about sizes, but if you want a suggestion, you can try using 32/34 pixels for the level one heading (h1), and start dropping from there, since there shouldn’t be any text larger than the top heading.

The one thing to mention is that you should emphasize hierarchies, so that headings stand out from normal text. This can be done in several ways, but the easiest, most used and recommended way, is to make them bigger than normal text. You can also make them bold, of different color, have a background, a bullet, etc.

2 Type Faces are Enough

If you use too many fonts, you will make your site inconsistent. It can be chaotic and create tension. Perhaps this is intended, but unless managed properly, it should be avoided.
Of course, “rules are made to be broken”, and you could try using 3 or more fonts, and still have good results. But generally speaking, using two different types of fonts can be enough for almost any purpose.

For example: one can be for the general blocks of text (body) and the other one for titles (headings) and other emphasized elements.

Style Categories

The most widely known and used categories for fonts are Serif and Sans Serif. Serif fonts have small details or adornments on the ending of letters, whilst sans serif don’t.

There are other categories like “Script”, “Blackletter” or “Mono”, but those are not used as widely as the former ones.

Web Safe fonts

“Web Safe” is a term used to describe elements that are available, or otherwise “safe” to use on the web. It doesn’t only apply to fonts, but in this context specifically, it refers to fonts that are universally installed on most computers (Macs or PCs).

They can be safely invoked in your site without any type of hack, replacement method, script or repercussion, and they will be displayed as expected on all computers (at least on the ones that have an Internet connection available).

Here’s a quick list of serif and sans serif “safe” fonts:

Serif Web Safe Fonts

  • Helvetica
  • Arial
  • Tahoma
  • Impact
  • Lucida Sans
  • Verdana
  • Geneva

Sans Serif Web Safe Fonts

  • Times New Roman
  • Georgia
  • Garamond
  • Palatino Linotype
  • Book Antiqua
  • Courier
  • Monaco

Other Notes

There are other formatting options that you should take into account when adjusting type. Even if you have a very good font, that’s readable and goes along with your design, it can still be messed if it doesn’t have the right letter spacing or line height.

These two characteristics can help make text more readable. They can also be used to achieve certain effect, like having letters too cramped and close to each other, which can add to the design you are trying to achieve. As long as they remain readable, it’s acceptable.

A note on the length of lines for your blocks of text: it is recommended (though not a strict rule) to employ 45-75 characters for each line. If the line is too short, it can affect the pace at which the visitor is reading. If you use a line of too many characters, it will be very easy to get lost when going to the next line.

Sum Up

Of all the rules stated above, perhaps the most important one should be readability. As stated all along, none of the other ones should be treated as unbreakable or fixed. You can try experimenting, and having some feedback from a designer, or from any normal or random visitor(s).

Buffer
About the Author: Lozbo is a technology enthusiast with front end web design/development experience and is currently writing tech articles for Breezi, a website builder that enables designers to create beautiful sites. Facebook | Twitter | Youtube
  • http://www.weboutsourcing-gateway.com/ Web Outsourcing Gateway

    “Of all the rules stated above, perhaps the most important one should be readability.” I agree with this, but texts must not only be readable in terms of typography, it must be readable in terms of style of writing.

  • http://www.facebook.com/tubala Tuba Lajos

    hey guys! reversed serif/sans-serif type list… ;)