Typography is a key component of web design and the choice of which font to use on your projects, while often overlooked, can have a huge impact on how well they’re received.

Popular design wisdom establishes that different kinds of fonts are better suited for specific purposes, such as serif being better for printed works, and sans serif excelling when it comes to high-impact headlines. Today, we’re focusing on readability in web design, and as such, we’ll be covering only serif fonts, which (being more easily identified by the human eye) are considered more legible than their sans serif counterparts.

Without further ado, let’s quickly go over the WordPress font installation process, then over our picks one by one.

How to Add Fonts to Your WordPress Website

There are two ways you can go around adding fonts to your WordPress repertoire. The first involves making some simple CSS modifications, but they can get annoying if you want to try out a bunch of them.

The second route involves, of course, plugins. Our personal pick for this case is Use Any Font:

Screenshot of the Use Any Font plugin header.

This handy little plugin enables you to upload third party fonts to your server via a simple interface, and use them via the WordPress editor without any additional setup. It supports both TTF and OTF file extensions, and is fully free to use.

30 Incredibly Readable Serif Fonts for Your Next Web Design Project

1. Calendas Plus


Screenshot of the Calendas Plus header.

The history of Calendas goes all the way back to 2010 when it was designed for (you guessed it) a calendar project. It’s a classic, elegant typeface designed to remain readable even when used in small sizes, and it’s available for free.

2. Bitter Ht


Screenshot of the Bitter Ht header.

Bitter Ht is a serif font with a bold design. It was designed to be used for eBooks, which means it’s optimized for readability, even at low resolutions. The best part? It’s completely free.

3. Fritz


Screenshot of the Fritz header.

As you can see, Fritz is a unique serif font. Its letters boast thin stems and arms, with unbracketed serifs, giving them an eye-catching, mechanical look. The font comes in four variations with multiple weights, and it’s available in all major font formats.

4. Cinzel


Example of the Cinzel font.

Cinzel is a classic typeface inspired by the origins of the Latin alphabet, with a modern contemporary twist to its design. The font was designed specifically to be included in the Google Fonts library (so you know it’s got to be good), and it’s fully free.

5. Modum

Example of the Modum font.

Modum is a serif font with a contemporary feel, and happens to be the recipient of the MyFonts Font of the Month Award for April 2014, as well as boasting a Merit Award from the HiiBrand International Typography Competition.

6. Margot


Screenshot of the Margot header.

While Margot works well in small prints, it shines when it comes to posters and large signages – making it perfect for big designs with an emphasis on readability. Plus, its emphasis on soft curves gives it a friendly and accessible feel.

7. Medio


Screenshot of the Medio header.

Medio is an elegant serif font that combines a mix of thin and wide strikes and stems, resulting an attractive visual effect. The contrast is not so easily spotted when using small sizes, but becomes readily apparent when employing the font in titles or headings.

8. Ainslie


Screenshot of the Ainslie header.

Ainslie is actually a ‘semi serif’ font, the first of its kind from its creators, Insigne Design. It was originally created for the Canberra Australia Centennial Typeface Competition in 2013 and is now available for sale in 42 variations (all great as far as readability is concerned) over at their website.

9. Korneuburg Slab

Screenshot of the Korneuburg Slab header.

Korneuburg Slab is a softened down version of a different serif typeface, Korneuburg Display. It was made as a semester project and its design was inspired, in part, by the famous archways of Korneuburg.

10. Aleo


Screenshot of the Aleo header.

Aleo is a sleek slab serif font that boasts a lot of personality while still being highly readable. This free font comes in six different styles, and its bold version is well-suited for high-impact headlines and headers.

11. Klinic Slab


Example of the Klinic Slab font.

Yet another slab serif font, although this one was handcrafted by just one man. It comes in four different weights for a total of eight fonts, and is well-suited for both print and display design. You can obtain this font under a ‘pay what you want’ licensing deal for personal use.

12. Bandera Text

Screenshot of the Bandera header.

Bandera Text is a versatile font which can stand out both in regular print work or in large headlines. It has a very classic design which nonetheless doesn’t feel dated, and comes in six different weights.

13. Tryst


Example of the Tryst font.

Tryst is an elegant type which takes inspiration from 18th-century typography. Its letters are soft and easy on the eyes due to their high stroke contrast, making it an ideal choice for digital displays.

14. Fenix STD


Example of the Fenix STD font.

