22 Best Serif Fonts for Your Website

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.

Learn more about typography in web design in Agente`s Case Studies.

Today, we have prepared 22 best serif fonts 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.

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.

Source: Funny Junk

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

Still, the comparison is true. Sans serif web 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, who did their e-commerce website redesign lately.

Nevertheless, times change. Over the last few years, worldwide fashion brands switched from ostentatious serif fonts in their logos and e-commerce web designs 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.

 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.

Source: Asaro

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

• https://fontpair.co/
• https://fontjoy.com/
• http://typ.io/
• https://fonts.google.com/

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:

Korean, Han Serif Font:

Hebrew, David Font:

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 best sans-serif fonts for websites 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

Source: Ancient Peaks

2. Georgia

Source: Donauhof Wien

3. Freight Text

Source: Xavier Bourdil

4. St. Marie

Source: Coucoushop

5. Beirut

Source: Drella Gallery

6. Larish Neue

Source: Jennifer Heintz

7. Mermaid

Source: Portion

8. Abril Fatface

Source: Nurture Digital

9. Canela

Source: Emergence

10. Ogg

Source: Leader Bag

11. Windsor

Source: Sikkema

12. Orpheus Pro

Source: Isabelle Fox

13. Tiempos Fine

Source: Rally Interactive

14. Bodoni

Source: Evert 45

15. Roslindale

Source: Design Thinkers

16. Saol Display

Source: Outline

17. Segoe UI

Source: Walking Men

18. Playfair Display

Source: Festival Franciacorta

19. Butler

Source: Awwwards

20. AW Conqueror Didot   

Source: Measponte

21. Silk Serif

Source: Iglucraft

22. Lora

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:

• MyFonts
• Google Fonts
• DaFont
• Adobe Typekit Subscription
• Font Squirrel
• Creative Market
• Fonts.com

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!