Bangla on the web: Unicode, fonts and readable typography

To show Bangla properly on a website you need three things: the text stored as Unicode rather than an older font-based encoding, a web font that draws conjuncts and vowel signs correctly, and typography settings (size, line height, spacing) chosen for Bangla instead of copied from an English design. Get these right and your pages are readable on any phone, searchable on Google and usable with screen readers. Get them wrong and visitors see broken letters, empty boxes or gibberish.

Unicode versus older Bangla encodings

Many offices still type Bangla with older keyboard software and fonts that came before Unicode was common. In those systems the text is actually stored as English letters and symbols; it only looks like Bangla because a special font draws Bangla shapes over them. That works on one computer for printing. On the web it fails:

• A visitor who does not have that exact font sees random Latin characters.
• Google reads the stored letters, not the shapes, so the page cannot be found for Bangla searches.
• Copying, sharing on Facebook and screen readers all produce nonsense.

Unicode gives every Bangla letter its own code, so the text means the same thing on every device. If your price lists, notices or product details come from older files, convert them to Unicode before they go on the site, then proofread the result, because conversion tools sometimes misplace vowel signs or break conjuncts. And never put them on the site as images; that hides the words from search engines and screen readers.

Why the font matters more for Bangla

Bangla is what typographers call a complex script. Consonants combine into conjuncts (juktakkhor). Vowel signs sit before, after, above or below the consonant they belong to. The headline (matra) runs along the top and joins the letters of a word. The font and the browser's text-shaping engine must handle all of this together, and a poorly made font shows it quickly: a visible hasanta where a conjunct should be, a vowel sign in the wrong place, or a broken headline.

When you choose a font:

• Test it with real sentences that include difficult conjuncts and vowel combinations, not only your company name or placeholder text.
• Check it at small sizes on an ordinary phone, not only in a large heading on a big monitor.
• Make sure it has the weights you need and includes Bangla digits and the taka sign if you use them.
• Read the licence before using a font on a commercial website.

Google Fonts offers several free Bangla families, such as Noto Sans Bengali, which make a reasonable starting point.

Typography settings that suit Bangla

Bangla letters carry more detail above and below the line than Latin letters, so English defaults often feel cramped.

• Size: Bangla body text usually needs to be a little larger than English text to be equally comfortable on a phone. Judge it on a real mid-range phone.
• Line height: give lines more room, so vowel signs rising from one line do not touch those hanging from the line above.
• Weight: very thin weights break up on low-quality screens. Use a regular weight for body text and keep bold for emphasis.
• Letter spacing: keep it at zero. Extra space between letters breaks the headline that joins a Bangla word.
• No fake italics: Bangla has no traditional italic form, and slanted text generated by the browser looks distorted. Use bold or colour for emphasis.
• Alignment: fully justified paragraphs can open uneven gaps in Bangla lines. Left-aligned text is usually safer.

Mixing Bangla and English on one page

Most Bangladeshi sites mix scripts: an English brand name inside a Bangla sentence, or Bangla product names on an English page. Pick an English font and a Bangla font that look comfortable together in weight and height, and set them up so each script is drawn by its own font. Decide whether a page shows Bangla or English digits and stay consistent. In forms, accept phone numbers typed in either kind of digit and convert them behind the scenes, because customers will use both.

If you are building a site in both languages, the decisions go beyond fonts; see planning a Bangla and English website.

Bangla fonts are heavier, so watch the speed

A Bangla font file is usually larger than a Latin one because it holds many more shapes. On mobile data that delay shows up as invisible or jumping text. Load only the weights you actually use, serve compressed modern font formats, and let the text appear in a fallback font while the web font loads. If your pages are already slow, start with fixing a slow website on mobile data.

A quick check for your own site

1. Copy a Bangla paragraph from your site into a plain text editor. If it turns into gibberish, it is not Unicode.
2. Read a full paragraph on an inexpensive Android phone.
3. Look closely at the conjuncts and vowel signs in your headings.
4. Check that product descriptions and offers are text, not images. For producing them well in both languages, see Bangla and English product content.
5. Make sure every Bangla page is marked as Bangla in the page code.

Good Bangla typography is part of how I build sites; if yours needs attention, see my web development service.