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-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