Aa Typography Calculator
Calculate Optimal Line Height & Vertical Rhythm
Live Preview
Aa Typography Best Practices
Good typography is invisible. It allows the reader to focus on the content without strain. The relationship between font size and line height (leading) is the most critical factor in readability.
The 1.5 Rule
For standard body text (16px - 18px), a line height of 1.5 (150%) is a safe and readable default. This means if your font is 16px, your line height is 24px.
The Golden Ratio (1.618)
For a more elegant, "airy" feel, use the Golden Ratio. 16px font × 1.618 = 25.88px (round to 26px). This adds slightly more whitespace, which is great for long-form articles or blogs.
Headings vs Body
- Body Text: 1.4 - 1.6 (Loose). Needs room to breathe.
- Headings: 1.1 - 1.3 (Tight). Large text looks disjointed if the line height is too large.
- Mobile: 1.3 - 1.4. Screens are narrow, so eyes don't have to travel as far back to the start of the line, allowing for tighter spacing.
"Don't just set it and forget it! If your column width is wide (like 800px+), you MUST increase line height to help the eye track back. If your column is narrow (like a sidebar), decrease it. Also, always use unitless line-height in CSS (e.g., `1.5` not `24px`) so it scales automatically if you change the font size later."
⚠️ Common Mistakes
1. Using px for Line Height: `line-height: 24px` is dangerous. If a user increases their browser font size, the text will overlap. Use `line-height: 1.5` instead.
2. Too Tight Spacing: Default browser line height is often 1.2, which is too cramped for long reading. Always bump it up to at least 1.4.
3. Ignoring Vertical Rhythm: Professional layouts use a baseline grid (e.g., multiples of 4px or 8px). Round your calculated line height to the nearest 4px (e.g., 25.8px -> 24px or 28px) to keep elements aligned.