UX/UI Expert

Here's the English version of your text, translated clearly and professionally:

Line Height: The Unsung Hero of Readable Interfaces

Text in an interface should be not only visually appealing but also easy to read. Poor line-height choices can ruin even the most thoughtful typography. Lines may blend into a solid block or, conversely, fall apart — disrupting the flow and making it harder to scan, tiring the eyes, and slowing down the search for information.

A crucial factor is the x-height of the font — the height of lowercase letters like “x.” It determines how much line spacing is needed. Fonts with a higher x-height may require more generous spacing to avoid a cramped look. Conversely, fonts with a smaller x-height can handle slightly tighter spacing.
Example: Source Sans Pro has a relatively small x-height, while Libre Baskerville’s is larger, which affects readability and perception.

Common Mistakes and How to Fix Them

❌ Mistake 1: Line-height is too tight

A common error among beginner designers is choosing too tight a line-height, especially for small text. The result? A solid "mush" of text that’s hard to read — particularly on mobile screens.

✅ Fix: Use proper line-height values:

• Small text (12–14px): 1.4 – 1.6
• Body text (16–20px): 1.5 – 1.75
• Headings: 1.1 – 1.3 (tighter to maintain density)

❌ Mistake 2: Line-height is too loose

The opposite problem — excessive spacing — breaks the rhythm and weakens textual cohesion. It’s especially noticeable in cards with short blocks of text.

✅ Fix:

• Keep line-height for body text under 1.8
• For headings, use 1.2 – 1.3 to maintain compactness

❌ Mistake 3: No line-height adjustment for responsive design

On mobile, overly tight or loose line-height degrades readability. Tight lines feel dense, while loose ones take up too much space and look unbalanced.

✅ Fix:

• Slightly increase line-height on mobile (+0.1–0.2 from desktop value)
• Account for font x-height — low x-height requires more spacing
• Use relative units like em or rem for automatic responsiveness

📌 Example: If you use 1.6 on desktop, increase to 1.75 on mobile

❌ Mistake 4: Inconsistent line-height within the same block

Sometimes, designers unintentionally assign different line-heights to similar elements — e.g., 1.5 for a list, 1.7 for a paragraph — creating visual chaos.

✅ Fix:

• Stay consistent across similar elements
• Set a system in your design language: e.g., all paragraphs at 1.5, all headings at 1.2

Visual Hierarchy Matters

Line-height also supports visual hierarchy. It’s not just font size that distinguishes headings — spacing helps too. This makes it easier for users to understand content structure at a glance.

Testing Tools

▶ Google Fonts

• Go to the font page
• Use the "Sample" tab to adjust font size and line-height in real time

▶ Adobe Typekit

• Load font into a project
• Use “Web Font Tester” to experiment with spacing on-screen

▶ Type Scale

• Free tool for adjusting font size and line-height
• Shows visual hierarchy
• Generates CSS code automatically

Examples of Good Interfaces

Medium

• Body text: 21px, line-height: 1.58
• Perfect balance for long-form reading
• High readability across devices

Apple.com

• Headings: line-height 1.1 (compact)
• Body: 1.47
• Clean typography and smart hierarchy

GitHub Docs

• Docs: 1.5
• Code: 1.5
• Comments: 1.6
• Systematic approach to typography
• Excellent technical readability

Conclusion

Well-chosen line-height boosts readability and creates a harmonious interface. Don’t overcrowd your text, but don’t let it fall apart either.
Keep x-height in mind, adjust for different devices, and stay consistent. That’s how your content becomes effortless to read.

👉‍ ▶︎ Catch me on VC 🔥

Let me know if you’d like a shortened version or formatted for publication (e.g. Medium or VC.ru).