What happened
Our English pages looked good with a line-height of 1.5, so we reused it on the Thai versions. In Thai, the marks above and below the letters started to look cramped, and in some places they were visibly cut off.
The problem showed up most on lines with stacked marks, where a vowel and a tone mark sit together above one consonant. They would touch the line above, or get clipped inside containers.
Why it happens
Latin text mostly lives between the baseline and the cap height, with a few descenders. Thai has vowels and tone marks that stack above the consonants and others that sit below them, so a line needs more vertical room in both directions.
Line-height on its own does not clip anything. Clipping happens when the box is too tight and something else cuts the overflow, such as overflow hidden, a fixed height, or a gradient text effect using background-clip. A tighter line-height just makes those cases much more likely.
What we do now
We raised the line-height of Thai body text to about 1.7, and the clipped vowels disappeared across the whole site. We use a unitless value so it scales with each element's font size.
Headings are checked separately. Large text has proportionally less extra space to add, so it usually looks right with a smaller value. We also test with words that contain stacked marks, not just plain consonants, because that is where problems show first.
:lang(th) body {
line-height: 1.7;
}
/* Headings usually need less, so tune them separately */
:lang(th) h1,
:lang(th) h2 {
line-height: 1.4;
}Quick checklist
- 1Set Thai body text to a unitless line-height of about 1.7.
- 2Test with words that have stacked vowels and tone marks.
- 3Check headings on their own and tune them separately.
- 4Look for overflow hidden or fixed heights on containers that hold Thai text.
Rule of thumb
Do not reuse a Latin line-height for Thai, and always test with stacked vowels and tone marks.