1. Group related information (don’t be afraid of spacing!)

2. Create contrast through font-size (don’t be afraid of big sizes)

3. Create more contrast through font-weight

4. Add contrast through color (you can even have just shades of grey)

5. Increase the line-height of your body text. (1.5 is a good starting point, but you can also try going for a lot bigger, then reducing it)

6. Decrease the line-height of your bigger text.

Ask yourself: what piece of text is more important? And make it bigger.

Create contrast to show different pieces of information.

• If you use all caps for a section, use letter spacing for readability.
• Robot can be a good default font.

Using variables can help with responsive typography along with media queries.

vw: can be useful along with clamp

font-size-xl: clamp(3.5 rem, 12vw + 1rem, 12rem)

// The 1rem makes sure that users zooming in aren’t left out either

clamp(min-value, preferred value, max value)

If the preferred value is between the bond of the min and the max, that’s what it will be set as.

This should be used with caution as it might still cause accessibility problems. Use it for specific things that you want to stay consistent.