Refactoring UI - My Notes on Typography
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-weight(avoid going under 400)
line-height(and letter spacing)
color(grays, grays, grays)
width(lots of skinny pages these days)
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-serifheader typeface with a
👍 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
The weight has to do with the thickness of the font, the style (italic, oblique) normally has to do with the angle.
font-weightof 400 or 500 (depending on the font) shoudl be used for most text.
font-weightof 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-heightshould be about 1.5x for body font (meaning you multiply
- 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-spacingis the amount of space between a group of letters (there's also
- Some fonts (typically heading fonts) have smaller letter spacings. For smaller fonts, you'll want more letter spacing.
- Make sure to establish a system (see above).
- Paddings and margins are not proportional to the
- 🤯 White space should be removed, not added - start with too much space!
- For the best reading experience, make your paragraphs wide enough to fit between 45 and 75 characters per line or width of 20-35