🔤

Typography

Before you jump straight into the visuals and after you have finished wire-framing comes an important part: what's your choice of typography?

Text dictates several characteristics: tone, style, focus and structure. How you execute your typography is just as critical as your colour palette, illustrations and overall design of the product.

So read below to know what to keep in check when deciding on the ideal typography and a few resources to help your choice.

Features

Each visible item to be shown on this page.

Font combinations

How well your choices work well together

⭐️ A clear matrix for your font choices helps consistency - one font for only headings, another font for only body text for example

⭐️ The lower the saturation, the more accessible a color will be

Line alignment and length

The direction your text sits and how long it runs for

⭐️ 50–60 character per line on desktop is a common guide, 30-40 on mobile

Scale and variation

How each text style differs in size

⭐️ Headings should be noticeably larger and stronger than your body text

⭐️ Create a variety of headings and consider their use cases

⭐️ Establish the minimum size the fonts are readable

Contrast and style

Visibility and look of text

⭐️ Check text colours across accessibility tests

⭐️ Incorporate your colour palette established for other elements and components

Spacing

The distance between your types of text

Optional additions

Not always necessary, but they can have their perks!

Switch to light mode

Some products may be just one or the other, but if you offer both then allow the user to make a seamless switch between the two.