Refactoring UI - My Notes on Typography

From the course: Refactoring UI by Adam Wathan and Steve Schoger

Written by Eva Dee on (about a 3 minute read).

Some of my notes on web design best practices, especially concerning typography and layout.

Define your design choices in advance. Stick to them. Write them down. Use CSS variables. This goes for:

  • font-size (use rem)
  • font-weight (avoid going under 400)
  • line-height (and letter spacing)
  • color (grays, grays, grays)
  • margin (spaaaaaaace)
  • padding (moar spaaaaaaace)
  • width (lots of skinny pages these days)
  • height
  • box-shadow (shadows... 😅)
  • border-radius
  • border-width
  • opacity

font-family

  • Don't reinvent the wheel - stick to popular fonts (especially if you're still training your design eye).

  • Borrow from others.

  • Often time you'll pair a sans-serif header typeface with a serif body typeface.

  • 👍 Pro-tip: Ignore typefaces with less than five weights.

  • 2,3 fonts max!

Typeface VS font?

  • A typeface is a design created by a typographer or type designer.
  • A font is the digital representation of a typeface.
  • Type family is the complete assembly of all sizes and styles of one typeface.

Fonts and font pairing resources:

You can do so much with fonts these days (in a modern browser): Font variable experiments

font-weight

  • The weight has to do with the thickness of the font, the style (italic, oblique) normally has to do with the angle.

  • A normal font-weight of 400 or 500 (depending on the font) shoudl be used for most text.

  • A heavier font-weight of 600 or 700 for the text you want to emphasize.

Values range from 100 to 900:

  • 100 = thin
  • 200 = extra-light
  • 300 = light
  • 400 = normal, book
  • 500 = medium
  • 600 = demi-bold
  • 700 = bold
  • 800 = heavy
  • 900 = black

line-height

  • line-height should be about 1.5x for body font (meaning you multiply font-size by 1.5).
  • Increase it for wider content (especially when lots of text is involved).
  • Line spacing spacing of 130%-150% is ideal for readability.
  • The ascenders and descenders of the lines of text should never touch!

letter-spacing

  • letter-spacing is the amount of space between a group of letters (there's also word-spacing 💡).
  • Some fonts (typically heading fonts) have smaller letter spacings. For smaller fonts, you'll want more letter spacing.

margin and padding

  • Make sure to establish a system (see above).
  • Paddings and margins are not proportional to the font-size.
  • 🤯 White space should be removed, not added - start with too much space!

width

  • For the best reading experience, make your paragraphs wide enough to fit between 45 and 75 characters per line or width of 20-35em.