Designers must establish a typographic hierarchy in their web designs.
This is not random; this is written in a style sheet; this is designed.
The typographic hierarchy aids in making reading web texts easier.
Here is an example of a designed web typographic hierarchy:
The baseline is 16px; from there, up scale is multiplied by 1.5 and down scale is multiplied by .75.
Small: 12px
Medium: 16px
Large: 24px
X-Large: 36px
XX-Large: 54px
We should not go beyond 12px because that would be too small for the naked eye.
As a designer, you may now decide which heading level is Large. In this case, I would say Large is H3, X-Large is H2, and XX-Large is H1.
H4, H5, and H6 would be 16px but with different additional styles to differentiate them when put in the context of heading and paragraph.
Leave a Reply