Our favourite fonts for websites
Choosing the right font is an important decision when designing a new business website. The type of font chosen will convey different emotions and feelings to your website visitors when they are viewing your content.
There are also consideration for the types of fonts used for headings, general text, as well as for sections where you may require a bit more “emphasis” and buttons that attract attention.
Choosing the right font can sometimes feel quite overwhelming, therefore we have provided a narrowed down list of our favourite fonts that will generally look good on any website.
If you see a font that you like on another website, and are curious to see what it is, you can install the WhatFont Chrome extension. When you activate it, you can hover over the text on the web page and voila!
To see if it’s a free or paid font, you can search for it at Google Fonts. If it’s a paid one, Google will usually be able to provide you a link to the external foundries where it can be purchased.
What’s the difference between fonts and typography (or typefaces)?
A typeface is the collective name of a family of related fonts (such as Times New Roman), while fonts refer to the weights, widths, and styles that constitute a typeface (such as Times New Roman Regular, Italic, Bold, etc).
Open Sans
The quick brown fox jumps over the lazy dog
Raleway
The quick brown fox jumps over the lazy dog
Roboto
The quick brown fox jumps over the lazy dog
Lato
The quick brown fox jumps over the lazy dog
Oswald
The quick brown fox jumps over the lazy dog
Poppins
The quick brown fox jumps over the lazy dog
Lora
The quick brown fox jumps over the lazy dog
Playfair Display
The quick brown fox jumps over the lazy dog
Josefin Sans
The quick brown fox jumps over the lazy dog
Muli*
The quick brown fox jumps over the lazy dog
Unna
The quick brown fox jumps over the lazy dog
Quicksand
The quick brown fox jumps over the lazy dog
Kristi
The quick brown fox jumps over the lazy dog
Amatic SC
The quick brown fox jumps over the lazy dog
Satisfy
The quick brown fox jumps over the lazy dog
Gochi Hand
The quick brown fox jumps over the lazy dog
Sofia
The quick brown fox jumps over the lazy dog
Norican
The quick brown fox jumps over the lazy dog
Sacremento
The quick brown fox jumps over the lazy dog
Yesteryear
The quick brown fox jumps over the lazy dog
Rocksalt
The quick brown fox jumps over the lazy dog
Permanent Marker
The quick brown fox jumps over the lazy dog
Graduate
The quick brown fox jumps over the lazy dog
Righteous
The quick brown fox jumps over the lazy dog
Alfa Slab One
The quick brown fox jumps over the lazy dog
Rufina
The quick brown fox jumps over the lazy dog
Wondering why we use phrase “The quick brown fox jumps over the lazy dog” in our examples? It’s actually a common pangram – which is a sentence that uses all the letters in the alphabet! It’s also pretty easy to remember which makes it handy for when you want to see how all the letters look for a particular font.
Resources
The Ultimate Collection of Google Font Pairings by Reliable PSD provides a great resource to see various Google fonts displayed in unique ways.
The font pairing guide from Canva provides examples of various fonts and showcases them according to the content or publication type they work best for. https://www.canva.com/learn/the-ultimate-guide-to-font-pairing/
Fontpair also provides a range of common font pairs that look good together.
Fontjoy is a great tool to autogenerate different combinations of fonts.
