What’s the point ? Font types for web

A pitfall that I often meet on appointment: Typography and font selection.

Today, I offer you to see two things. On the one hand, what types of fonts to choose when designing a site and on the other hand, how to defend your choices (or those of your designer).

1 – Several types of fonts

When talking about a modern subject, I quite like to touch the historical context. It helps to understand a few more things.

First, the serifs in typography would come from marks left by writing tools (inks and engravings). These gave the “serif” style.

Moreover, it seems that the Romans used the serifs to create effects of light on large engravings. This would give a great readability on buildings.

The “sans-serif” style, namely, without serifs, became popular more recently. I found 1920 on this Wikipedia article, from the inspiration of the Bauhaus.

But non-serif fonts have been found within Humanist style or even gothic style.

In the early days of computing, because of low screen resolutions, the sans-serif was much more used than the serif. That said, the latter is gradually coming back, due to technical improvements.

2 – Differences between screen and paper

The major difference between the two supports is, in my opinion, the ink. On screen, no ink. While the paper absorbs the latter. As a result, the font does not look exactly the same.

This is why some fonts are made and thought for printing (with this ink constraint that will not make the same effect once absorbed and dry).

Screen fonts are already designed to look exactly as they are conceived.

For more information, I recommend the fabulous book On Web Typography by Jason Santa Maria, proposed by the superb collection A Book Apart. I specify that, although I worship this series of books, it is not a product placement.

On top of that, let’s dive into the 4 most used font types and in which cases to choose them.

3 – The 4 types

On the menu, we will talk about serif, sans-serif, cursive and slab. Enjoy your meal !

Serif style

I start by presenting you the most used form, the most traditional (the Romans, all that, all that …)

It is the most common form in books, because of its great readability on long paragraphs of texts.

  • Used for titles and body text
  • Try to limit each design to one serif font
  • Pairs very well with a sans-serif (e.g. one in title or in call to action, the other in body)

Sans-serif style

Sans-serif style seems simpler and more refined. This is a type of font that offers a good rendering when you want to play with thickness and text size.

As I pointed out above, this is the dominant font style of the web. First, historically (screen resolution …) then for practical reasons (it gives more impact when pairing different thickness or size).

  • Used for titles and body text
  • Avoid using too light thickness on small text sizes
  • Works well with all other types of fonts
serif and sans fonts (en)

Cursive, or script

Rarest type on screens and impressions. For obvious reasons:

  • Not always conveniently readable
  • Their integration within a design has a lot of impact, but also harder to create
  • It’s difficult to choose a cursive that reflects the intent of the design. Indeed, it is the least neutral type of typo.

However, I think that the evolution of screen definitions and the production of better and more readable scripts will make them more used.

In addition, this type of font is very representative of the current trend in design that leans more and more towards the emotional. I would not be surprised to meet them more often.

  • Used for short and big titles, slogans
  • I would not use them for long text bodies
  • Goes very well with a sans-serif

Slab

I do not know much about the history of slab type. It seems that it comes from Germany, but I do not have any reliable sources on it.

Be that as it may, it’s basically a sub-genre of the serif. The latter is characterized by uniform lines of the same thickness (a little like the sans-serif), but keeping the serifs, by purifying them.

It is a practical font that can be filled with a color, an image or a pattern. When you are not convinced by a serif or a sans-serif for a striking effect, try a very thick slab !

  • Mainly used for display (headlines, computer graphics, etc.)
  • To avoid for small sizes
  • Good with a serif or sans-serif

To conclude

It’s not because I’ve introduced 4 font families that you have to use them all in your designs. I have often noticed that the designs I like the most are limited to 2 or 3 different fonts.

What’s more, it’s not a sacrosanct law that I wrote. The best is to test, however, you can use it to argue and based on understandable elements to detail your font choices.

 

Want to develop a website ?

Grab your phone and give me a call !