The problem in one sentence

Nastaliq stacks three levels of vertical movement — descenders that dive far below the baseline, diacritics that stack high above, and a sloping baseline that makes every word sit lower than the one before it — while CSS treats a line of text as a tidy box with roughly one line-height of height.

The result, if you do nothing: clipped diacritics, words colliding with the line above, and layout that jumps when the webfont finally loads.

Rule 1: line-height is not optional

Default line-height: 1.5 — comfortable for Latin — is a catastrophe in Nastaliq. Real-world values:

For dense Nastaliq (Jameel-style deep descenders) start at 2.4–2.6 and test with real sentences, not lorem-ipsum substitutes. Diacritics (اعراب) are the tallest elements — if you are typeset Quranic or formal text with full vocalization, add even more.

Rule 2: give the swap somewhere to happen

font-display: swap shows fallback text while the webfont loads — correct for usability, but it means layout must survive both fonts. Nastaliq files are also big (a full Noto Nastaliq Urdu is several hundred KB even as WOFF2; Naskh faces are a fraction of that). So:

unicode-range does two jobs here: the browser skips the download entirely for Latin-only pages, and when Urdu is present, only the needed font loads.

Reserve vertical space for the final font — a min-height on the text container sized for the loaded font's metrics (we do exactly this on our own font pages) so the swap does not shove the page down. Readers hate layout shift more than they hate a slow font.

Rule 3: pick a fallback that flatters the design

While the Nastaliq downloads, users see the fallback. Order matters:

A Naskh fallback is upright and readable; serif alone can render disconnected, broken letterforms on some platforms. Never let the browser fall all the way back to a Latin font for Arabic-script text — you get boxes.

Rule 4: overflow — plan for depth

Nastaliq words can descend below the text box and overlap what follows. Three defences:

• padding-block on containers holding Nastaliq (more at the bottom). • overflow: visible (or no clipping) wherever a single large display line appears — hero headings especially. • Avoid overflow: hidden on text cards containing Urdu; if you must clip, test with the deepest words you expect, not average ones.

Rule 5: justification and kashida

CSS text-align: justify spaces Arabic-script text by inserting gaps between words — visually acceptable in Naskh, jarring in Nastaliq, whose aesthetic is the flowing connection. Kashida-style justification ( text-justify: kashida ) has essentially no cross-browser support. For short display text, prefer centered or right-aligned; for body text, plain justify with generous line-height, or none at all.

Which web Nastaliq, today

• Noto Nastaliq Urdu — the reference: engineered for the web, variable weight, maintained by Monotype/Google. • Gulzar — designed for Punjabi Shahmukhi first, excellent for Urdu too, SIL-maintained. • Nafees Nastaleeq — CLE's classic, beloved in Pakistan; a desktop-first file that still performs on the web.

And before you commit any of them to a multilingual project, run the candidates through the language coverage benchmark — it checks, from the font files themselves, that every letter your language needs is actually in the font.

The 60-second checklist

1. line-height: 2.2+ (2.4 for deep cuts, more for vocalized text) 2. font-display: swap + unicode-range for the Arabic blocks 3. Naskh-named fallback before generic serif 4. Reserve height so the swap cannot shift layout 5. No overflow: hidden on Urdu text cards 6. Test with a real paragraph, at the real size, on a real phone