The 6 Best Fonts for Websites That Always Look Great

There are limitless fonts to select from if you’re designing a web site, however they’re not all fitted to web site use. Take note of these 5 core traits of a superb web site font: 

• Legibility: Simple to learn at varied sizes, types, and weights, in addition to on several types of screens.
• Internet-Secure/Suitable: Renders (hundreds and seems) persistently throughout all main internet browsers, which means it’s extensively supported and received’t set off fallback fonts to kick in.
• Clear and Easy Design: Avoids overly fancy prospers that make the content material distracting or arduous to learn. 
• Good Scalability: Appears to be like good at small sizes (for physique textual content) and huge sizes (for headings).
• Constant Fashion: Matches your web site’s tone and branding, and isn’t more likely to exit of fashion shortly.

No time to go looking by means of the tens of 1000’s of fonts obtainable within the ether? Listed here are the 6 finest web site fonts to select on your web design. 

1. Arial

Arial is a sans-serif font, and it’s completely in every single place. It’s one of many core system fonts on Home windows, macOS, and Linux distributions. 

This implies it doesn’t matter what gadget your consumer is on, Arial might be put in. 

In different phrases, Arial is a web-safe font. You possibly can depend upon it to indicate up the best way it’s purported to with out forcing the consumer’s browser to load it from an exterior supply like Google Fonts. 

It’s additionally plain, clear, and simple to learn. That’s why it’s my decide for drafting articles as a contract author. 

As I draft this piece for Loopy Egg, I’m writing it in Arial. 

Arial doesn’t get in the best way of my ideas and writing course of. It’s a wonderful, clean canvas that enables the phrases and their which means to get all the eye. 

This plain, canvas-like nature has earned Arial a spot as a typical fallback font in CSS stacks—the code that tells the browser which fonts to make use of if the first font doesn’t work.

Arial seems to be nice when it’s utilized in physique textual content and header textual content. It’s been round since Robin Nicholas and Patricia Saunders created it in 1982. 

It’s been in type ever since, and that received’t change anytime quickly. 

Use Arial for:

• Company or skilled web sites, like metropolis web sites, public service portals, and authorized or monetary companies.
• Electronic mail newsletters (not precisely a web site, however associated).
• Inline/physique textual content.
• Older websites.
• Legacy/older intranet websites (inside firm pages, databases, dashboards, and ticketing techniques).

The best way to get Arial: 

• Arial is straightforward to make use of as a result of it’s already pre-installed on nearly each desktop and cellular OS, together with Home windows, macOS, iOS, and Android. You don’t want any particular license to apply it to your web site so long as you’re referencing it as a system font, not embedding it. You possibly can’t embed the precise font file until you purchase a legitimate license from Monotype. However because it’s so ubiquitous, Arial embedding isn’t one thing most folk want.

2. Inter

Designed in 2017 by software program designer Rasmus Andersson, Inter is a computer-friendly font household with 18 types, a few of which you’ll see within the screenshot above. 

Andersson particularly designed this sans-serif font for studying on a display. The font design is extremely legible throughout every type, weights, and sizes, which makes it a simple selection for web sites. 

It additionally scales effectively, gives a nuanced vary of seems to be inside its 18 types, and matches quite a lot of use instances. Use it for headers, physique textual content, and the whole lot in between.

Whether or not your readers are viewing your web site on a low- or high-resolution show, they’ll be capable of shortly soak up the content material of textual content rendered in Inter. 

Due to this, Inter is especially helpful for content-heavy or colorfully designed websites. 

Use Inter for:  

• Blogs, since they’ve plenty of textual content for readers to soak up.
• On-line journals or newspapers.
• Academic platforms that provide programs, wikis, or tutorials.
• Data bases and assist facilities.

The best way to get Inter: 

• Inter is open-source and licensed underneath the SIL Open Font License. This implies anybody can use, modify, and embed it in each industrial and private initiatives with out paying any charges. Obtain the font from Google Fonts or GitHub.

3. Playfair Show

Playfair Display is a font for these moments if you’re feeling just a little bit fancy. I’d use it in headers or buttons as a pleasant distinction to a extra buttoned-up sans-serif font like Inter or Arial.

As a result of it’s extra of a chic, flourishy font, I don’t suggest utilizing it in small physique textual content. Particularly not on content-heavy web sites or webpages. 

As timelessly modern as it’s, Playfair Show could be arduous to learn at smaller sizes.

Created by designer Claus Eggers Sørensen in 2011, Playfair Show dances on the intersection of old-style and trendy serif fonts. It’s heat and fancy, like older serif fonts, however nonetheless legible—with little of the chilly formality present in trendy serif fonts like Bodoni Moda.

With 12 types, Playfair Show is absolutely supported on all trendy browsers and working techniques. This implies it’s unlikely to unexpectedly set off fallback fonts. 

Use Playfair Show for: 

• Weblog or journal websites, particularly for headers or “fancy” content material.
• Personal websites or portfolios, the place the font provides knowledgeable really feel to names, hero textual content, and web page titles.
• Luxurious manufacturers or retailers, to explain issues like elegant new purses, perfumes, or clothes. Be happy to make use of it in product descriptions so long as these descriptions are quick. 

The best way to get Playfair Show:

