Serif vs sans serif: picking the right one for your web design

When it comes to your website, a good font has a huge influence on your user experience. Not only does it affect the readability of your content, it can also set the tone and theme for your site and establish the feeling visitors associate with your site and brand.

One of the biggest factors in how a typeface is perceived is if it is serif or sans serif. Each has their own unique characteristics, which can significantly impact how readers perceive them.

Let’s explore the differences between these two categories, their advantages and disadvantages, and how you can use either of them in your next project. 

What is a serif typeface?

A serif font is a typeface with small lines or “feet” that extend off of the letters.

These lines are called serifs; giving it the name serif font. Serif fonts have been used for centuries and are often associated with traditional typography. Until the 19th century, all books were set in serif type.

Popular serif fonts 

Times New Roman is perhaps the most notable serif typeface of the late 90s and early 2000s. It first appeared in 1932 in The Times of London newspaper because it allowed more letters in a narrow newspaper column without sacrificing readability. 

Decades after showing up in print, Times New Roman made its mark on the early internet.Given that Microsoft often used Times New Roman as the default typeface for Office, Times New Roman could be found everywhere — in Word documents, on websites, in advertising, and more.  

Some other notable serif fonts include Didot, Bodoni, Georgia, and Garamond.

Pros of serif fonts 

• Nostalgic, yet unique: Different typefaces evoke different emotions in the reader. Serif fonts have a classic look, making them a popular choice for more formal or official designs. Serif fonts can also make brands feel nostalgic because of the popularity of serifs in the past. 

Cons of serif fonts

• Easier readability in print, but harder to read on small screens: Serif fonts are easier to read in printed materials such as books, newspapers, and magazines because serifs guide the reader's eye along the line of text. However on small screens, serifs are harder to read, especially if they have low resolution. Oftentimes, small screens can make serif fonts appear jagged and blurry.

What is a sans serif typeface?

Naturally, a sans-serif font is a typeface that doesn't have serifs in the typeface. The “sans” in the  term "sans-serif" is a French word that means "without." Typically, sans serif faces have lower stroke contrast (the difference between the thick and thin parts of a letterform’s stroke) than serifs.

Popular sans serif fonts 

The first known use of a sans serif typeface was in 1816. The typeface used was created by typefounder William Caslon IV and was named "Grotesque." Some examples of modern sans-serif fonts include Arial, Helvetica, Futura, and Calibri.

Pros of sans serif fonts 

• Easy to read on screens: Sans serif fonts are easier to read on device screens, including low-resolution screens, because they have a clean and simple design.
• Minimalist and clean look: The absence of serifs makes sans serif fonts a popular choice for designers who want to create a clean and modern look in a user interface. 

Cons of sans serif fonts 

• Can appear generic: Due to the minimalistic nature of sans serif fonts, some can appear bland in certain designs and lack uniqueness and character.   

Choosing serif or sans serif for your project

The choice between serif and sans serif fonts depends on many factors, such as what you’re going to use it for, and how. 

As we mentioned above, serif fonts are commonly used for printed materials such as books, newspapers, and magazines because the serifs help guide readers’ eyes. This is especially valuable for long passages of text in articles or books, but serifs aren’t always the best choice for certain aspects of web design. 

This isn’t to say you can’t use serifs on websites — just to be mindful of things like placement, size, kerning, and spacing in order to make it legible for your users. Modern brands like One Medical, Spindrift, Great Jones, and Chobani have used serif fonts prominently in their headers and logos in order to set themselves apart in their respective spaces. 

Compared to serif fonts, sans serif fonts are often considered more modern and informal in style, making them a good choice for digital products such as websites and mobile apps. Tech companies often use sans serif fonts for body text when creating digital products because sans serif fonts make brands or products appear new and innovative. 

It’s worth noting that these are not strict rules. Designers can choose their fonts based on their own styles and use cases. In fact, many designers choose font pairings that include both serif and sans serif typefaces throughout their web designs. Just be sure to test your designs on various devices to ensure your font choices remain legible across screen sizes. 

Use serif, sans serif, or both in your next design

The best thing about design is it’s what you make of it. Whether you go all-in on serif, san serif, or both make sure that it complements your design and the story you want to tell. 

Want to show us what you’ve created? Be sure to submit to Made in Webflow to feature your latest project to us and the Webflow community.