After a long and gruelling search of the best web fonts and web safe fonts for your brand, you’ve finally found the perfect one: it’s Comic Sans. But alas! Comic Sans is too perfect! Your visitors will be so busy admiring the subtle beauty of Comic Sans that they won’t pay any attention to what you’re actually saying. What other fonts can make your website look amazing without stealing all the glory for themselves?

To help you find the right fonts for your website, we’ve collected all the best web fonts and the best web safe fonts for you to browse.

Web fonts vs. web safe fonts: what’s the difference?

Before we begin, let’s clear up a little terminology. What is the difference between the fonts already installed on your device and the ones you have to download? One is known a “web safe font” and the other a “web font”:

  • Web safe fonts: also known as “system fonts” or “browser fonts,” web safe fonts are the fonts installed on all devices and browsers.
  • Web fonts: although vague, web fonts refer to all fonts that are not web safe fonts, particularly commercial and independently designed fonts.

So web safe fonts are the ones that are most common, available on Windows or Mac, Chrome or Safari. Web fonts, then, would be the ones that aren’t as readily available, and typically you have to download and install them themselves.

Best web fonts
Illustration by OrangeCrush

Which one should you use in web design?

They both have their own particular advantages and disadvantages.

For web design, which is the medium under focus in this article, the main advantage of web safe fonts is that they load faster, reducing the amount of time it takes for your site to load. This isn’t a huge difference, but if you’re looking to cut out every wasted millisecond, they make a difference.

The downside of web safe fonts, though, is that they’re generic. There’s nothing unique or original about them—they’re literally available to everyone. If you want style or artistry, you’ll have to use another web font.

Web fonts feature a lot more variety; they’re a pool of fonts that’s constantly being added to and expanded on. You can get the best web fonts for your brand specifically designed based on what you’re looking for, or you can license a preexisting one online from a font hub. Their main advantage is, of course, originality. If you want a font that stands out, web safe fonts won’t cut it.

If you’re having trouble deciding, this helpful flow chart from David Gilbertson at Hackernoon (keep in mind he uses “system fonts” to mean “web safe fonts”).

Flow chart explaining when to use web fonts and when to use web safe fonts
Via Hackernoon.

What about the individual font aesthetic?

But deciding between the best web fonts and the best web safe fonts isn’t your only decision. You also have to decide what style of typography would suit your branding and function of the site. Different fonts work better for long blocks of text than for attention-grabbing headlines, to say nothing of how they influence your brand perception.

In this guide, we break them all up into three categories that are based on typeface aesthetic: serifs, sans serifs and decorative. For those who don’t know, serifs are those little tags or “flags” that sometimes appear at the ends of letters. We’ll explain the recommended usage of each below, as well as how they reflect on your brand identity.

Learn how to select the right typography for your website in our in-depth guide on choosing fonts for web design.

When to use serif fonts in web design

Serifs have a long history in typography. But if you’re looking for fonts for websites, all you need to know is this: serifs fall on the “serious” side of the spectrum. That makes them great for professional and formal brands, but a bit counterintuitive for friendly and casual brands, unless they’re customized accordingly.

Whether you’re searching for the best web font or web safe font, serifs work best for brands that want to convey authority, sophistication and class. They have a classical appeal from history, so they work well with brands that have been around for a long time—or brands that want to appear that way. The trade-off is that serif fonts can be perceived as serious, perhaps overly formal, so if you’re using one it’s got to work with your brand values to avoid alienating target audiences.

It’s also worth noting that serif fonts are good for readability, which is why they’re a common choice for body text, headings and subheadings. That’s not to say sans serif fonts are bad for readability; they work perfectly fine for long blocks of text. But there’s a reason why high-end publications like The New York Times and Boston Globe still use serif web fonts for their digital articles. And, not by coincidence, both of those newspapers lean towards “formal” and “classical” branding styles while promoting longform text.

The size and style of the serifs are crucial as well. Large and garish serifs will make your font more stylized, and in extremes appear more flamboyant and professional. Likewise, smaller and tiny serifs are less formal—ideal if you’re looking for a middle ground between “serious” and “fun.”

The best web safe fonts with serifs:

Baskerville

Font sample for Baskerville

Cambria

Font sample for Cambria

Courier

Font sample for Courier

Didot

Font sample for Didot

Garamond

Font sample for Garamond

Times New Roman

Font sample for Times New Roman

