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

Sample of Baskerville font

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

Sample of Cambria font

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

Sample of Didot font

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

Sample of Garamond font

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

Sample of Times New Roman font

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

Sample of Apparel font
By Latinotype. Download it here.

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.

Sample of Argesta font
By atipo foundry. Download it here.

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

Font sample for Bogart
By Zetafonts. Download it here.

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

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

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

 

Font sample for Juana
By Latinotype. Download it here.

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

Font sample for Maiah
By Creativetacos. Download it here.

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

Font sample for 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

Font sample for 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

Font sample for 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

Font sample for 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

Font sample for 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

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

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

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

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

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

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

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

Italico screams contemporary, minimal and eco-friendly product packaging to me. It’s charismatic, original and begs consumer trust.

Monolith

Font sample for Monolith
By Unio. Download it here.

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

Sample font for TT Norms Pro.
By TypeType. Download it here.

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 font

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 MT font

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 font

Copperplate is known for working well with stationary products and brands; it adds a touch of quirky character to understated designs.

Luminari

Luminari font

Sublimely Gothic, Luminari lights up any page it graces. Medieval, magnetic and niche.

Monaco

Monaco font

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

Font sample for Admara
By Faras. Download it here.

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

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

Danielle Signature is elegant, personal and fragrant. It would be a great logo option for an independent retail brand.

Hypologic

Font sample for Hypologic
By Kreafolk. Download it here.

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

Font sample for Warton
By Serdaribut. Download it here.

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

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

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?

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