Text Hierarchy

Learn some tips and tricks which help your typography sit well in your visual designs, as well as learning how to make your typography legible, scannable, and accessible.

Use opacity

Reduce the opacity on paragraph text in order to create a contrast between titles and body copy. This can make copy easier to read, as well as making your content much easier to scan.

Text opacity

By using black or white text with a reduced opacity, you allow a tint of the background colour to appear in your copy, making it feel more on-brand and well-fitting.

Text opacity on a coloured background

Be careful to ensure your opaque copy remains accessible however; reducing the opacity by too much can mean that your text will not have enough contract against it's background to remain accessible.

Also, when using light text on a dark background, consider using slightly higher opacity vaules to keep copy legible.

Text opacity on a dark background

Skip a weight

If you want to create a strong contrast between your headers and your body copy, skip a weight between them.

Use text weight for contrast

Use colour

Add emphasis by utilising colour, but remember to use sparingly. And also remember keep your contrast ratios accessible!

Use text colour for emphasis