Line height and weight for Arabic text

01Why Arabic needs more room

Arabic letters have tall ascenders, deep descenders and marks that can stack above and below the line. With a tight line height, these parts collide with neighbouring lines. The result is dense, tiring text.

Line height is therefore a legibility setting, not a style choice. A value copied from a Latin design system often looks cramped once Arabic text is placed in it.

02Line height

Body text in Arabic often works well with a line height of around 1.6 to 1.8, compared with a lower value that may be fine for Latin. Treat this as a starting range, not a rule. Fonts differ, so adjust it by eye with real paragraphs.

Headings need less room than paragraphs, but they still need more than a typical Latin heading. Buttons, table cells and tabs also need checking, because a fixed height can clip marks above and below the letters.

Use a unitless value such as <code>line-height: 1.7</code> so it scales with the font size.

03Weight and size

• Avoid very thin weights for body text. Thin strokes lose the small details that tell letters apart.
• Arabic often looks smaller than Latin at the same <code>font-size</code>. In a bilingual interface, compare both scripts next to each other and test a slightly larger Arabic size.
• Pick a regular weight for body text, then use medium or bold for emphasis. Very heavy weights fill in the small counters inside letters and reduce clarity.
• Use weight and size for emphasis. Check contrast too, because thin text on a light background is harder to read.

04Italics, justification and line length

• No italics or uppercase

  Arabic has no italic or uppercase forms. Faking a slant distorts the letters, so use weight or colour for emphasis.

• Justification and kashida

  Justified Arabic traditionally stretches letters with kashida. Browser support is limited, so justified text can leave uneven gaps. Start-aligned text is the safer default.

• Comfortable line length

  Keep lines in a moderate range so the eye can find the next line easily. Test on narrow phones and wide screens.

Diacritics deserve a test of their own. Short vowel marks add height above and below the letters, so a line height that looks fine for unmarked text can clip or crowd marked text such as in educational or religious content.

Paragraph spacing helps as well. Add clear space between paragraphs, and use headings and lists to break long text, because Arabic columns without these breaks look like one dense block.

Test with long, real Arabic paragraphs including diacritics, not a single short line.

05Sources

• MDN Web Docs. line-height. https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
• W3C. Arabic layout requirements. https://www.w3.org/TR/alreq/