Bangla interface typography: fonts, line height and conjuncts that do not break
A practical guide to setting Bangla in apps and websites, from choosing a font and line height to conjuncts, digits and mixing Bangla with English on one screen.
Bangla is beautiful on screen when it is set with care, and it falls apart quickly when it is not. Clipped vowel signs, broken conjuncts, labels that overflow their buttons and a font that looks nothing like its English partner are the most common problems we see in Bangladeshi products. Almost all of them come from treating Bangla like Latin text.
This guide covers the decisions that matter: which fonts to use, how much line height Bangla needs, what can go wrong with conjuncts, how to handle digits, and how to make Bangla and English sit well together on the same screen.
Why Bangla needs its own rules
Bangla script has a few features that interface typography has to respect:
- The matra. Most letters hang from a horizontal headline, the matra. It makes words read as connected shapes, so spacing between letters must stay as the font designed it.
- Vowel signs above and below. Signs such as ি, ী, ু and ূ sit before, above, after or below the consonant. They extend well above the matra and below the baseline, which is why Bangla clips so easily.
- Conjuncts (juktakkhor). Consonants combine into conjunct forms, such as ক্ষ or ন্ত. A good font draws hundreds of these; a weak font or a broken text pipeline shows them as separate letters with a visible hasanta (্).
None of this is exotic. It just needs to be designed for instead of discovered in production.
Choosing a font
Pick a Bangla typeface that was designed for screens and comes in the weights your design system uses. Good starting points, all free to use under open licences:
| Font | Good for | Notes |
|---|---|---|
| Noto Sans Bengali | Interfaces, long text | Wide weight range, broad conjunct coverage, pairs with Noto Sans |
| Hind Siliguri | Interfaces, marketing | Clean and compact, five weights |
| Anek Bangla | Headlines, product UI | Variable font with widths and weights |
| Baloo Da 2 | Friendly brands, headlines | Rounded and warm, less suited to dense data |
| Tiro Bangla | Editorial, long reading | A text face with a traditional feel |
Pair the Bangla font with your Latin font by matching visual weight and the height of the letters, not the point size. Bangla often needs to be set one or two sizes up from English to look the same size, because so much of each letter hangs from the headline.
Load only the weights you use and subset where you can. A full Bangla font with every weight is heavy, and on mid-range Android phones with patchy data, a slow font means seconds of invisible or jumping text.
Line height and vertical space
This is where most Bangla interfaces fail. A line height chosen for English (often around 1.4 to 1.5 for body text) can clip vowel signs above the matra or below the baseline, especially in buttons, table cells and single-line inputs where the container hides overflow.
A practical approach:
- Start Bangla body text at a higher line height than English, around 1.6 to 1.8, and headings a little tighter.
- Test with words that use the tallest and deepest signs together, for example ক্ষুদ্র, কৃষি, শিক্ষার্থী and প্রতিষ্ঠান.
- Check every component with fixed heights: buttons, chips, tabs, inputs, table rows. Give them padding instead of a fixed line box, and let them grow.
- Look at it on a real Android phone, not only in Figma. Rendering engines differ, and the phone is where your users are.
Conjuncts and broken text
If users see a word broken into pieces with a visible hasanta, something in the pipeline is wrong. The usual causes:
- A font without the conjunct. Check your chosen font against real copy from your product, not a pangram.
- Fake bold or letter spacing. Synthetic bold and tracking can break joins and shaping. Use real weights and leave letter spacing at zero.
- Text cut in the wrong place. Truncating a string by characters in code can split a conjunct or separate a vowel sign from its consonant. Truncate by grapheme cluster, or let CSS handle overflow with an ellipsis.
- Copy pasted from old encodings. Some legacy Bangla typing tools produced non-Unicode text. Make sure everything in your CMS and database is Unicode.
Digits and dates
Bangla has its own digits (০১২৩৪৫৬৭৮৯). Many Bangladeshi products use Latin digits even in Bangla interfaces, while others use Bangla digits throughout. Either can be right, but mixing them on one screen looks careless and slows reading.
Decide per product, write it into the design system, and apply it in prices, dates, charts and tables. If you use Bangla digits, test that every number format in the product, including currency (৳) and percentages, renders the way you expect. If dates matter to your users, also decide how you show months: the Bangla calendar is used alongside the Gregorian calendar in some contexts.
Bangla and English on the same screen
Many products mix the two: an English brand name in a Bangla sentence, technical terms in English, or a language switch. To make that feel calm:
- Match the visual size of the two scripts, not the font size number.
- Keep one baseline per line. Some font pairs sit at different heights; adjust size or use a pair designed to work together.
- Let components grow, because the same label is often longer in Bangla than in English.
- Do not mix scripts inside a single word or abbreviation unless your users really write that way.
A quick checklist
- One Bangla font, designed for screens, with real weights.
- Bangla line height tested with the tallest and deepest vowel signs.
- No clipping in buttons, inputs, chips or table rows on a real Android phone.
- No letter spacing, no fake bold, and conjuncts checked with real copy.
- One digit style, used everywhere.
- Text truncated by grapheme, never by raw characters.
If your product needs to work properly in Bangla and English, that is part of how we approach product design in Dhaka. We can start with a trial week on the screens that matter most.
