Web Typographic Hierarchy

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.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *