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
One for the history lovers, Baskerville was designed by John Baskerville in the 1750s. It’s a solid, popular serif font, promising readability and character.
Cambria
Cambria was designed specifically to be read onscreen. Its spacing and proportions are particularly even, so it’d be a great option for text-heavy sites like a blog.
Courier
It feels like it shot straight out of a typewriter and into your computer, Courier brings a retro style and readability to your copy.
Didot
You may recognise this one from the Vogue title font emblazoning their magazine covers. Didot is curvy, stylish and harking back to the late 1700s; it’s timeless.
Garamond
Perhaps the most unusual out of this bunch of web safe fonts with serifs, Garamond is a favorite for designers. Be aware that this font works best in print—it’s great for text-heavy designs as it’s proportions are so easy on the eyes.
Times New Roman
Ever-serious, always direct, Times New Roman works really well with factual, formal content such as academic text or a law firm’s font of choice for text bodies.
The best web fonts with serifs:
Apparel
Apparel feels like it belongs in a coffee table magazine to me, it’s so styled and minimal. It would suit branded copy of a similar aesthetic, so perhaps if you’re launching a fashion or interiors brand, this could work brilliantly in your style guide.
This one is a gorgeous title font, it works well with a minimal aesthetic and high quality or luxury product. It could work introducing recipes in a new cooking book, on the website for an upmarket salon or introducing your latest photoshoot in an online portfolio.
Bogart
Bogart is a smooth, nostalgic and innovative title font that was designed in 2020. It’d pack a punch of personality to connect with audiences in product packaging designs or book covers.
Giveny
Read between the letters: the spacing of a Giveny font is to be appreciated. Together with the simplistic structures of its letter, Giveny boasts accessibility and would do well for designs with short, impactful copy such as posters, banners or business cards.
Juana
Juana contrasts thick and thin strokes, curves and edges. It feels hypnotic to look at and would distinguish brands from competitors across logo designs, magazine editorials and landing pages.
Maiah
Another versatile number, the charming Maiah could work across mediums for the right brand. It works well with a minimal aesthetic and a top quality product or service.
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
Arial, in my opinion, is a cool, no frills sans serif web safe font. It’s versatile across industries and offers great readability, after being designed primarily for digital use.
Calibri
Informal, simple and pleasant, Calibri feels almost conversational. A great choice if you want to really connect with your reader on a friendly level.
Dejavu Sans
Casual and easy to read, Dejavu Sans shines with lighthearted copy. It also can make technical content more accessible, so it could be good if you’re a consumer-facing finance brand.
Geneva
Geneva is known for following the Grotesque style. It’s slightly narrow and a favorite for big brands like Facebook and Apple (the company from which it originated).
Helvetica
Helvetica is renowned for legibility. Some think it to be the most popular contemporary font, it’s long been regarded as “safe” for reflecting long, dense amounts of copy.
The best sans serif web fonts:
Devant Pro
Devant Pro is almost spilling over in character. It feels like it just hopped out of a film poster from the 60s—strong option for contemporary brands wishing to develop their own style.
Grafton
Another expression of the Grotesque movement—Grafton is a friendly, informal and a great contender to complement a text-heavy design in header position.
IBM Plex Sans
IBM Plex Sans was designed to represent the relationship between machine and mankind. The result is arbitrary but friendly—use to give your brand a more humanistic feeling.
Italico
Italico screams contemporary, minimal and eco-friendly product packaging to me. It’s charismatic, original and begs consumer trust.
Monolith
A major point about Monolith is that it has full multilingual capacities. It has a light and a regular version and it’s pretty cool, if you ask me.
TT Norms Pro
TT Norms Pro is a high flyer amongst the geometric fonts. It’s simplicity and legibility means that it’s pretty universal to different mediums and copy types.
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 is pretty fussy for text bodies, but it adds a personal touch to any short headline or title.
Brush Script M7
Brush Script M7 brings to my mind stationary and bumper stickers. It’s exuberant, creative and adds a personal touch to your brand identity.
Copperplate
Copperplate is known for working well with stationary products and brands; it adds a touch of quirky character to understated designs.
Luminari
Sublimely Gothic, Luminari lights up any page it graces. Medieval, magnetic and niche.
Monaco
A favorite for coding, Monaco goes hand in hand with dark mode. Great for referencing gaming or tech subcultures in work.
The best decorative web fonts:
Admara
A digital alternative to handwriting, Admara adds intimacy but it isn’t the most accessible. It’s actually only permitted for personal use, so it won’t be appropriate for commercial materials.
Danielle Signature
Danielle Signature is elegant, personal and fragrant. It would be a great logo option for an independent retail brand.
Hypologic
Whenever I see any text in Hypologic, I imagine it lit up in neon. It’s versatile, contemporary and aching to add edge to signs and wall displays.
Warton
With lengthy curves and a delicate stroke, Warton feels romantic. Would do well on wedding invitations or in titles or logos for small businesses with a very specific audience.
Wonder Night
Kooky, unconventional and fun! Wonder night is brilliant for brands targeting younger audiences, perhaps where text bodies are short. It could be a great tool to liven up educational copy!
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?
