Refactoring UI - My Notes on Typography

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

• Google Fonts
• Font Joy
• Fonts Ninja

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.