Hello! We’re John and Brian, and we’ve been designing websites from our office in Preston, Lancashire since 2009. Choosing the right typography is an important part of planning a website. Your fonts have a big impact on its style and personality, but they also need to be practical and easy to read. Serif and sans-serif fonts are the two main styles used on websites. So what’s the difference, what are the advantages of sans-serif typography, and which should you choose? Here’s our guide.

What are serif and sans-serif fonts?

Serif fonts have small strokes, called serifs, at the ends of the main lines of each letter. Think of Times New Roman or Georgia. They often feel traditional, established and editorial.

Sans-serif fonts don’t have those strokes (“sans” means “without”). Their letters are cleaner and plainer, without flourishes or flicks. Arial, Helvetica, Verdana, Roboto and Inter are all sans-serif fonts. They tend to feel modern, clean and straightforward.

	Serif	Sans-serif
What it looks like	Small strokes at the ends of letters	Clean letters without strokes
Examples	Times New Roman, Georgia, Merriweather	Arial, Helvetica, Verdana, Roboto, Inter
Typical feel	Traditional, elegant, editorial	Modern, clean, friendly
Common uses on websites	Headings, long articles, premium brands	Body text, menus, buttons, forms

What are the advantages of sans-serif typography in web design?

Sans-serif fonts are the most common choice for websites, and for good reasons:

Easy to read on any device. Without serifs, letters stay clear at all sizes, from small captions to large headings. That works especially well on phone screens, where each letter has less space. Text that’s easy to read, skim and scan improves the experience for your visitors.
Room to be unique. Sans-serif fonts are known for their simplicity, but they’re far from identical. There are thousands to choose from, and a carefully chosen, less common one can give your website a distinctive look that supports your brand.
Timeless. A good sans-serif font can stay understated, stylish and current for years, so you’re unlikely to need to change it just to keep up with fashion.
Effective for headings too. You might be tempted to use a serif font for headings, for more character, but bold or geometric sans-serif fonts can make striking headings in their own right.

When does a serif font work better?

Today’s high-resolution screens display serif fonts much more clearly than older screens did, so serifs are a perfectly good option for websites. They work well for:

Headings that need a classic, elegant or premium feel
Long-form articles, where a well-designed serif can feel like reading a book or magazine
Brands that want to come across as established, traditional or luxurious

In practice, many websites use both: a serif for headings and a sans-serif for body text, or the other way round.

Tips for pairing and using fonts

Stick to one or two font families. More than that can look messy and slow your website down.
Use weights for variety. One family in regular, medium and bold weights can give you plenty of contrast on its own.
Size body text at 16px or more, with a line height of around 1.5.
Keep lines a comfortable length, roughly 50 to 75 characters.
Avoid long passages in capitals or italics, which are harder to read.
Check contrast, so text stands out clearly from its background.
Match your brand. Your website fonts should work alongside the typography in your logo and printed materials.

Font pairing ideas

If you’d like to combine a serif and a sans-serif, these free Google Fonts pairings are good places to start:

Playfair Display with Source Sans 3: an elegant serif for headings with a clean, practical sans-serif for body text.
Merriweather with Open Sans: a sturdy, very readable serif with a friendly sans-serif.
Lora with Inter: a soft, modern serif with a crisp sans-serif designed for screens.

Or keep it simple with one sans-serif family in two or three weights. It’s often the cleanest option for a small business website.

Fonts and website speed

Web fonts are files that visitors’ browsers have to download, so they can affect how quickly your website loads. Only load the fonts and weights you actually use, use the compact WOFF2 format, and consider hosting font files on your own website. Setting font-display means text appears straight away in a backup font while the web font loads, rather than staying invisible.

Script, outline and other display fonts

Alongside your main serif or sans-serif fonts, you might want something with more personality for a heading or a short slogan. These display styles can look great, as long as they’re used sparingly:

Script and handwriting fonts look like calligraphy or handwriting and can add a personal touch to your brand. Bolder, simpler scripts with separate letters and a little extra spacing are much easier to read, especially on phones.
Outline and transparent text shows only the edges of the letters, or lets the background show through them. It can make a striking large heading, but it becomes hard to read at small sizes or over a busy image, so keep it big and check the contrast.
Large text can be a design feature in its own right. A big, bold headline grabs attention and is easy to read on any screen.
Minimalist fonts, with clean letter shapes and generous spacing, suit simple, modern designs and stay readable at most sizes.

Whichever style you choose, keep decorative fonts for headings and use a clear, simple font for body text, menus, buttons and forms. Make sure headings are real text rather than images of text, so screen readers and search engines can read them.

Serif and sans-serif font FAQs

Is Arial a serif or sans-serif font?

Arial is a sans-serif font. Times New Roman is a serif font.

Which is easier to read on screen, serif or sans-serif?

On modern screens, both can be very readable when they’re well designed and used at a good size. Sans-serif fonts are the safer choice for small text, menus and buttons.

Which fonts are best for accessibility?

Clear, simple fonts with distinct letter shapes, used at a good size with strong contrast and generous spacing. Many organisations, including dyslexia charities, recommend sans-serif fonts such as Arial or Verdana for body text.

Can I use any font on my website?

Only if its licence allows it. Many fonts, including those in Google Fonts, are free to use on websites, while others need a web licence.

Want help with your website’s typography?

Typography is a big part of your brand and your website. If you’d like a hand choosing fonts or designing a new website, give John and Brian a call on 01772 822626 or get in touch online. You’re welcome to pop into our Preston office for a coffee too.

Serif vs sans-serif fonts: which should you use on your website?