Readable typography

Typography is most of what users perceive as “design.” Good HTML gives headings and paragraphs; CSS makes them comfortable to read.

Practical rules

• Body text: line-height around 1.5–1.7.
• Prefer rem for font sizes so users who zoom see consistent scaling.
• Limit line length (~60–75 characters) with max-width on text containers.
• Ensure contrast: dark text on light backgrounds (check WCAG for production).

Heading hierarchy

Use one <h1> per page view, then h2, h3 without skipping levels when possible. Style sizes in CSS—not by picking the wrong heading level.

Practice

1. Change --font-size-base and watch the whole page scale.
2. Set max-width on .prose and compare readability.

Important interview questions and answers

1. Q: Why use `rem` instead of `px` for font-size?
   A: `rem` respects root font size and user zoom preferences better than fixed pixels.
2. Q: What is a common accessible line-height for body text?
   A: Around 1.5 or higher depending on font and size.
3. Q: Should heading level be chosen for font size?
   A: No—choose level for document structure; size is CSS.