The best web fonts with serifs:

Apparel

Font sample for Apparel
By Latinotype. Download it here.
Font sample for Argesta
By atipo foundry. Download it here.

Bogart

Font sample for Bogart
By Zetafonts. Download it here.

Giveny

Font sample for Giveny
By Craft Supply Co. Download it here.

Juana

Font sample for Juana.
By Latinotype. Download it here.

Maiah

Font sample for Maiah.
By Creativetacos. Download it here.

When to use sans serif fonts in web design

Sans serif fonts are the exact opposite of serif fonts, both in form and in how they come across to the viewer. In this case sans literally means “without,” so sans serif fonts are all fonts without serifs.

As you can imagine, sans serif fonts are more casual and carefree. They don’t put on airs like serif fonts do. Sans serifs are fonts for friendly conversation and informal messages, reminiscent of simple handwriting. They’re designed for speed and simplicity, perhaps at the cost of decorum.

Sans serif fonts work best for websites who want to show their visitors, “we’re just like you”.  They’re casual and easygoing, perfect for educational material and digital publications or blogs. If you make a lot of jokes or use emojis in your writing, a sans serif font would theoretically fit best.

For that same reason, sans serif fonts are the preferred choice for informal and complementary text: image captions, social media posts, bylines, disclaimers and web advertisements. Sans serif fonts work better in text when reading is done quickly and without urgency, so it’s vital to understand how your target audience consumes the type of content you’re wanting to create before choosing whether it could be the best web font (or web safe font) for you.

The best sans serif web safe fonts:

Arial

Font sample for Arial

Calibri

Font sample for Calibri

Dejavu Sans

Font sample for Dejavu Sans

Geneva

Font sample for Geneva

Helvetica

Font sample for Helvetica

The best sans serif web fonts:

Devant Pro

Font sample for Devant Pro
By Webhance Studio. Download it here.

Grafton

Font sample for Grafton
By Zeune Type Foundry. Download it here.

IBM Plex Sans

Font sample for IBM Plex Sans
By Mike Abbink & Bold Monday. Download it here.

Italico

Font sample for Italico
By antonio filigno. Download it here.

Monolith

Font sample for Monolith
By Unio. Download it here.

TT Norms Pro

Font sample for TT Norms Pro
By TypeType. Download it here.

When to use decorative fonts in web design

Last, we have decorative fonts, which can be either serifs or sans serif fonts. They can also be the best web font or web safe font for your headers and titles. Decorative typefaces are designed lavishly; they’re meant to be artistic or stylistic, with more emphasis on how they look than what they say. While most typography is designed for function, these fonts are meant to be a spectacle.

Decorative fonts work best as highlights and accents, e.g. headlines, highlighted quotes or article titles. They’re the cherry on top of the cake, so use sparingly and for dramatic effect. They add personality, humor and creativity, just don’t overdo it. Think of it like adding salt to your cooking and avoid overwhelming your audience’s palate. This means that they won’t work for long blocks of text or image captions. Neither would they for your brand’s contact info nor the copy in your footer navigation.

Because they can fit all styles and personalities, decorative web fonts can work great in combination with simpler serif or sans serif fonts. But never sacrifice legibility for looks. Decorative fonts are only fun until the reader can’t make out what they’re supposed to be saying.

The best decorative web safe fonts:

Bradley Hand

Bradley Hand font

Brush Script M7

Brush Script MT font

Copperplate

Copperplate font

Luminari

Luminari font

Monaco

Monaco font

The best decorative web fonts:

Admara

Font sample for Admara
By Faras. Download it here.

Danielle Signature

Font sample for Danielle Signature
By Rometheme. Download it here.

Hypologic

Font sample for Hypologic
By Kreafolk. Download it here.

Warton

Font sample for Warton
By Serdaribut. Download it here.

Wonder Night

Font sample for Wonder Night
By Artefak Project. Download it here.

Or you could just use Comic Sans

Choosing a web font for your website is a big decision, shaping both how visitors use your site and how they perceive your brand. To be unique and gain authority in your web design, it’s often about finding the best web font, rather than the best web safe font. Applying the right typeface in the right places impacts which elements get seen first, and when used strategically can increase conversions, time-on-site and many other business goals.

If that decision seems too much, you can always just use Comic Sans. After all, what use have you for mortals when you can walk amongst the gods?

Need help designing your website?
Our talented community of designers is here to help.