Designing for Thai Script: Line Height, Line Breaking and Font Pairing

Line height has to leave room for vowels and tone marks

Thai letters reach further above and below the baseline than Latin ones. Vowels such as the ones that sit on top of a consonant can carry a tone mark above them, and other vowels hang below. If line spacing is too tight, these marks hit the neighbouring lines and become hard to read.

As a starting point, long Thai body text usually needs a line height of about 1.5 to 1.8 times the font size, looser than the setting often used for English. Large headings can be tighter, but test them with words that really stack marks, not just short, simple ones.

• Long body text: start around 1.6 and adjust for the font.
• Large headings: you may tighten them, but check that upper and lower vowels do not touch adjacent lines.
• Single-line buttons and labels: do not fix a height so tight that it clips vowels or tone marks.

No spaces between words: how lines break

Thai uses spaces between phrases or sentences, not between words. Most modern browsers include a Thai word dictionary, so when the lang="th" attribute is set correctly, text can wrap at word boundaries in many cases. Results can still differ slightly between browsers and devices.

Trouble shows up in narrow spaces such as buttons, cards and phone screens, where a word may split in an awkward spot. When you need firm control, insert a zero-width space at the positions where a break is allowed, or segment text on the server for system-generated content. Always test with long strings that have no natural break point.

Good type is type the reader never has to think about.

Pairing Thai with Latin fonts

Most products show Thai and English on the same screen. If you choose a handsome Latin font that has no Thai glyphs, the system silently pulls in a fallback font whose weight, size and proportions rarely match. Choose the Thai font deliberately and set the fallback order yourself.

The safe shortcut is a family designed with Thai and Latin together, such as Noto Sans Thai, IBM Plex Sans Thai or Sarabun. If you pair fonts from different families, compare x-height, stroke weight and overall feel, and test a sentence that mixes Thai and English.

Size, weight and numerals

At the same nominal size Thai usually looks smaller than Latin because the main body of the consonants is lower in height. Thai body text on screen often needs one or two more pixels than English, and many teams start at 16 pixels or larger for main content.

On weight, very thin strokes make small vowels and tone marks disappear on low-resolution screens. Use a regular weight for body text and avoid light weights on coloured backgrounds. For numerals, most digital products use Arabic digits for prices, dates and phone numbers because users know them and can scan them quickly. Thai digits suit particular contexts such as formal or ceremonial material; if you use them, be consistent across the page.

Common mistakes

The most common mistake is designing with placeholder Latin text and swapping in Thai at the end, which breaks button heights, cards and headings. Another is justified alignment, which in Thai produces uneven spacing because there are no word gaps to stretch.

Others include relying on italics and bold that many Thai fonts do not render well, using uppercase styling for Latin and forgetting Thai has no such concept, and skipping real-device checks. Looking at a few phones before handoff catches a lot.