Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
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.
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.