If you are a developer first and a designer later, you'll love the Refactoring UI course.
In this post, I wrote down some 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
(userem
) -
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 aserif
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 multiplyfont-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 alsoword-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-35
em
.
Top comments (0)