Building Typographic Hierarchy That Works in Four Languages
Font size relationships that work for English don’t scale the same way for Chinese. We’ll show you how to create visual hierarchy that’s consistent across all four scripts.
Here’s the thing about typography in Singapore — it’s not just about making English text look good. You’re juggling four completely different writing systems, each with its own spacing needs, baseline requirements, and visual weight expectations. A headline size that feels commanding in English might look awkwardly huge for Chinese characters. Tamil text needs more breathing room than you’d think. And Malay? It sits somewhere in between, which creates its own challenges.
We’ve spent the last few years working on multilingual sites across the region, and the typographic hierarchy problem keeps coming up. It’s not about picking fancy fonts — it’s about understanding how size, weight, and spacing interact differently across scripts. Get this right, and your site feels intentional and polished. Get it wrong, and some users are reading uncomfortably small text while others think everything’s a headline.
Why Scale Factors Break Down Across Scripts
Most designers start with a single scale — say, 1.25 multiplier between heading levels. It’s clean, it’s consistent, and it works great for English. Body text at 16px, small headings at 20px, medium at 25px, large at 31px. The proportions feel right because our eyes are trained on Latin typography.
But apply that exact scale to Chinese, and something’s off. Chinese characters are denser than Latin letters. They pack more visual information into a smaller footprint. A 16px Latin body text feels comfortable, while 16px Chinese feels cramped. You’ll find yourself increasing Chinese body text to 18px or 19px just to match the perceived readability. That throws your scale completely off — suddenly your hierarchy isn’t 1.25x anymore, it’s more like 1.15x for Chinese.
Tamil and Malay have their own quirks. Tamil has tall ascenders and descenders that need extra line height. Malay, while using the Latin script, often includes diacritics that affect vertical spacing. Mix them all together on one page without adjusting for these differences, and you’ll get inconsistent visual hierarchy even though you used the same mathematical scale.
Technical Context
The information here is educational and based on real-world experience with multilingual web projects. Every site is different — your specific needs will depend on your typeface choices, target audience, and platform. Always test with actual users in each language before finalizing your hierarchy. What we’re sharing is a framework to start with, not a one-size-fits-all solution.
Building a Script-Aware Hierarchy System
Instead of forcing one scale across all scripts, we work with what we call a “base plus adjustments” approach. You pick your primary language — usually English for Singapore’s web space — and set up a solid hierarchy there. Then you create adjustments specifically for each other language.
Start with your English hierarchy. Let’s say: 12px (small), 16px (body), 20px (subtitle), 28px (h3), 36px (h2), 48px (h1). These feel right for English on screen. Now, don’t apply these exact sizes to Chinese. Instead, measure the x-height (the height of lowercase letters) for both your English and Chinese fonts. If your English font has an x-height of 7px and your Chinese font has an x-height of 8px, you’re already looking at a size adjustment.
The real win happens when you test. Take your Chinese body text and set it to 16px. Does it feel as readable as 16px English? Usually not. Try 17px. Better. Now stick with 17px as your Chinese body baseline. From there, rebuild your scale — maybe 13px for small text, 17px for body, 21px for subtitle, 30px for h3, 38px for h2, 50px for h1. The proportions shift, but the visual weight stays consistent.
Practical Steps for Implementation
Start by documenting your font metrics. Most design tools show x-height, cap height, and ascender/descender heights. Write them down for every font you’re using. English serif font x-height? Chinese sans-serif x-height? Tamil font metrics? Having these numbers visible helps you make informed size decisions instead of guessing.
Next, set up CSS variables or SCSS maps for each language. Don’t hardcode font sizes — make them adjustable. Something like:
--font-size-body-en: 16px;
--font-size-body-zh: 17px;
--font-size-body-ta: 18px;
--font-size-body-ms: 16px;
Then test in context. Put real content in each language on your actual site. Look at it on different devices, different browsers, different screen sizes. A size that works on desktop might feel off on mobile because of viewport width. You’re not looking for mathematical perfection — you’re looking for visual consistency.
Line height matters as much as font size. English typically works well at 1.5x line height for body text. Chinese might need 1.6x or 1.7x. Tamil often needs 1.8x because of the tall marks above characters. Don’t apply the same line-height value across all scripts — adjust it per language based on actual readability.
What We’ve Learned from Real Projects
We built a financial services site last year serving Singaporean users across all four languages. Our initial hierarchy used a single scale, and the user feedback was telling — English users thought the headlines were too bold, Chinese users found body text cramped, Tamil users complained about line spacing making text hard to follow.
We didn’t change fonts or weights. We just adjusted sizes and spacing per language. English stayed at 16px body, Chinese went to 18px, Tamil to 18px as well (but with 1.8x line height instead of 1.6x), and Malay stayed at 16px. The visual hierarchy suddenly felt consistent across all four language versions. Support tickets about readability dropped significantly.
The lesson? Your hierarchy isn’t about absolute pixel sizes — it’s about perceived visual weight and readability. Two sites with completely different font size numbers can both have perfect hierarchy if they’re adjusted correctly for their scripts. One site with a single rigid scale across four languages will always feel slightly off in at least three of them.
