Question 1

What is vertical rhythm in CSS?

Accepted Answer

Vertical rhythm is the consistent vertical spacing between elements on a page. It's achieved by using a base unit (usually the line height of body text) and making all margins, paddings, and spacing multiples of that unit, creating visual harmony.

Question 2

How is the baseline unit calculated?

Accepted Answer

The baseline unit = base font size × line height ratio. For example, 16px font with 1.5 line height = 24px baseline. All spacing values should be multiples of 24px (24, 48, 72, etc.) for consistent rhythm.

Question 3

What is a good line height ratio?

Accepted Answer

For body text, 1.4 to 1.6 is generally recommended. 1.5 is the most common choice for readability. For headings, tighter ratios (1.1-1.3) work better since larger text needs less line spacing.

Question 4

How do I use the generated CSS?

Accepted Answer

Copy the generated CSS custom properties (variables) into your :root selector, then use var(--space-1), var(--space-2), etc. for margins and padding throughout your stylesheets for consistent spacing.