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.
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”).
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
Cambria
Courier
Didot
Garamond
Times New Roman
The best web fonts with serifs:
Apparel
Bogart
Giveny
Juana
Maiah
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
Calibri
Dejavu Sans
Geneva
Helvetica
The best sans serif web fonts:
Devant Pro
Grafton
IBM Plex Sans
Italico
Monolith
TT Norms Pro
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
Brush Script M7
Copperplate
Luminari
Monaco
The best decorative web fonts:
Admara
Danielle Signature
Hypologic
Warton
Wonder Night
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?
