Head Ads

What type of fonts are being used in web design?


What type of fonts are being used in web design?

What type of fonts are being used in web design
What type of fonts are being used in web design

Thanks to CSS and different font services we can easily integrate fonts into our web design projects . Michael Li made a study, in my opinion, interesting. He analyzed 1000 of the most popular websites to understand what fonts and how fonts are being used in today's web design. I will answer to this question What type of fonts are being used in web design? in this article. 

Some of the results seem important to me, and this is what we are going to share in today's article.

Typographic families

There is always a big debate between sans-serif and serif typefaces . For the Web , I am more pro-sans-serif , but as you can imagine I am not alone, since it is estimated that 85% of the fonts are “sans-serif, and the rest is left for serif, monospaced, etc ... "

Font families ( font-family) in CSS are a prioritized list of fonts that the browser processes according to the available fonts, starting from the first defined font. Therefore, as a designer you must first put the font you want and then the backup fonts.

Some data discovered by Li, on this subject, are quite curious. For example:

“Average font family stack depth is 4” (1 primary, 3 backup)

“There are websites with a font stack depth of 6, 12 or even 21 !! ”Many types of fonts for a website, don't you agree?

The 6 most used fonts are usually: "san-serif", "arial", "helvetica", "helvetica neue", "roboto", and "open sans" . Does it surprise you? It is still curious that in this top-6 all the fonts are dry stick .

Also, the probability of being “sans-serif” ranges from 58% for H1 type headings to 70% for H2, 89% for H5, and 93% for paragraph (P) tags. Li suggests that if you want to use “serif”, it is better to do it in headings rather than paragraphs.

Font pairings

Another interesting observation has to do with font matching. Based on Li's data, the average serif paragraph is paired with a serif heading about 51% of the time, while the average serif heading is only matched by a serif paragraph 36% of the time.

How big should my font be?

If you are concerned about readability and accessibility , larger fonts are your option. But if you want to have a higher density of information, you should think about smaller fonts.

Michael Li's analysis has concluded that the average font size is 14px. You can also find 16px, the classic 12px, and 18px. What is "rare is to find font sizes below 10px or above 24px".


In relation to headings, it turns out that designers, based on the data, choose to use a size “larger more often than a heavier weight (94% vs 82%), but often use both (76%). Many websites don't use H1 type headings, and they make their H2's larger.

In fact, speaking of weights, most paragraph tags are normal - 400 font-weight -, and most heading weights are bold - 700 font weight.

With regard to sizes, the results of the study say that “on the median page, H1 is approximately 1.9 times the size of P. This proportion decreases to H5, whose median size is the same as P. To distinguish (H5 from P) a different or heavier font is being used.


Knowing data such as that of Michael Li's study allows you to design within current and modern standards, and be up to date with trends. Therefore, unless you want to design something totally disruptive, I think this typographic data is worth taking into account for your web design.


No comments

Note: Only a member of this blog may post a comment.