Full cover

01 November 2018

22 Best Serif Fonts for Your Website

Thumb veider
Agente Content Team
22 Best Serif Fonts for Your Website

Share

Fonts are an indispensable part of a company’s brand identity. Nothing speaks better about your professionalism than decent typography that fits your brand’s message.

In our recent article about typography in web design, we touched on graphic design recommendations, some trends for 2018 and showed inspiring examples of website typography.

Today, we have prepared 22 amazing serif fonts to use for your website. You’ll see whether serif fonts are a good fit for your company’s style and learn how to pair them with other typography.

Serif vs. Sans Serif

Serif is a little stroke that spreads out of letters, numerals, and other characters within a font family. It is a traditional type of typeface which is used to appear in multiple print media. In contrast, sans-serif is gaining its popularity on the web for regular website copy.

best serif fonts

Source: Pinterest

The most popular serif fonts are Times New Roman, Georgia, and Baskerville. The slight whimsical touch created by these serifs adds to officiality and elegance.

But what’s behind the stroke that distinguishes serifs from sans serifs? Does it make a difference which typeface you use on a website?

Firstly, it’s the mood that is evoked by each of the fonts. Look at that picture below.

serif fonts

Source: Funny Junk

Sure, Comic Sans is a no-no in almost every interface ever.

Still, the comparison is true. Sans serif fonts add a touch of modernity and straightforward speaking.

In turn, serif fonts are associated with sophisticated and reputable brands that maintain the image of a top-notch company. They used to appear in the broadsheet of the New York Times and the Huffington Post, or on well-known fashion websites, such as Dior and or Burberry.

Nevertheless, times change. Over the last few years, worldwide fashion brands switched from ostentatious serif fonts in their logos and company typefaces to minimalist sans. Why is this happening, you ask?

Some talk about better readability and legibility of sans serifs. In fact, it seems more like a zeitgeist thing, a new fashionista trend. Being a matter of debate, depersonalization of logos and simplification of elegant serif fonts are likely to appeal to the “substance over form” idea.

best serif fonts

 Source: Burberry

Source: Burberry

 In fact, there’s no significant difference between serifs and sans-serifs in terms of readability. However, in large and expansive passages serifs might work better and cause less eye strain, according to the research.

Ultimately, the choice of the best serif web fonts would depend on the exact project, the type and the context of a website and the requirements set by stakeholders.

How to combine serifs with other fonts?

Need to add one or more fonts to a serif font you like? Try sans serif in large sizes. See the example below – serif font in headlines is combined with sans serif for the body text. This works well as the two fonts create a contrast that holds the user’s attention.

best serif fonts

Source: Asaro

Here are a couple of sources to look for nice font pairs:

Are there serif fonts in non-Latin alphabets?

Well, kind of.  The strokes at the end of Latin letters that differentiate a serif from a sans serif would translate in other languages to the difference between classic and modern fonts.

Thus, the signs of modern serif fonts are used in multiple languages and typefaces. Check out these two:

Chinese, Han Serif Font:

best serif fonts

Hebrew, David Font:

best serif fonts

22 Best Serif Fonts for Your Website

Spoiler: Most designers will prefer old vanilla Georgia or some of the popular Google fonts to “sexy” new fonts and it’s totally OK. They still work!

Others love giving the users subtle effects and adding beautiful delights.

According to the study, 40% of designers look for inspiration in images across the web. We decided not to bore you guys to death with single letters on a pastel colored background. Instead, we pored over some effective websites with the best serif fonts to show you how serif fonts work in action.

Click on the headlines to see where to get them and for what price:

1. Times New Roman

best serif fotns

Source: Ancient Peaks

2. Georgia

best serif fonts

Source: Donauhof Wien

3. Freight Text

best serif fonts

Source: Xavier Bourdil

4. St. Marie

best serif fonts

Source: Coucoushop

5. Beirut

best serif fonts

Source: Drella Gallery

6. Larish Neue

best serif fonts

Source: Jennifer Heintz

7. Mermaid

best serif fonts

Source: Portion

8. Abril Fatface

best serif fonts

Source: Nurture Digital

9. Canela

best serif fonts

Source: Emergence

10. Ogg

best serif fonts

Source: Leader Bag

11. Windsor

best serif fonts

Source: Sikkema

12. Orpheus Pro

best serif fonts

Source: Isabelle Fox

13. Tiempos Fine

best serif fonts

Source: Rally Interactive

14. Bodoni

best serif fonts

Source: Evert 45

15. Roslindale

best serif fonts

Source: Design Thinkers

16. Saol Display

best serif fonts

Source: Outline

17. Segoe UI

best serif fonts

Source: Walking Men

18. Playfair Display

best serif fonts

Source: Festival Franciacorta

19. Butler

best serif fonts

Source: Awwwards

20. AW Conqueror Didot   

best serif fonts

Source: Measponte

21. Silk Serif

best serif fonts

Source: Iglucraft

22. Lora

best serif fonts

Source: CIS Russia

On the hunt for more killer serif fonts?

Below is a well-researched list of the most popular font sources from @mcflugie. See where your fellow designers are purchasing or downloading fonts for free in 2018:

What if you have already like a web font on a certain website? Click on it with browser extension app WhatFont  and see a pop-up with brief info.

Wrap up

Serif fonts are timeless classics. High visibility, a sense of elegance and classy style makes them a good functional choice for a website of any type.

We hope you liked our best serif fonts collection and are inspired to use them in your website design.

Are there any fonts you especially adore? Share your thoughts with Agente team in our live chat — we are thrilled to give you a piece of professional advice!

Let's talk

Share

> To the top

Let's talk

Is there a challenge your organization or company needs help solving? We’d love to discuss it.
  • Budget
Attach a file

File size should not exceed 10mb