I love the use of serif fonts in web design, they have a level of detail and complexity that isn’t present in their sans counterpart. The extenders or strokes at the end points of each letter are believed to date back to the Roman Empire who would chisel the serifs into lettering to remove imperfections in the type. Whether this is true, there is decadence to serifs, a gothic and certainly more classic feel. Choosing to use a serif typeface for a project can be tricky, how do you maintain a modern and clean look while using a font style that dates back 1,000’s of years? Fortunately there’s lot’s of great modern serif fonts that retain a look of quality and class while complementing your state of the art design.
In the wild
Medium the public blogging site uses Freight Text Pro for it’s body and the result is a beautiful reading experience. Teehan + Lax the designers worked extensively on choosing the right font and making sure that the line height was perfectly set for the reader.
Andy Shield uses serif fonts on his blog to good effect combining Chapparal Pro for the headings with Freight Text Pro for the body. The experience is both pleasing to the eye and easy to read.
The Knormal design company have chosen Copernicus as their body font and it complements the large geometric shapes of their sans-serif headings excellently.
Victor Erixon the UI designer showcases the superb FF Tisa Pro on his tumblr, an increased line-height with a larger than average font-size makes the body text extremely readable.
For as long as I have been visiting Smashing Magazine they have featured Skolar OT in their headings and article introductions. It brings a uniqueness and identity to the site that couldn’t be achieved with alternate bold, italic sans.
5 serif fonts you should try
Next time you are designing a site hook it up with a serif, the results might surprise you.
For those interested in the topic of serif vs. sans-serif readability in the case of UX, Alex Poole has written a great article debunking some commonly perceived myths and citing some interesting cases for one or the other.