Typography

Type Scale

When implementing your app, an appropriate ratio or type scale of typography is key in establishing visual hierarchy or importance.

Headlines

In typical type scales using CSS, headlines span from a range of 1 through 6. Headlines are the largest text on the screen, reserved for short, important text or numerals.

For headlines, you should choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye.

Subtitles

Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.

For subtitles, use caution when using expressive fonts, including display, handwritten, and script styles.

Body

Body text should have ≈ 2 sizes in a given app, and it should be used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended. Don’t use expressive fonts, including display, handwritten, and script styles for body copy.

Caption and overline

Caption and overline text (text with a line above it) should be the smallest font sizes. They should be used sparingly to annotate imagery or to introduce a headline