Scale

Typographic scale is vital for visual hierarchy within a design. Take time to create a visually appealing and functional typographic scale for your headings.

There are 6 default heading levels within HTML (H1–H6), but in the vast majority of cases, you won't use all 6 levels. H1 is the largest and should be reserved for the title of an article or page. Ideally, there should only be one instance of this heading level on any page. H2 is often used for headings within a piece of content, with H3 and possibly H4 used for subheadings. H5 and H6 are rarely used within content, though they may be used for headings in sidebars, menus, or other instances.

To create a scale, the best place to start is with your body font size. While you may not use all 6 heading levels, you may want to craft your scale to include all of them, especially if you want higher typographic contrast in your design. Choose a scale ratio to work with, then calculate your heading sizes based on that, in relation to the body font size.^[1]