Why Line Height and Letter Spacing Matter
Line height and letter spacing aren’t just design details — they’re foundational to how your content feels when people read it. In bilingual design, especially when mixing English with Chinese, these measurements become even more critical.
Here’s the thing: English and Chinese characters have completely different proportions. A line height that works perfectly for English headlines might leave Chinese body text feeling cramped. Letter spacing affects both languages differently too. Get these wrong, and even great typography falls apart on screens across Hong Kong.
Understanding Line Height for Mixed Scripts
Line height (also called leading) determines the vertical space between text lines. For English, we typically use 1.4 to 1.6 for body text — that’s the ratio between line height and font size. For Chinese characters, you’ll want something tighter, usually 1.5 to 1.8, because the characters themselves are more compact vertically.
When you’re working with bilingual text, this creates a challenge. You can’t just pick one number and call it done. Many designers use 1.6 as a compromise — it works reasonably well for both scripts without looking either too loose or too tight.
Practical Measurements
- Body text: 1.6 line height gives you breathing room without excessive gaps
- Headings: 1.2 to 1.3 keeps them tight and impactful
- Captions: 1.4 maintains clarity in smaller sizes
On high-density displays — and Hong Kong definitely has those — these measurements translate directly to pixels. A 16px font size with 1.6 line height becomes 25.6px of vertical space per line. That’s enough space to distinguish lines clearly without wasting screen real estate.
Letter Spacing: The Subtle Art
Letter spacing (tracking) is where things get really interesting. For English text, you’re typically adding very little — maybe 0.02em to 0.05em for body text. Anything more looks spread out and feels harder to read.
Chinese text? You generally want zero letter spacing. The characters are designed to sit right next to each other without gaps. Adding space between Chinese characters actually reduces readability because it disrupts the natural rhythm of the script.
Where Letter Spacing Really Shines
Headlines are where you can be more creative. English headlines benefit from 0.05em to 0.1em spacing — it creates a sophisticated, modern feel. For Chinese headlines, stay conservative with 0em or even go slightly negative (0.02em) to tighten them up and make them feel more authoritative.
The real trick is testing on actual devices. Hong Kong’s high pixel density means small spacing changes become visible. What looks good on your desktop monitor might look too loose or too tight on a phone. We recommend checking your typography at actual size on multiple devices before finalizing.
Quick Reference: Recommended Values
Testing and Refinement in Real Environments
Theory is great, but typography lives on screens. Hong Kong users access your site on everything from the latest iPhones to older Android devices, from 5-inch screens to 27-inch monitors. You need to test across this range.
Start by setting your base measurements in CSS. Use relative units — em or rem — rather than fixed pixels. This lets line height and letter spacing scale proportionally with your font size. If you’re using 16px as your base, 1.6em line height gives you 25.6px of vertical space. On a smaller device, if the base font becomes 14px, the line height automatically becomes 22.4px, maintaining the proportion.
The Testing Process
- Set your initial measurements based on the reference values above
- View on multiple devices: phone, tablet, desktop
- Read actual paragraphs of text — don’t just glance
- Adjust in 0.1em increments if something feels off
- Document your final values for consistency across the site
Most designers find they need slightly different values for mobile versus desktop. CSS media queries make this easy — you can increase line height slightly on mobile to compensate for smaller screens, making paragraphs easier to scan.
Bringing It All Together
Managing line height and letter spacing well isn’t complicated, but it does require attention. You’re not just following rules — you’re creating the reading experience for your audience. In Hong Kong, where people are reading across incredibly diverse devices and screen sizes, getting this right makes a real difference.
Start with the measurements we’ve covered. Test them on actual devices. Adjust slightly if needed. Document what works. Once you have solid values locked in, you’ll be surprised how much cleaner and more professional your bilingual typography looks. That’s the power of thoughtful spacing — it’s invisible when it’s right, and immediately noticeable when it’s wrong.
About This Guide
The measurements and recommendations in this article are based on established typography principles and common practice in bilingual web design. However, typography is contextual — what works for one website might need adjustment for another depending on font choice, content type, and audience. Always test your specific implementation across multiple devices and gather feedback from actual users. Different devices, browsers, and operating systems may render typography slightly differently. Consider these values as starting points for your own experimentation rather than absolute rules.