Turkish typography on the web: from the İ/ı problem to line breaks

Among the languages that use the Latin alphabet, Turkish is one of the most demanding when it comes to typography. The reason isn't only the confusion caused by the dotted and dotless i; managing line breaks, abbreviation rules and uppercase conversions all carry traps specific to Turkish. Ignoring these traps on the web produces text that is technically readable but visually careless.

The İ/ı problem: why it matters

Turkish has four separate i letters: uppercase dotted İ, lowercase dotted i, uppercase dotless I, and lowercase dotless ı. The CSS text-transform: uppercase transform can turn an "i" into an "I" depending on the browser's language setting — yet in Turkish the uppercase of "i" is "İ." This mistake shows up often in headings and labels set in capitals. The fix is simple: critical text isn't left to the CSS transform, it's written with the correct character in the HTML.

• Turkish text shouldn't be uppercased with text-transform: uppercase — it produces the wrong "I."
• Headings should be written with the correct capitals in the HTML: "İstanbul," "Şirket."
• The font should include Turkish character support (the Latin Extended-A block).
• Images containing "ğ," "ş," "ç," "ö," "ü" should be produced as SVG or text, not baked into a PNG.

Line breaks and word wrapping

Turkish is an agglutinative language; words can grow by taking on suffixes. These long words can occupy a line on their own in narrow columns or cause overflow. When CSS's word-break and overflow-wrap properties aren't set correctly, Turkish paragraphs spill the last word outside the box and break the visual integrity. This happens more often in the mobile view, because the column width narrows.

Turkish support in font choice

Not every Latin-alphabet font supports Turkish fully. Some fonts don't include characters like "ğ" or "ş," or they borrow these characters from a different font — which creates subtle but noticeable style differences between letters. Confirming that the "Latin Extended-A" Unicode block is supported when choosing a font prevents this kind of surprise up front. If you're choosing through Google Fonts, the character map preview makes this check easy.

Typography isn't decoration on its own; it's the foundation of readability. So handling font and text decisions as part of the interface design process from the very start is always healthier than patching it afterward.