30 Incredibly Readable Serif Fonts for Your Next Web Design Project

Posted on April 9, 2016 by in Resources | 39 comments

30 Incredibly Readable Serif Fonts for Your Next Web Design Project

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 , 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 :

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.

The history of 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.

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.

As you can see, 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.

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 library (so you know it’s got to be good), and it’s fully free.

5.

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

6.

While 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.

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.

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

9.

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

10.

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.

Yet another slab serif font, although 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.

Screenshot of the Bandera header.

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.

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.

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.

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.

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.

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 features, such as small caps and ligatures.

18.

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

19.

Since we’re already on a fashion kick, let’s take a look at . 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.

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.

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.

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.

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 and was originally designed by Carolina Giovagnoli.

24.

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.

Funnily enough, 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.

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.

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.

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.

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.

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

39 Comments

  1. Valuable post. I love the plug-in Use Any Font. It will make the use of fonts so easy. I recently used typeface Bree, a serif font which is very good readable.

    • I looked at the plugin and read the comments as recently as a couple months ago that this plugin is in violation of the WordPress rules in that it requires payment to use the plugin for more than one font. Since you appear to use the plugin, did you have to pay to use it (whether called a payment, donation, contribution, upgrade, pro, etc.) or is it actually “fully free to use” as the above post reads?

      • Tom Ewer

        I wouldn’t say it contravenes the terms per se, Philip, as it does offer limited free use. Other plugins have similar tiered payment options, so it’s up to you to decide if the terms are right for you. Thanks for your comment!

    • Tom Ewer

      Thanks Walter!

  2. So many serif (and sans) seem so same-same. This a nice, varied list of interesting fonts, kind of refreshing after a season of overdone curly-Q calligraphy fonts.

    • Tom Ewer

      Thanks for your comment, Kathy!

  3. Wonderful post, as usual. I really appreciate these showing up in my inbox every day.

    This post was great for font geeks like me.

    I was surprised, thought, that you didn’t have Alegreya on your list. It’s from a world-class foundry and part of it is free on Google.

    • Tom Ewer

      There’s always one that doesn’t make it, Steve. 🙂 Thanks for your comment!

  4. Fonts, fonts, fonts…. it used to be simple in the old days – either Arial or Georgia (Times Roman, etc). Google fonts make it easy to jazz up your site with something different, but try going through 800 fonts to find that perfect font! Finding fonts and finding images can take up most of the design time!

    Thanks for this post. I like seeing different fonts. I also appreciate the mention of Use Any Font. I’m working on a client site now where they want to use a specific font – not a Google Font. I’ve done this before but would have to Google how to do it again – my retention is very low. 🙂 I’ll give Use Any Font a try.

    I find the biggest hindrance to readability is using too small font size, too tight of line spacing, and too long of lines. Also, using too light of font color – light grey on white background for example.

    Thanks for this post!

    • Tom Ewer

      Thanks for the comment, Bob! It seems like you know what you want, which is half the battle. 🙂 Google Fonts also has a nice search feature (as you’d expect) – it helps to narrow down the choices somewhat!

  5. I hate to be a total troll but as a lifetime account member, I must point out that a significant number of EE’s blog posts are dubious, misleading, or lacking in depth. This blog post falls into the misleading category.

    My takeaway is “use one of these serif fonts and your website will be more readable.” Without novices having some basic understanding of typography, I can envision a landfall of Divi sites with body text set in Fritz, Voga, and Cinzel.

    Readability and legibility are different characteristics. What makes serif fonts “generally” more readable is the serifs create a baseline for the reader’s eyes. This applies to large blocks of text, such as in a novel. Sans-serif fonts are “generally” more legible because each individual letterform is more discernable – the exception being I,l, and 1 which require the addition of a serif to keep them straight. Further, issues of pixel density and dot gain (in print) complicate font choices.

    So while it is fun to see a list of pretty fonts, I just think it is irresponsible to suggest they will improve readability and legibility.

    • Richard, sounds like you are very knowledgeable in this topic. It would be great if you perhaps offered some suggestions for some of the more novice website designers so they can learn how to become better “graphic” designers. It’s very easy to “troll” as you called it!!! Offer some suggestions and contribute 🙂

      Realize that someone took the time to research and write this article in an effort to contribute!

      Cheers!!!!

      • Exactly Steven. Add to that, the ‘novices’ have access to a wealth of information just with Carpetcleaninghaddontownship archives not to mention elsewhere on the net and most have the hunger and drive to find answers and learn quickly. Trolls like to bash but rarely offer constructive information. Great article, as usual.

        • My “suggestion” woulld be, if in doubt, use a simple sans-serif font for body text and restrict the use of serif fonts for headlines.

          That said, if you want a readable serif font for all uses, Droid serif is excellent. It also is available in a sans-serif version.

          • Thank you for contributing Richard. I’ve heard from different sources that Tahoma is a good Font for text. What are your thoughts on that?

            • Tahoma is sans-serif. Not the subject of the article but a good font nonetheless.

              If you are looking for “readable” serif fonts, “A List Apart” is one of the predominate authorities on usability and they use Georgia. The “Medium” blogging platform is known for great typography. They have a history of refining their font choices but currently use Charter for body text. What is unique about the platform is everybody uses the same font sets, so everything is very consistent.

              From the list above, I’ve used Robota Slab in projects but it was a compromise choice. It has a very high x-height, so while it is clear on screen, it is rather distorted.

              Finally, I still must hark back to my original points: (1) it is irresponsible to characterize this article as about “readable serif fonts” and (2) EE is too focused on once-a-day blog distribution rather than original, quality content that brings value (i.e., the motherload of the Google algorithm).

  6. Thank you for the article. Could you do a follow up post on fonts that pair well with each of these fonts?

  7. This is first time I notice very good collection of Serif fonts. It was in 2010, I mostly prefer serif fonts rather than arial or times new roman. And now Google fonts, mostly Open Sans. I am still fan of Serif. Thanks for very good collection and will soon try it.

  8. I agree. Typography is a crucial element in web design. Your Typography should stand out without compromising readability.

    • Tom Ewer

      Thanks for your comment! Fortunately, we have so much choice nowadays for something so crucial!

  9. I like Lora too, and FF Tisa.. They are easy to read in all sizes, work well in many places and feel balanced. Brandon Grotesque and Montserrat work well with them!

    • Tom Ewer

      Everyone has their favorites – that’s what’s so great about having choice!

  10. Thank you for this post and for introducing FREE fonts.
    I run in some other posts here introducing nice but (imho) way too expensive for a website project for just titles or H1

    Thanks!

  11. Hi Tom,

    One question please, can we use Cyrillic letters with those fonts?

    Thanks,
    Igor

    • Tom Ewer

      I’m sorry Igor, I don’t have an answer for you. The best suggestion is to either browse each developers’ website, or them directly. Good luck!

  12. So often lists of fonts include many that are ugly or amateur. This list is a pleasant change. Some really attractive fonts here. Thanks!

  13. Just in the process of redesigning a website. This is very helpful.

    • Tom Ewer

      You’re welcome! Good luck with the redesign!

    • Tom Ewer

      Glad you’ve found ‘the one’, Datsun. 😀 Thanks for your comment!

  14. I loved the typography resource that you provide. I was recently researching and with lots of information, I found that serifs fonts have made a comeback to the font battle but still they are not as preferrable as body text.

    Since this article is about serifs, I would love to know your opinion about using frieght text pro as copyblogger uses it?

    Personally, I love lora from the list. 🙂

    • Tom Ewer

      Hello Swadhin! Freight Text Pro is certainly a good example of a legible serif, so they are definitely out there – as this article proves. 🙂 Thanks for your comment!

      • You’re most welcome Tom. Thanks for replying!

576,027 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today
Электронный микроскоп купить читать на сайте.
learn more

http://www.best-cooler.reviews/

Pin It on Pinterest