The common fonts of the web and why we use them

Posted on

Estimated reading time: 5 minutes, 13 seconds

When it comes to common fonts online we are limited to what people’s computers are able to do. With CSS we set the font of your website in the following manner, we select a font (since there are very few available on all computers and all different browsers) we also set a secondary, a third and sometimes even a fourth to make sure we have some kind of control over how the website looks. Let’s take the first paragraph below as an example, if your computer and browser does not support Verdana it will try and use Arial, if there is no support it will try Helvetica and if all else fails it will use your computers default sans serif font.

However, just because we’ve selected our fonts it might not look the same too everyone. Different computers and different browsers deal with fonts in their own way. Below we will show you the most common fonts and the ones used up to 90% on the internet. We have included them in the most common sizes shown online for you to explore. If you are keen enough you might look at this from more than one computer and see the differences.

Common fonts at size 12 px

Verdana or Arial or Helvetica or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Arial or Helvetica or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Helvetica or Arial or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Myriad Pro or Myriad or Helvetica or Arial or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Times New Roman or Times or system default serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Georgia or Times New Roman or Times or system default serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Courier New or Courier or monospaceActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Font size 14 px

Verdana or Arial or Helvetica or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Arial or Helvetica or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Helvetica or Arial or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Myriad Pro or Myriad or Helvetica or Arial or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Times New Roman or Times or system default serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Georgia or Times New Roman or Times or system default serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Courier New or Courier or monospaceActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Font size 16 px

Verdana or Arial or Helvetica or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Arial or Helvetica or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Helvetica or Arial or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Myriad Pro or Myriad or Helvetica or Arial or system default sans-serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Times New Roman or Times or system default serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Georgia or Times New Roman or Times or system default serifActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

Courier New or Courier or monospaceActive Webdezign Ltd. is a London based web design studio, here showing you how fonts look on a website.

We have a lot of people requesting we use the fonts in their logos and or fonts they use in their email signatures etc. Unfortunately the web does not render fonts like other software on your computer might do, let me show you a few examples. To prove my point I will not set any secondary font, so if your current browser and computer does not support this font it will go to your system default font.

Comic Sans – Web Design London & Active Webdezign
Century Gothic – Web Design London & Active Webdezign
Arial Black – Web Design London & Active Webdezign
Impact – Web Design London & Active Webdezign
Gill sans – Web Design London & Active Webdezign
Papyrus – Web Design London & Active Webdezign

Comic Sans – Web Design London & Active Webdezign
Century Gothic – Web Design London & Active Webdezign
Arial Black – Web Design London & Active Webdezign
Impact – Web Design London & Active Webdezign
Gill sans – Web Design London & Active Webdezign
Papyrus – Web Design London & Active Webdezign

Comic Sans – Web Design London & Active Webdezign
Century Gothic – Web Design London & Active Webdezign
Arial Black – Web Design London & Active Webdezign
Impact – Web Design London & Active Webdezign
Gill sans – Web Design London & Active Webdezign
Papyrus – Web Design London & Active Webdezign

As you can see some of these become quite illegible in certain font sizes, which we really don’t want to put your customers/users through, that is why we try and keep your fonts to the most common ones.

Web Design

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top