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


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.