Skip to Content


Book: Refactoring UI
  • 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
Design Personality,