The first bilingual site we built looked great in English and quietly terrible in Lao. Headlines wrapped in the middle of words. Tone marks were shaved off the top of buttons. On one older Android phone the whole Lao menu rendered as rows of hollow rectangles. None of this showed up on our design mockups, because the mockups — like most of the web's tooling — were built around languages that put spaces between words.
If you run a business in Laos, roughly half your audience will read your site in Lao. This post is about making that half of the site look as deliberate as the English half. It's written for developers, but if you're an owner, the samples below make a decent checklist to hold your developer to.
Problem one: the line breaks in the wrong place
In Lao, spaces don't separate words — they separate phrases and sentences, a bit like commas. Words inside a phrase run together, and a fluent reader's eye splits them without effort. A browser's eye is not fluent. When a line of text gets too long, the browser needs to decide where it may break, and its oldest, most reliable rule is "break at a space." A long Lao phrase has none.
Modern browsers ship dictionaries for Southeast Asian scripts and genuinely try to guess Lao word boundaries — and most of the time, in body text, they do fine. The failures cluster in three places:
- Headlines. Large type means few words per line, so one bad guess is glaring — a heading that breaks mid-word reads like a typo the size of a billboard.
- Everything that isn't a browser. Old Android WebViews, email clients, PDF generators, receipt printers. The dictionary that saves you in Chrome isn't there.
- Rare words and names. Dictionaries know common vocabulary. Your restaurant's name, invented five years ago, is not in the dictionary.
The dependable fix is old and unglamorous: the zero-width space (U+200B), an invisible character you place between words to tell the renderer "you may break here." We insert them by hand in headings and UI labels — the short, high-visibility strings — and let the browser's dictionary handle long body copy. It's ten minutes of work per page and it removes the single most common way a Lao site looks careless.
One warning from a painful afternoon: zero-width spaces are invisible in your code editor too. Keep them out of anything a machine compares — database keys, URLs, search fields — or you'll spend hours discovering why two identical-looking strings aren't equal.
Problem two: the font
Your CSS says font-family: 'Some Elegant Font', sans-serif. That elegant font almost certainly contains no Lao glyphs, so every Lao character falls through to the device's fallback. Three things can happen, in descending order of luck: the device has a decent Lao font and your site merely looks inconsistent; the device has an ugly one and your carefully designed page turns generic; or the device has none and your customer sees tofu — rows of empty rectangles — usually on exactly the kind of older Android phone that is common here.
The fix is to ship a Lao webfont instead of hoping. Our defaults:
- Noto Sans Lao — free, on Google Fonts, multiple weights, well maintained. The workhorse. There's also a Looped variant, closer to traditional letterforms, which many older readers find more comfortable.
- Phetsarath OT — the government-standard face. Familiar and safe, but it effectively has one weight, so your bold headings become faux-bold smears. We use it when a client's printed materials already do.
Declare it explicitly for Lao content — :lang(lo) { font-family: 'Noto Sans Lao', sans-serif; } — which only works if you actually mark the language in your HTML (lang="lo" on the element or page). Marking the language also helps screen readers and translation tools, so do it regardless.
Problem three: the top of the letters is missing
Lao stacks marks vertically: a consonant, a vowel above it, and a tone mark above that. Here's a harmless everyday word with the full stack — ນ້ຳ ("water") — next to taller phrase: ເຂົ້າໜຽວ ("sticky rice"). Notice how much higher the marks reach than any Latin capital.
Western designs are tuned for Latin proportions: tight line-heights, buttons with minimal padding, overflow: hidden sprinkled around. Lao text in those containers gets its tone marks clipped — the word is still legible, but subtly wrong, like a photo with everyone's forehead cropped. The fixes are boring and effective: give Lao text a taller line-height (we start at 1.7–1.9 versus 1.5 for English), add a couple of pixels of top padding to buttons and pills, and treat every overflow: hidden near text as a suspect.
Problem four: design habits that don't translate
A few Latin-alphabet reflexes fail silently in Lao:
- Uppercase for emphasis. Lao has no capital letters.
text-transform: uppercasedoes nothing, and a design language built on ALL-CAPS labels loses its hierarchy. Use weight, size, or color instead. - Letter-spacing for style. That airy tracked-out look in menus and section labels can push combining marks out of position in some renderers. We zero out
letter-spacingfor:lang(lo). - Italics. Most Lao fonts don't have true italics, so the browser slants the letters mechanically. It reads as a glitch. Use weight or color for emphasis.
- Space budgets. Lao translations often run longer than the English. A button that fits "Book now" may not fit the Lao — design the layout to breathe, not to a fixed English width.
The English half of a bilingual site is the half the designer sees. The Lao half is the half most of your customers see.
The five-minute test
You don't need to read Lao to audit this. Open the Lao version of your site on the cheapest Android phone in the office and check four things: no hollow rectangles anywhere; headings break between words, not inside them (ask any Lao speaker — they'll spot it instantly); the marks above letters aren't clipped in buttons and menus; and the Lao pages feel like the same brand as the English ones, not a system-font cousin. If all four pass, you're ahead of most of the Lao web.
And if you're commissioning a site: ask your developer how they handle Lao line-breaking. It's a small question with a very revealing answer. If they say "the browser handles it," now you know exactly which afternoon of their learning curve you'll be funding.