• Playfair Show is an open-source font licensed for each private and industrial use underneath the SIL Open Font License. Obtain it from GitHub or Google Fonts. 

4. Open Sans

Open Sans is the kind of sans serif font that’s so stylish it makes you assume it does have serifs at first look. Or at the least, that’s the way it reads for me. 

Designed for screens by typeface designer Steve Matteson and launched in 2011, the font has 6 weights and 6 corresponding italics for a complete of 12 types.

If you need a font that virtually seems to be prefer it has serifs however is tremendous straightforward to learn in any respect sizes, Open Sans is your typeface. It gives your webpage a clear consumer interface (UI) that doesn’t distract from the content material. 

You possibly can pair it with serif fonts or sans-serif fonts, making it much more versatile. Because it feels elegant but trendy, you may relaxation assured that Open Sans is right here to remain and received’t exit of fashion in a flash (taking a look at you, Comedian Sans).

Open Sans is absolutely supported throughout all trendy working techniques and internet browsers, so it’s not more likely to set off fallback fonts. 

Use Open Sans for: 

• Company or enterprise web sites that want a glance that’s clear, skilled, and simple to learn.
• Tech or SaaS platforms, the place it’s perfect for dashboards, UIs, and app content material.
• Academic or nonprofit websites, as a result of it’s pleasant and personable with out being too flashy.
• Blogs and long-form content material, due to its robust legibility in physique textual content. 

The best way to get Open Sans: 

• Open Sans is an open-source font licensed underneath the SIL Open Font License (publish 2021) for each industrial and private use. Obtain it from GitHub or Google Fonts. 

5. Merriweather 

Merriweather is ideal for anybody who desires a serif font that isn’t too frilly and fancy. It’s just a little extra toned down than its fellow serif pal, Playfair Show, however nonetheless extra ornamental than a sans-serif font. 

Like Playfair Show, Merriweather was designed for screens. However not like Playfair Show, Merriweather is reader-friendly in any respect sizes. So if you would like a fairly serif font for physique textual content in your web site, Merriweather is a wonderful selection. 

Plus, the typography right here is barely condensed however with robust typographic contrasts that make it straightforward to soak up. If you wish to match a variety of info right into a web page, Merriweather might help you do exactly that—all with out making the webpage look cluttered. 

Merriweather comes with 14 complete types as of this writing—on Google Fonts, that’s. Designed by sort engineer Eben Sorkin, it’s each conventional and timeless. 

That is precisely what Sorkin was going for. In a 2011 blog post, Sorkin writes, “I wished to make one thing as legible and nice to learn as doable which meant adapting the design to screens and to as many internet browsers and working sytems as doable.”

(Aspect be aware: Merriweather is, certainly, obtainable on most working techniques and internet browsers.)

Sorkin provides, “I used to be additionally eager so as to add one thing genuinely new to the types we learn on a regular basis [sic] on screens…I made a decision to evoke the acquainted feeling of previous e-book sort.”

And that’s precisely what he did. If you wish to dig into how Sorkin created Merriweather, learn the entire weblog publish. I’m not a typography nerd. Or at the least, I wasn’t—till I learn the entire publish.

It’s fascinating to see the extent of element and quantity of labor that goes into making a font household.

Use Merriweather for: 

• Information and editorial websites—there’s a readable but lovely really feel on this font that’s good for weblog posts and articles.
• Academic platforms and college web sites, since Merriweather offers off knowledgeable but reliable vibe.
• Nonprofits, the place Merriweather’s heat and readability assist get vital messages throughout to the fitting individuals.
• Literary websites, as a result of whereas Merriweather was designed solely for digital use, it has a print-book really feel.

The best way to get Merriweather:

6. Poppins 

Poppins is a clear, sans-serif font that renders fantastically in plenty of totally different languages. It’s a contemporary internationalist font—so long as you’re working with Latin-based languages, anyway. 

Whereas Poppins helps all kinds of Latin-based languages with prolonged character units, it doesn’t assist non-Latin scripts like Cyrillic, Greek, Mandarin, or Arabic.

Nevertheless it does assist languages like Polish, Vietnamese, Turkish, and Romanian. Not solely that, however Poppins makes these languages look good on a display. 

In case your audience reads in a non-English, Latin-based language, Poppins is your go-to for easy-to-read textual content in any of them.

(And naturally, it’s additionally straightforward to learn in English.)

Jonny Pinhorn and Ninad Kale developed Poppins, and it was launched in 2015. On Google Fonts, Poppins is available in 18 types and works on all main internet browsers and working techniques. 

Poppins is trendy and trendy with out being too chilly. Due to that, I’m betting it’ll keep popular in website design for many years to come back.

Use Poppins for:

• Tech and startup web sites, due to its clear and trendy look.
• Dashboards and UIs, as its geometric construction is straightforward to learn at small and huge sizes alike.
• Advertising and marketing/artistic companies, because it’s trendy however not stuffy.
• E-commerce model web sites, the place Poppins will make your product names, costs, and descriptions pop with out overwhelming the reader.

The best way to get Poppins: 

• Poppins is licensed underneath the SIL Open Font License, so it’s free to make use of for no matter you need. Obtain it from Google Fonts or GitHub.