Font pairings

How well your font choices work well together

⭐️ A matrix ensures consistency - one font for headings, another font for 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 than body text

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

⭐️ Establish the minimum size of readability

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

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