Fenix STD is a font designed with long reads in mind, composed of rough calligraphic strokes and boasting strong serifs. It’s also entirely free under a ‘pay what you want’ license.

15. Gaspar

Example of the Gaspar font.

Gaspar is a slab serif font created for intensive editorial use. Its creator, Carlos Alonso Costa, had a simple goal in mind when designing this typeface: a legible font that wouldn’t appear too dense to the eye.

16. Butler


Screenshot of the Butler header.

Butler aims to modernize the style of serif fonts through the addition of an extra stencil family. This font is highly versatile and wouldn’t look out of place in posters, books, or digital displays, thanks to its high contrasts.

17. Ethos


Example of the Ethos font.

Ethos is more than a single typeface – it’s a serif font family, with 36 styles in total. This huge variety of types enables Ethos to adjust itself to any design situation. Plus, it boasts a few OpenType features, such as small caps and ligatures.

18. Voga


Screenshot of the Voga header.

Voga is a sexy (yes, we stand by our choice of words) and elegant Didone typeface. With its high and sleek letters, it wouldn’t look out of place in a fashion magazine or blog.

19. Meticulous Ariel


Screenshot of the Meticulous Ariel header.

Since we’re already on a fashion kick, let’s take a look at Meticulous Ariel. While not as sleek as Voga, Meticulous Ariel does have a definite high-end feel, thanks to its classic European touches and strong types.

20. Recia


Screenshot of the Recia header.

Recia is a serif font with five styles, designed by Carlos del Toro for use in print and display. It boasts noticeable x-heights, the type is slightly condensed, and it is very readable across all of its styles.

21. Henry


Example of the Henry font.

Henry is a serif font with classic, pleasing proportions, designed by Matthieu Cortat. It has a high cap-height, strong, angular serifs, and is perfect for print work or eBooks.

22. Stuart


Example of the Stuart font.

Stuart is yet another font by Matthieu Cortat. This one featuring softer strokes and a nice balance between the x-height and cap-height, making it well-suited for various kinds of designs.

23. Andada


Example of the Andada font.

Andada is a slab serif font with a solid feel to it, and a medium stroke contrast. It was the recipient of an award at the Ibero-America Design Biennial and was originally designed by Carolina Giovagnoli.

24. Borgia Pro


Example of the Borgia Pro font.

Borgia Pro is an eight-font serif family that looks great in high-density designs, such as printed works. Its letters have a softness to them which makes them pleasing to the eye – partly due to the thinness of their bowls.

25. Calluna


Example of the Calluna font.

Funnily enough, Calluna was created partly by accident. Its author was fooling around while taking a break from working on a different font, decided to fool around with a full-slab serif design instead, and thus Calluna was born.

26. Lora


Example of the Lora font.

Lora is a modern serif with calligraphic roots and enough contrast to make it a good pick for designs that involve lots of text. Despite working well in print, it was originally designed with digital displays in mind.

27. Roboto Slab


Example of the Roboto Slab font.

Roboto Slab is a font with lots of character. Its design consists mainly of geometric shapes, giving it a mechanical look that somehow still manages to remain friendly. It’s perfect if you’re trying to achieve a somewhat technical look while still retaining a friendly feel.

28. Merriweather


Example of the Merriweather font.

Merriweather is a serif font designed by Eben Sorkin. This typeface features ample x-heights, condensed letters, and sturdy serifs – making it a good choice for designs that need to be highly readable.

29. Arvo


Example of the Arvo font.

Arvo is a geometric slab serif typeface that includes four different weights. Its tails feature a strong slant, which alongside its bracketed serifs, will lend an air of sturdiness to your designs.

30. Vollkorn


Example of the Vollkorn font.

Vollkorn was the first typeface that Friedrich Althausen ever designed, and it still remains in use after 11 odd years. According to Althausen, he designed the font to be a modest, solid text face for everyday use in both print and web projects.

Conclusion

While a good font alone won’t turn your design projects into masterpieces, it certainly can help you catch (and keep!) the eye of your viewers. Choosing a font with readability in mind is especially crucial for those scenarios where you know there will be a lot of reading involved, since they’re particularly easy on the eyes.

These serif fonts should pretty much cover any kind of project you might consider, but don’t just take our word for it – feel free to look around and see what else is out there before tying the knot with any particular font.

How do you choose whether to implement a serif or a sans serif font into your designs? Subscribe to the comments section below and share your process with us!

Article thumbnail image by Neuevector / shutterstock.com


LEAVE A REPLY

Please enter your comment!
Please enter your name here