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".
Headers
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.
Conclusion
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.