Skip to content

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
medium

When it fires

  1. medium

    A visible block of at least 20 Arabic words has a line-height under 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

before.css
.article p {
  line-height: 1.3;
}
after.css
.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.

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