4 types of fonts and their variants in web design - with examples! | W3 Lab

4 types of fonts and their variants in web design – with examples!

There are hundreds of thousands of fonts, and every day people create new ones.

If you think about it, it is pretty amazing and impressive how there’s still fonts that we haven’t seen. But this font diversity leaves us with a huge dilemma: which fonts do we choose and use for our web design?

Do we go for decorative fonts or the modern ones? Or do we choose the bold variant over the light one?

The choices are pretty much infinite and because of this, it is easy to choose the wrong type of font and get a really bad design.

A few days ago, we wrote about the 5 principles in graphic design, so to complete the graphic design/web design chapter, today we are bringing you the types of fonts in web design and how each of them are used.

  1. Serif fonts
    • Old-style serif fonts
    • Transitional serif fonts
    • Didone serif fonts
    • Slab serif fonts
  2. Sans serif fonts
    • Grotesque sans serif fonts
    • Neo-grotesque sans serif fonts
    • Geometric sans serif fonts
    • Humanist sans serif fonts
  3. Script fonts
  4. Decorative fonts

Different types of fonts

The most basic distinction between fonts is the difference between serif and sans serif fonts.

We hear about these two types often, but what is the actual difference?

Here it is:  

sans serif and serif font example - sans serif font type - serif font type - sans serif serif difference
An example of a serif and sans serif font

As you can see, the serif font is more decorative, while the sans serif one is simpler.

The parts I circled are what is actually called the serifs, hence the sans serif name, which literally means ‘without serifs’.

There are different types of both serif and sans serif fonts, but we’ll get to that in a bit.

Aside from these two giant font categories, there are script fonts and display fonts. Let’s see what each of these types entails and how they’re used in web design.

1. Serif fonts

The reason for this font being first on our list is because it is the oldest font type.

It originated from Roman carvings, and there are two theories why the Romans had serifs on their letters.

The first one states that, during the process of carving the letters into stone, the stone carvers unavoidably created the serifs while following the outlines of the letters.

The second theory suggests that the use of serifs was deliberate and that they were used to neaten the ends of lines.

Whichever the case, letters with serifs became the default and were used for centuries, so when Gutenberg devised the movable type printing press, the books were printed in letters with serifs.   

Because of their origin, serif fonts are associated with the old and the traditional, but this doesn’t mean that they’re not used anymore.  

There are 4 types of serif fonts that have their own separate uses and variants, so let’s take a look:

• Old-style serif fonts

This serif font style originated in 1465, shortly after Gutenberg invented the movable type printing press.

Old-style serif fonts were inspired by the Renaissance and had great readability on the rough paper that they were printed on back then.

Let’s look at an old-style serif font:

garamond font example - serif type font example
The Garamond font

What characterizes these fonts is a small difference between thick and thin lines, as well as curves that connect the serifs to the strokes.

Other old-time serif fonts include Bembo, Bookerly, Cartier, Callisto, Gentium, Palatino, Requiem and many others.

Nowadays, they’re rarely used in web design, but they have found their use in printing, as well as book covers and movie posters. Penguin Books, Oxford University Press, Cambridge University Press, the National Gallery, and many others use Bembo as their body typeface.

Fun fact: The Requiem font is most often used for credits in movies and TV shows.

• Transitional serif fonts

These fonts are also referred to as baroque fonts and became widely used mid-18th century. They got their name because they present a mix of old-time and more modern fonts. Times New Roman is a type of a transitional font:

transitional serif font - times new roman font
The Times New Roman font

The difference between thick and thin lines is more obvious, and many of them have more round serifs (as opposed to strokes) and a more vertical axis.

Other transitional fonts include Baskerville, Georgia, Bookman, Cambria, Perpetua, and others. They’re still very much used, here’s a website of a developer and designer that uses the Times New Roman font:

homepage with serif font
Homepage of Mees Vesberne

• Didone serif fonts

Didone is a more modern version of the serif fonts and it first appeared in the late 18th century. These fonts were immediately a huge hit and could be found everywhere.

The designers of the first Didone fonts, the printers Firmin Didot, Giambattista Bodoni and Justus Erich Walbaum, wanted more elegant fonts that would show the more refined printing techniques. Here’s an example of a Didone font:

didone serif font - the libre bodoni font
The Libre Bodoni font

It looks pretty modern, doesn’t it? And how sharp do those serifs look? Compared to the previous two serif types, this one is sleeker and looks neater and more trimmed.

Didone fonts are characterized by narrow serifs that have a constant width, thick vertical strokes of letters, and a strong contrast between the horizontal and vertical parts of letters.

Out of the four serif types, the Didone fonts are used the most in web design.

