R052: line-height below 1.5 on Arabic body text
Arabic diacritics, ascenders and descenders need more vertical room than Latin, so tight leading on blocks of twenty or more Arabic words makes lines touch; line-height: normal is left alone.
The check
- Id
- R052
- Category
- Typography
- Default severity
When it fires
A visible block of at least 20 Arabic words has a
line-heightunder 1.5 times its font size, so its lines collide.Fix: Raise line-height to at least 1.6 for Arabic paragraphs.
What it leaves alone
line-height: normal, which keeps the browser's default, and shorter text such as headings and labels, under 20 Arabic words. Up to eight per page.
Broken, then fixed
.article p {
line-height: 1.3;
}.article p {
line-height: 1.8;
}Check it by hand
Select the paragraph and run parseFloat(getComputedStyle($0).lineHeight) / parseFloat(getComputedStyle($0).fontSize) in the DevTools console. Under 1.5 is the finding; NaN means line-height: normal, which is left alone.
What the report shows you
Each R052 finding carries the fields below that apply to it, so you can see why it fired without rerunning the scan.
- lineHeightPx
- The computed line height, in pixels.
- fontSizePx
- The computed font size, in pixels.
- ratio
- The line height divided by the font size.
- arabicWordCount
- How many Arabic words the block holds.
More typography checks
- Arabic text falling back past the declared font family (measured, declared, or a webfont that failed to load)
- letter-spacing applied to Arabic text (breaks the connected script)
- Arabic body text below 14px
- Italic/oblique applied to Arabic text
- Latin display styling (uppercase + tracking) applied to Arabic
Does your page trip R052?
Paste a URL. Ritla renders the page on desktop, tablet and mobile, runs every check, and shows the top issues with screenshot evidence.
Scan a page freeBrowse the checks