includeJS
  • design
  • UI

Refactoring UI - My Notes on Typography

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

Some of my notes on web design best practices, especially concerning typography and layout. I'll write a separate post on colors 👍.

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.