The 10 Best Fonts Web Designers Should Be Using

There’s a lot of old, tired fonts out there that get used over, and over, and over again. You see Times New Roman, Helvetica and Arial everywhere. So, why not spruce up your web design a little? Here is a list of ten fonts that you might not have heard of, or might not have thought of using. Experiment and see where these fonts can get you!

Lato

Lato has a lot of uses, with nine different weights (plus corresponding italics), its designer intended for it to give off a feeling of warmth. It certainly does, so should be used to show a friendly, welcoming and engaging piece of design. Being easy to read, using it for body text would work just as well as for a headline. It’s smooth, rounded and looks best in large sizes.

You wouldn’t really believe that Lato was designed in 2010, as it keeps a lot of its modernity. It matches with many current fonts, as well as pretty much all of the fonts on this list.

Open Sans

If you want something to stand out, then Open Sans is the best font for you. Even at small sizes it’s very legible and draws the eye with its smooth, rounded letters. It’s also good for body text as it has a range of symbols as well as letters and includes: standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets.

Like Lato, it can be combined with just about any font on this list. But, as a personal recommendation, it stands out more beside fonts such as Abril Fatface, Playfair Display and Old Standard TT. Rounded letters alongside squared off edges draws your eye to each individually, both on desktop and mobile devices.

Abril Fatface

One of my personal favourite fonts, Abril Fatface is a part of a larger type family system, Abril, which includes 18 styles. This font is inspired by advertising posts from the 19th century and works extremely well in headlines and titles. It works well with rounded fonts and at bigger sizes to really emphasis it; both with it being bold and wide.

With over 50 languages supported, including from Central and Northern Europe, Abril Fatface is a very broad ranging font with tonnes of uses. The body text will stand out even more if it has rounded edges and is thinner in style.

Josefin Slab

Josefin Slab mixes the hard letter style and rounder edges of the previous fonts very well. The designer created it around Scandinavian style, with ‘ae’ in mind, which has changed the way that the vowels look. It’s meant to look like the text from a typewriter, which makes it easier to read especially capitalised. With its rounder, softer, sister font Josefin Sans it looks rather jagged and it can really stand out.

Using Josefin Slab is usually best at a larger font, so for headers and titles. Putting slightly thinner spaced text in the body works well, as can “handwritten fonts” as a title and Josefin Slab in the body, though it makes it a little harder to read at smaller sizes. So, be careful!

Arvo

With its blocky typeface, Arvo works extremely well as a header, standing out and catching the reader’s attention. The fact that it’s bolded means that it most certainly stands out. There are four different styles: Arvo Regular, Arvo Italic, Arvo Bold and Arvo Bold Italic. Arvo Regular and Italic are slightly thinner than their Bold and Bold Italic counterparts. Thus in the right circumstances (for newsprint style design or body text you wish to stand out more) thus using it anywhere across a site is feasible.

Arvo tends to work well with rounder, softer fonts in the body such as Open Sans, PT Sans or Lato.

Playfair Display

With a very traditional design, Playfair Display is used both in all caps (which is slightly heavier than the lowercase version), or regular sentence case as headers and body text. As with other old fashioned typefaces, it works well with rounded fonts in the body if you’re using Playfair Display as a header. If you want your design to have an air of gravitas to it, or look overly professional then Playfair Display definitely works well for that. It’s extremely elegant both as a header and in the body.

Depending on what other fonts you use on a page it can also really draw the eye, both in sentence case and all caps.

Ubuntu

Originally designed as the font for the Ubuntu operating system, the typeface is accessible and easy to read on a majority of platforms and by users around the world. Ubuntu’s philosophy is that every user should be able to use their software in the language of their choice, and with the font, the developers are extending it to cover as many written languages as possible.

With its rounded shape, it works very well in body text, but has a specific look for letters with those rounded edges. Similar to Open Sans, it works well as a header, especially bold, but with the developers trying so hard to make the font universally usable, it is just that: universally usable. In sidebars, headers, body text or footers, wherever you put it, it’ll look good.

PT Sans

With a nice, rounded style, PT Sans is very good for any body text. It works well with larger, bolder fonts as headers, as well as stylised fonts such as PT Serif, Old Standard TT and Playfair Display. Originally designed for Russian written text, it is easy to read, easy to style and generally a rather rounded (both physically and metaphorically) font. It can be used all over a website and still not look outdated or overused.

The PT Sans family consists of 8 styles: 4 basic, 2 captions for smaller sizes and 2 narrow styles for economic type setting. PT Sans really stands out both capitalised and in sentence case.

Raleway

Intended for headers and sub-headers, Raleway is perfect for any large text you want to display on a website design. With 9 different weights, there’s plenty of types to choose from: Thin, Extra-Light, Light, Regular, Medium, Semi-Bold, Bold, Extra-Bold, Black, and all their Italic versions.

But, if the site calls for a thinner, rounded font in the body text then Raleway works rather well; just make sure you still keep it above 12px otherwise it won’t be very readable.

Old Standard TT

Originally from late 19th and early 20th century publications, Old Standard TT gives a very refine air to any piece of web design. Depending on the style or context, it could really fit something inclined toward informing the reader. Factual websites, posters, leaflets or other paraphernalia are enhanced just by the reader’s thoughts. Old Standard TT looks as if it comes right from the pages of an old book.

It’s designed to compliment any rounded text, either for a header or body. Fonts such as Raleway, Ubuntu and Open Sans compliment Old Standard TT beautifully.

So, what font do I use?

Well, it’s rather easy to throw a couple of fonts at a page and call it done. A professional web designer may have a set selection of fonts that he or she uses regularly, but it’s always a good idea to branch out. You don’t want your web and graphic design to look outdated! Make sure you experiment, use a combination of some of the fonts on the list and see which really stand out.

This isn’t an exhaustive list by any stretch of the imagination. If you really are interested in broadening your typeface horizon then perhaps some of these examples will help you get to where you want to go. If not, there’s a wealth of information out there. Start trawling through Google Fonts and you’re sure to find something you like.