didone font on a homepage
Didone font on The Harper’s Bazaar homepage

The Didone fonts are usually associated with fashion, but they can be found everywhere. Here’s a mattress company’s website that uses a unique Didone font:

allswell homepage didone font
Homepage of Allswell

• Slab serif fonts

The slab serif fonts appeared during the early 19th century. Their purpose was to grab attention, hence their main characteristic: thick and bold serifs. Here’s Rockwell, a slab serif with a geometric design and consistent line thickness:

slab serif font - the rockwell font
Slab serif font – The Rockwell font

In the past few years, their use significantly increased, probably because of their bold and clean design. They’re everywhere: from magazine and book covers, brand logos, and web design, as well, although pretty rarely.

Here’s a website that uses the Soho slab serif font for both the title and the body text:

an example of a slab serif on homepage
An example of a slab serif in web design | Source

2. Sans serif fonts

As minimalism became more popular, the need for simpler and cleaner fonts arose.

Enter, sans serif fonts.

These fonts, as previously mentioned, don’t have serifs and look more modern and sleeker. Just like with the serif fonts, sans serifs also have variations, depending on the period when they were made and their appearance.

They first appeared in the early 19th century. Frowned upon at first, they are nowadays used much more than serif fonts. Their sleek appearance works perfectly paired up with modern web design, and when it comes to web articles, their lack of serifs enables cleaner-looking text and increased readability.

Let’s look at the sans serif fonts variations, of which there are 4.  

• Grotesque sans serif fonts

This font family appeared first during the early 19th century.

Now, you may be thinking: ‘How can a font be described as grotesque?’ This isn’t about the god awful chiller typeface, or about any font that is dripping blood. These are quite ordinary looking fronts that got their name by being different.

Serif fonts were all people knew for centuries, so when the first fonts without serifs appeared, people thought they looked weird and ugly and called them grotesque.

If you think about it, it is kind of understandable. People were used to ornate fonts and their elegant serifs, so when something so ‘plain’ appeared, it makes sense that it was met with disgust.

The word grotesque started being used officially for these early sans serif fonts when William Thorowgood, a British typographer, designed the so-called Seven Line Grotesque font in 1832. It was used for newspaper titles, while the body remained in a serif font.

Here’s what it looked like:

seven line grotesque font
The Seven Line Grotesque font | Source

As you can see, the characteristics of these fonts include small contrast and even line widths.

I found it really interesting that some letters clearly stand out from others, such as the capital R, which is the case with many grotesque fonts.

Irregular proportions are very common when it comes to grotesque fonts, as well.

Additionally, when they first appeared, many of them didn’t have bold and italic variations, which limited their use, hence why the body text in newspapers was often in serif fonts.

Today, people are still creating grotesque fonts and some of them look pretty amazing and unique, like this one for example:  

art deco inspired grotesque font
An art deco inspired grotesque font

Here’s a website making great use of a grotesque font:

website with a grotesque font - grotesque font example
A stunning website with a grotesque font | Source

• Neo-grotesque sans serif fonts

As the name suggests, these sans serif fonts present a more modern variation of the grotesque fonts. The difference between them is that the neo-grotesque variant looks plainer.

They appeared during the 1950s when the graphic design style known as the International Typographic Style emerged.

During this period, the font Helvetica was created, one of the most popular fonts of the 20th century. 

I find it really fascinating that it is still very much used today, look at this stunning website that utilizes it as its main font:

neo-grotesque font type example
An example of a neo-grotesque font being used in web design | Source

Other neo-grotesque fonts include the famous Arial, Android’s Roboto, Impact, as well as Microsoft Sans Serif and many others.

• Geometric sans serif fonts

These sans serif fonts have a geometric appearance, which means squares and nearly perfect circles.

They originated in Germany during the early 20th century and most of the popular fonts were designed in the Bauhaus art school.

What made them popular was the fact they looked even cleaner and even more modern than the neo-grotesque kinds.

When it comes to these fonts, the letter ‘o’ is almost a perfect circle and the capital letters have different widths. Additionally, the ‘M’ is often spread out. Here’s the first geometric font called Erbar, created by Jakob Erbar:

the first geometric grotesque font example - geometric grotesque font web design
An example of a neo-grotesque font being used in web design | Source

Other geometric fonts include the famous and ever-so-popular Gotham, Brandon Grotesque, Century Gothic, Nobel, Metro. Here’s a website that uses both different variations of Gotham and the Brandon Grotesque fonts:

two geometric fonts - web design two geometric fonts
A website with a clean design and two different geometric fonts | Source

• Humanist sans serif fonts

