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.
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 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.
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.
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:
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 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:
Source: Ancient Peaks
Source: Donauhof Wien
3. Freight Text
Source: Xavier Bourdil
4. St. Marie
Source: Drella Gallery
6. Larish Neue
Source: Jennifer Heintz
Source: Nurture Digital
Source: Leader Bag
12. Orpheus Pro
Source: Isabelle Fox
13. Tiempos Fine
Source: Rally Interactive
Source: Evert 45
Source: Design Thinkers
16. Saol Display
17. Segoe UI
Source: Walking Men
18. Playfair Display
Source: Festival Franciacorta
21. Silk Serif
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.
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!