The common fonts of the web and why we use them

When it comes to 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.

Font size 12 px

Font size 14 px

Font size 16 px

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 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Century Gothic – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Arial Black – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Impact – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Gill sans – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Papyrus – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Comic Sans – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Century Gothic – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Arial Black – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Impact – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Gill sans – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Papyrus – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Comic Sans – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Century Gothic – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Arial Black – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Impact – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Gill sans – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Papyrus – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.