Contrary to the geometric appearance of the aforementioned fonts, these look more like they were drawn by hand and have a more organic appearance, hence their name. They appeared during the early 20th century and were inspired by traditional letters, serif fonts and calligraphy.

The contrast between the thick and thin strokes is low, the ‘e’ has a slanted crossbar, and the ‘a’ and ‘g’ are double story, with the aim of readability increase. Here’s a website that uses Freight Sans, a sans serif humanist font:

humanist font example - humanist font type
An example of a website using a humanist font | Source

They used it in the text under the title, which is in Jubilat, a slab serif font. The body in Freight Sans has a natural appearance and contrasts with the chunky title. It also gives a friendlier and lighter note to the very serious looking website.

That was it about serif and sans serif fonts and their variants. But there are more types of fonts in web design, and those are script fonts and display fonts.

Let’s look at what they entail.

3. Script fonts

As their name suggests, the aim of these fonts is to resemble handwriting.

Because of the fact they are extremely ornate, they have very limited use in web design. You won’t see them used for body text, and they have found their use on really short phrases, most often titles.

They don’t have much in common aside from the fact they look more elegant. The brush strokes vary from font to font, as well as widths and the way the letters are drawn.

You’ll find them on logos of sophisticated restaurants, elegant liquor bottles, beauty brand logos and packages, posters, etc.

Here are some popular script fonts:

some script fonts that come with computers - script fonts
Some script fonts that come with computers

Even if you think that some of these look good, trust me, they don’t. Avoid using any script font that came with your computer. The wrong use of a script font can ruin an entire website and make people think that an amateur made it.

If you really want to use a script font, look on the internet instead. The best ones you will have to pay for, but nice looking free ones can also be found if you spend some time searching.

They cannot be frequently found on well-designed websites, and web designers avoid using them for the aforementioned reason. Instead, they go for modern fonts and old-timey fonts that are far more legible.

But we did say in the title of this article that we would provide you with examples, so I spent quite some time looking for websites that use script fonts tastefully. Here they are:

A design agency's website
A design agency’s website

This agency used the script font as sparingly as possible: for only one word. They created juxtaposition, or contrast, between the sans serif and script fonts, which makes their website more unique.

a restaurant website template
A restaurant website template

Another case of juxtaposition, probably with the aim of saying the restaurant is a combination of both modern and traditional cuisine and aesthetics.

The homepage of Smorgasboard
The homepage of Smorgasboard

This website utilizes the Blitz Script font pretty heavily, but it fits its artsy appearance and purpose.

4. Display fonts

Here’s the last of fonts in web design on our list. Display fonts, also known as decorative fonts, are the most diverse group of fonts.

You know how serif and sans serif font groups have something in common, which makes them easily recognizable? Here, that isn’t the case.

The fonts that belong in the decorative group vary in appearance so much that they often look like they don’t share a group.

Here’s some of them:

display fonts - display fonts on google font website
Display fonts on the google font website

As you can see, their appearance varies: there are highly decorative ones (Monoton), there are minimalist ones (Poiret One), Bangers looks very comic-esque, and Special Elite is a typewriter font.

They all look like they have nothing in common, except the fact they’re usable for titles and not body copy.

There are different styles of display fonts, and they include:

  • script looking fonts
  • fonts with shadows and engravings
  • fonts where upper and lower case letters are mixed
  • distorted fonts
  • very light or very bold fonts
  • fonts with reverse contrasts
  • alphabet redesigns

Here’s an example of a website that uses display fonts really well:

great example of display font - display font on website
This website is a great example of a good display font use

The use of color matches the unique display font they used for their logo and makes their website very memorable.

Wrapping up

Those were the 4 types of fonts in web design: serif fonts with their 4 categories of old-style, transitional, didone and slab serifs, sans serif fonts with their own 4 categories of grotesque, neo-grotesque, geometric, and humanist sans serifs, as well as script and display fonts.

Serifs and sans serifs are the most used categories in web design because of their simplicity and legibility, which the other two types often lack.

Hopefully, you’ve learned something about fonts and thank you for reading!

Font quiz

Do you think you’ve mastered the four main types of fonts and their subcategories?

To check your knowledge, head over to our portfolio page, and try to identify the fonts of 3-4 of our projects.

After you’re done and want to know if you’re correct about the types of fonts, you can contact us and we will respond to you shortly.

We here at W3 care deeply about knowledge and love sharing it.

Thanks for reading once again!

Marija Milosavljević
Marija Milosavljević

Graduated as first in her class. Incredibly quiet and shy until the lag in Warframe turns her into a raging death-bunny.

Leave a Reply

Your email address will not be published. Required fields are marked *