line-height

خاصية ارتفاع السطر line-height

خاصية line-height تضبط التباعد الرأسي بين أسطر النص — أكبر مؤثر منفرد في راحة القراءة، وللعربية وصفة أوسع.

الفارق الخفي بين نص «خانق» ونص يتنفس. القيمة الصحيحة **رقم مجرد بلا وحدة** (1.6 مثلًا = 160% من حجم الخط) — فتتناسب تلقائيًا مع كل حجم وتورث بأمان، بعكس القيم الثابتة بالبكسل التي تخنق النص الأكبر.

للعربية خصوصية: أشكال الحروف الصاعدة والنازلة والتشكيل تحتاج نفَسًا أوسع من اللاتينية — 1.7 حتى 1.9 لنصوص القراءة (هذا الموقع على 1.75)، بينما العناوين الكبيرة تُشد أقرب (1.1–1.3) كي لا تتفكك أسطرها.

الصياغة

body { line-height: 1.7; }  /* رقم بلا وحدة — الصواب */
h1  { line-height: 1.2; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .tight, .comfy { background: #ede9fe; padding: 12px; border-radius: 10px; margin-bottom: 8px; }
  .tight { line-height: 1.1; }
  .comfy { line-height: 1.8; }
</style>
<div class="tight">سطر ضيق 1.1: الأسطر العربية تتزاحم ويصعب تتبعها عند القراءة الطويلة، خاصة مع الحروف النازلة.</div>
<div class="comfy">سطر مريح 1.8: نفس النص يتنفس، والعين تنتقل بين الأسطر بلا جهد — فرق راحة كامل.</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
1.6 – 1.9	نطاق نصوص القراءة العربية المريح
1.1 – 1.3	العناوين الكبيرة — شد يمنع التفكك
رقم بلا وحدة	يتناسب مع حجم الخط ويورث بأمان — الصيغة الصحيحة
1 (مع ارتفاع الزر)	توسيط نص سطر واحد داخل عناصر مضبوطة

💡 نصائح عملية

العربية بتشكيل؟ ارفع حتى 2.0 كي لا تتصادم الحركات بالسطر الأعلى
عنوان متعدد الأسطر مفكك؟ المشكلة غالبًا line-height موروث كبير

⚠️ أخطاء شائعة

قيمة بكسل ثابتة تخنق النص عند أي تكبير
ترك 1.2 الافتراضية تقريبًا لنص عربي طويل — إجهاد قراءة مضمون

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs