أداة تنسيق الخطوط Typography
جرّب بنفسك
الإعدادات
القيمة الحالية: 18px
CSS الناتج
font-family: 'Tajawal', sans-serif;
font-size: 18px;
font-weight: 400;
font-style: normal;✅ تم النسخ
المعاينة
غيّر النوع والحجم والوزن والنمط وشاهد الفرق
جرّب خطوط عربية مختلفة لترى أفضل قراءة
تنسيق النصوص (Typography)
النصّ هو 95% من أي موقع، ومع ذلك يهمله المبتدئ. تنسيق الخطوط الجيّد لا يجعل الصفحة أجمل فقط، بل أسهل قراءة وأقلّ إرهاقًا للعين — وهذا يبقي الزائر أطول ويجعله يفهم أكثر.
أهم قرار في التنسيق ليس نوع الخط، بل ارتفاع السطر والمسافات. نصّ بخطّ عادي ومسافات مريحة يُقرأ أفضل من نصّ بخطّ فاخر مزدحم.
🔑 اربطها بشيء تعرفه
تنسيق النص كترتيب الطعام في الطبق: المكوّنات نفسها، لكن التقديم المريح يجعلها شهيّة. ارتفاع السطر هو المسافة بين الأسطر — كالمسافة بين صفوف الكراسي: ضيّقة تخنق، وواسعة تريح.
متى تستخدمها؟
المقالات والمحتوى الطويل
ارتفاع سطر مريح (1.6–1.8) وعرض سطر محدود يمنعان إرهاق العين.
العناوين
وزن ثقيل وتباعد حروف مضبوط يمنحانها حضورًا.
الأزرار والعناصر الصغيرة
تباعد حروف خفيف يزيد الوضوح.
المحتوى العربي
العربية تحتاج ارتفاع سطر أكبر قليلًا من اللاتينية بسبب التشكيل والنقاط.
خصائص الخطوط
| الخاصية | ماذا تفعل؟ | قيم شائعة |
|---|---|---|
| font-size | حجم الخط. | 1rem / 24px |
| line-height | المسافة بين الأسطر — الأهم للقراءة. | 1.6 / 1.8 |
| font-weight | ثقل الخط. | 400 / 700 |
| letter-spacing | المسافة بين الحروف. | 0.5px / -0.5px |
| text-align | محاذاة النص. | right / justify |
| color | لون النص — التباين مهمّ للقراءة. | #333 / #111 |
مثال عملي
إعداد مريح لنصّ مقال عربي:
.article {
font-size: 1.125rem; /* أكبر قليلًا للراحة */
line-height: 1.8; /* تنفّس بين الأسطر */
max-width: 65ch; /* عرض سطر مريح */
color: #1f2937; /* ليس أسود صريحًا */
}وحدة ch تعادل عرض حرف تقريبًا، و65ch عرض سطر مثالي للقراءة. السطر الطويل جدًا يُتعب العين في العودة إلى بدايته.
أخطاء شائعة
- 1. ارتفاع سطر ضيّق (1.2 أو أقل) في المحتوى الطويل: يجعل النصّ مزدحمًا مرهقًا. استعمل 1.6–1.8 للنصوص.
- 2. أسود صريح (#000) على أبيض صريح: تباين حادّ يُتعب العين. استعمل رماديًا داكنًا مثل #1f2937.
- 3. سطر بلا حدّ عرض: على الشاشات العريضة يصير السطر طويلًا جدًا فتضيع العين. حُدّه بـ
max-width.
كيف تستفيد من الأداة أعلاه؟
حرّك مؤشّرات الحجم وارتفاع السطر وتباعد الحروف في الأداة أعلاه، واقرأ النصّ في كل مرة. ستشعر بنفسك متى يصير مريحًا ومتى يصير مزدحمًا — القراءة أصدق من الأرقام.
أسئلة شائعة
ch). أطول من ذلك يُتعب العين في العودة لبداية السطر، وأقصر يقطع تدفّق القراءة. max-width: 65ch نقطة مريحة. letter-spacing قد تكسر اتصال الكلمة وتشوّهها. استعمله للعناوين اللاتينية أكثر من المتون العربية.