Refactoring UI - My Notes on Typography
Tags: webdev, learning, tutorial, css
Published: 2020-04-23 15:52:27

---
title: Refactoring UI - My Notes on Typography
published: true
date: 2020-04-16 00:00:00 UTC
tags: webdev, learning, tutorial, CSS
canonical_url: https://includejs.dev/design-typography
---

If you are a developer first and a designer later, you'll love the [Refactoring UI](https://refactoringui.com/) 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](https://fonts.google.com/)
- [Font Joy](https://fontjoy.com/)
- [Fonts Ninja](https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh)

You can do so much with fonts these days (in a modern browser): [Font variable experiments](https://codepen.io/collection/XqRLMb/)

## `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-35`em`.