4. Designing text (p. 88)
Most interfaces use too many font sizes, defines a type system in front.
Establish a type scale
Choosing a scale
- modular scales (you end up with fractional values; you usually need more sizes)
- hand-crafted scales: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72px
Avoid em units
Stick to px or rem units to garantee you're sticking to the system.
Use good fonts
Play it safe
- system font stack: -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
Ignore typefaces with less than five weight
Optimize for legibility
- headline font: tighter letter-spacing & shorter lowercase letters (x-height)
- smaller size: wider letter-spacing & taller lowercase letters
- avoid using condensed typefaces
Trust the wisdom of the crowd
Sort font by popularity.
Steal from people who care
Developing your intuition
Keep your line length in check
Make your paragraphs between 45 & 75 characters per line. 20-35em is good.
Dealing with wider content
Baseline, not center
Align-items: baseline;
Line-height is proportional
Acounting for line length
- narrow content = line-height: 1.5
- wide content = line-height: 2
Acounting for font size
- small text = line-height: 1.75
- large headline = line-height: 1
Not every link needs a color
Align with readability in mind
Don't center long form text
Right-align numbers
Hyphenate justified text
- hyphens: auto;
Use letter-spacing effectively
Tightening headlines
- Open Sans (wide letter-spacing): letter-spacing: -0.05em;
- Oswald (already small letter-spacing)
- do not increase letter spacing with headline fonts
Improve all-caps legibility
- letter-spacing: 0.05em;