Typography

For a playful look, use rounded sans serif

For a plainer look, use a neutral rounded sans serif

Don’t depend solely on font size for implementing a visual hierarchy

• Use font weight and lighter coloring to emphasize different things

Limit typography choices in your design system

• Use at most 3 shades of colors (Ex: Black, Grey, Light Grey)
• Use at most 2 font weights (400/500 normal, 600,700, bold)

When using different shades of color, it’s the contrast against the background that implies emphasis. Not a black -> white spectrum.

When creating a design system for text size, use hand picked values

• Ex: 12, 14, 16, 18, 20, 24, 30 etc

Some tips to pick a font

• Fonts that have multiple options/variants are usually more carefully crafted (ex: 10+)
• Fonts that are popular are usually better
• Fonts with wide spacing are designed for small size text while large spacing is designed for bigger size text.

It’s important to pay attention to beautiful typography and why it is beautiful

• Inspect element and see

Stick to 45-75 characters per line for the best reading experience

When aligning text, align by baseline, not center

The longer the line and smaller the font, the more you need to increase line height to help the user reach the next line

Use letter spacing to distinguish between characters

• Ex: Increase letter spacing in small characters, all-caps etc