شرح المسافات في CSS — كيف تضبط line-height و letter-spacing لقراءة أفضل؟

في تصميم الواجهات، جودة المسافات أهم من كثرة الألوان. النص الجيد ليس فقط اختيار خط جميل، بل أيضاً ضبط المسافة بين الأسطر والحروف والكلمات.

إذا كنت تبحث عن شرح line-height في CSS أو أفضل قيمة letter-spacing في CSS أو الفرق بين line-height و word-spacing، فهذا الدرس عملي ومباشر.

ما هي مسافات النص في CSS؟

CSS توفر 3 خصائص رئيسية لضبط مسافات النص:

• line-height: المسافة بين أسطر الفقرة.
• letter-spacing: المسافة بين الحروف.
• word-spacing: المسافة بين الكلمات.

التعريف البسيط: Text Spacing في CSS هو التحكم في الفراغات داخل النص لتحسين القراءة والوضوح.

line-height في CSS (أهم خاصية للقراءة)

خاصية line-height تحدد المسافة العمودية بين الأسطر. هي أهم خطوة لتحسين تجربة القراءة في الفقرات الطويلة.

p {
    line-height: 1.6;
}

ماذا يفعل هذا الكود؟ يجعل أسطر الفقرة متباعدة بشكل مريح.

سطر بسطر:

• p: يستهدف الفقرات.
• line-height: 1.6;: يضبط تباعد الأسطر بنسبة 1.6 من حجم الخط.

النتيجة المتوقعة: انتقال أسهل للعين بين الأسطر وتقليل الإجهاد أثناء القراءة.

خطأ شائع: استخدام line-height: 1 في نصوص طويلة فيصبح النص مزدحماً.

letter-spacing في CSS (المسافة بين الحروف)

خاصية letter-spacing تزيد أو تقلل المسافة بين الحروف. تُستخدم غالباً مع العناوين الإنجليزية أو الشعارات.

h3.brand {
    letter-spacing: 4px;
}

ماذا يفعل هذا الكود؟ يوسع المسافة بين الحروف لإبراز العنوان.

النتيجة المتوقعة: مظهر أكثر فخامة في العناوين القصيرة.

خطأ شائع: تطبيق قيمة كبيرة على فقرات طويلة فيصعب قراءتها.

word-spacing في CSS (المسافة بين الكلمات)

خاصية word-spacing تتحكم بالمسافة بين الكلمات كاملة، وليس الحروف. يمكن استخدامها في العناوين أو النصوص الزخرفية بشكل خفيف.

p.note {
    word-spacing: 10px;
}

ماذا يفعل هذا الكود؟ يزيد الفراغ بين الكلمات داخل الفقرة.

النتيجة المتوقعة: تأثير بصري واضح على تباعد الكلمات.

خطأ شائع: استخدام قيمة كبيرة جداً فتبدو الجملة مفككة.

أفضل القيم العملية لمسافات النص في CSS

• line-height: غالباً بين 1.5 و1.8 للنص العربي.
• letter-spacing: استخدم قيم صغيرة مثل 0.5px إلى 2px للعناوين.
• word-spacing: ابدأ بـ 2px إلى 6px حسب نوع الخط.

مثال عملي كامل في CSS

HTML:

<h3 class="title">web typography</h3>
<p class="article">هذا نص عربي يشرح كيف تؤثر المسافات على قابلية القراءة في المواقع.</p>

CSS:

.title {
    letter-spacing: 2px;
    text-transform: uppercase;
}

.article {
    line-height: 1.7;
    word-spacing: 3px;
}

ماذا يفعل هذا المثال؟ يوازن بين إبراز العنوان وتحسين قراءة الفقرة.

النتيجة المتوقعة: نص أكثر ترتيباً واحترافية.

خطأ شائع: تطبيق نفس القيم على كل النصوص دون مراعاة نوع المحتوى.

أخطاء شائعة في line-height و letter-spacing و word-spacing

١) خط مزدحم: line-height منخفض جداً.

٢) حروف متباعدة بشكل مبالغ: letter-spacing كبير على نصوص كثيرة.

٣) كلمات مفككة: word-spacing مرتفع بلا داعٍ.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما أفضل line-height في CSS للنص العربي؟

غالباً بين 1.5 و1.8 حسب حجم الخط ونوعه.

ما الفرق بين letter-spacing و word-spacing في CSS؟

letter-spacing بين الحروف، وword-spacing بين الكلمات.

هل letter-spacing مناسب للغة العربية في CSS؟

في الغالب لا، إلا بحذر شديد، لأن العربية لغة متصلة.

لماذا النص يبدو مزدحماً في CSS؟

غالباً بسبب line-height منخفض أو اختيار خط صغير بدون تباعد كافٍ.

كيف أحسن readability النص في CSS بسرعة؟

ابدأ بـ line-height: 1.6;، ثم اضبط حجم الخط والتباين قبل أي تأثيرات أخرى.