Lesson 6 / الدرس 6
Making a paragraph readable / جعل الفقرة مقروءة
Two numbers decide whether a block of text is comfortable or exhausting, and neither is the font size: how long the lines are, and how far apart they sit. Both are usually wrong by default.
رقمان يقرران: أمريحة كتلةُ النص أم مرهقة؟ وليس أيّهما حجم الخط: طول الأسطر، وكم تتباعد. وكلاهما خاطئ افتراضيًا عادةً.
Reading is the eye moving along a line and then jumping back to find the start of the next one. Everything comfortable or uncomfortable about a paragraph comes from how easy that return journey is. Too long and the eye loses the line on the way back; too short and it makes the journey so often that the rhythm breaks.
The two numbers
| Comfortable | What goes wrong outside it | |
|---|---|---|
| Line length | 60–75 characters | Over 90: the eye loses its place returning. Under 45: choppy |
| Line height | 1.5–1.7 for body | Under 1.4: lines merge. Over 1.9: they stop being a paragraph |
| Line height, headings | 1.1–1.25 | The same 1.6 that suits body text makes a heading fall apart |
| Paragraph gap | About one line height | Less and paragraphs merge; more and they float apart |
Line length is set with max-width in ch units — 65ch is literally sixty-five characters — which is the one place a CSS unit means exactly what the typographic rule means.
max-width بوحدة ch — فـ65ch خمسة وستون حرفًا حرفيًا — وهو الموضع الوحيد الذي تعني فيه وحدةُ CSS ما تعنيه القاعدة الطباعية بالضبط.<div style="font-family:system-ui; font-size:16px">
<p style="line-height:1.2">
A paragraph with no maximum width and tight leading. On a wide screen the
lines run the full width of the window, and by the time the eye reaches the
end of one it has to travel a long way back to find the beginning of the
next. Notice yourself losing your place, and notice that the font size has
nothing to do with it.
</p>
</div>
<hr>
<div style="font-family:system-ui; font-size:16px">
<p style="max-width:65ch; line-height:1.6">
The same words, capped at sixty-five characters with comfortable leading.
The return journey is short and predictable, so the eye finds the next line
without searching for it. Nothing changed except two numbers, and neither
of them was the size of the type.
</p>
</div>Arabic wants more room between lines
Arabic letters carry marks above and below the line — dots, hamzas, and any vowel marks if the text is voweled. At a Latin line height those ascenders and descenders from adjacent lines come close enough to interfere. Arabic body text usually wants 1.7 to 1.9 where Latin is comfortable at 1.5, and a bilingual page that sets one value for both is choosing which script to serve.
max-width بالبكسل لا يتكيّف. استخدم ch ودعه ينكمش — وانظر دائمًا إلى فقرتك بعرض 360 بكسل قبل أن تعدّها منتهية، فهناك معظم قرّائك.Try it live / جرّب بنفسك
Check yourself / اختبر نفسك
1. Why is a very long line uncomfortable to read?
The cost is in the return journey, not in the reading. Past about 90 characters the eye starts landing on the wrong line, which is experienced as tiredness rather than as a layout problem.
2. Why does Arabic body text usually need a larger line height than Latin?
Dots, hamzas and vowel marks occupy the space between lines. At a Latin line height they crowd the line above and below, so the same value that is comfortable in English is tight in Arabic.
3. Which unit expresses a line-length rule most directly?
The rule is stated in characters and ch is measured in characters, so the code says exactly what the typographic principle says — and it stays correct when the font or its size changes.
ch تُقاس بالحروف، فيقول الكود بالضبط ما يقوله المبدأ الطباعي — ويظل صحيحًا حين يتغير الخط أو حجمه.Score / النتيجة: 0 / 3
Your task / مهمتك
Set the same paragraph twice in English and twice in Arabic — once at the browser defaults and once tuned. Then write down the four numbers you settled on and why the Arabic ones differ.
اضبط الفقرة نفسها مرتين بالإنجليزية ومرتين بالعربية — مرة بإعدادات المتصفح الافتراضية ومرة مضبوطة. ثم اكتب الأرقام الأربعة التي استقررت عليها ولماذا اختلفت أرقام العربية.
- Both scripts shown, before and after tuning الكتابتان معروضتان، قبل الضبط وبعده
- Line length capped in ch, not px طول السطر محدود بـch لا بالبكسل
- The four numbers stated, with a reason for the Arabic difference الأرقام الأربعة مذكورة، مع سبب اختلاف العربية