دليل مقاسات التايبوغرافي العربي — الأحجام وارتفاع السطر وقاعدة التباعد الذهبية
تقدر تعرف المصمم اللي بيطبّق قواعد لاتينية على نص عربي من لمحة: حروف متقطعة من تباعد غلط، سطور خانقة، وتشكيل راكب على السطر اللي فوقه. العربي مش "إنجليزي بحروف مختلفة" — له فيزياء مختلفة، ومحتاج أرقام مختلفة.
ده الدليل المرجعي للأرقام دي — اللي بنطبّقه في كل مشروع، وبنيت عليه نظام المقاسات في أداة التنسيق.
القاعدة الأولى (والمقدسة): تباعد الحروف = صفر
في اللاتيني، الـ letter-spacing أداة تحسين يومية: سالب شوية للعناوين الكبيرة، موجب شوية للنصوص الصغيرة. في العربي؟ ممنوع نهائياً في النص المتصل.
السبب فيزيائي مش ذوقي: الحروف العربية متصلة ببعضها بوصلات مرسومة جوه الخط نفسه. أي tracking بيفتح مسافة جوه الكلمة الواحدة — فبيقطع الوصلات وبيحوّل "محمد" لحروف يتيمة جنب بعض.
/* القاعدة اللي بتحط في كل مشروع ثنائي اللغة */
[dir="rtl"], [lang="ar"] {
letter-spacing: 0 !important;
}
طب لو النص حاسس إنه مزنوق؟ عندك ثلاث أدوات شرعية: ارتفاع السطر، تباعد الكلمات (word-spacing)، أو ببساطة خط تاني فتحاته أوسع — دليل الخطوط بيوريك الفرق لايف.
القاعدة الثانية: العربي محتاج سُطور أعلى
الحرف العربي بياخد مساحة رأسية أكتر من اللاتيني: صواعد ونوازل أطول (ل، ج، ع...)، والتشكيل — لو موجود — بيركب فوق وتحت. النتيجة: الـ line-height اللي مريح للإنجليزي بيخلي العربي خانق.
الأرقام اللي بنشتغل بيها (ومبنية في أداتنا):
| حجم الخط | Line Height | الارتفاع الفعلي | الاستخدام |
|---|---|---|---|
| 12px | 1.75 | 21px | تسميات صغيرة |
| 14px | 1.65 | 23px | نص ثانوي |
| 16px | 1.55–1.7 | 25–27px | النص الأساسي |
| 18px | 1.5–1.65 | 27–30px | نص مريح |
| 24px | 1.4 | 34px | عناوين فرعية |
| 32px | 1.25 | 40px | عناوين |
| 48px | 1.15 | 55px | عناوين كبيرة |
| 64px+ | 1.1 | — | هيرو |
ملاحظتين: النطاق الأعلى (1.7+) للنصوص المشكولة أو الخطوط الكاليجرافية زي Amiri. والعناوين العربية بتستحمل سطور أقل من النص — بس متنزلش تحت 1.1 أبداً وإلا اللامات هتبوس الحروف اللي فوقها.
القاعدة الثالثة: سلّم مقاسات بدل المزاج
بدل ما كل صفحة يطلع فيها 14 حجم خط عشوائي، السلّم الرياضي بيشتق كل الأحجام من رقمين:
- الأساس: حجم نص القراءة — 16px نقطة البداية الكلاسيكية (للجمهور الأكبر سناً أو القراءة الكثيفة: 17–18px)
- النسبة: المعامل بين كل مستوى واللي بعده
مثال بأساس 16 ونسبة 1.25:
:root {
--text-caption: 0.8rem; /* 12.8px */
--text-body: 1rem; /* 16px */
--text-h5: 1.25rem; /* 20px */
--text-h4: 1.563rem; /* 25px */
--text-h3: 1.953rem; /* 31px */
--text-h2: 2.441rem; /* 39px */
--text-h1: 3.052rem; /* 49px */
}
اختيار النسبة حسب المشروع: 1.125–1.2 للداشبوردات والتطبيقات الكثيفة (هرمية ناعمة)، 1.25 للأغلبية (التوازن الذهبي)، 1.333+ للمواقع التسويقية (عناوين بطلة).
ومش محتاج تحسبها يدوياً: مولّد المقاسات في أداة التنسيق بيحسب السلّم كامل لأي أساس ونسبة، بيوريك العينات بخطك العربي والإنجليزي الفعليين، وبينسخلك الـ CSS جاهز بقاعدة التباعد الصفري مدمجة.
القاعدة الرابعة: وازن العربي مع اللاتيني بالعين
في المشاريع ثنائية اللغة، نفس الحجم الرقمي مش معناه نفس الحجم البصري — كتير من الخطوط العربية بتبان أصغر من شريكها اللاتيني في نفس الـ px (حسب نسب تصميم الخط نفسه).
العلاج عملي مش نظري: حط جملة عربي وجملة إنجليزي جنب بعض بنفس المقاس، وبُص. لو العربي باهت: ارفعه درجة وزن (400→500) أو خطوة حجم. أداة التنسيق معمولة بالظبط للاختبار ده — بمحتوى حقيقي ومعاينة هيرو وواجهة وتحريري.
تشيك ليست قبل التسليم
-
letter-spacing: 0مفروضة على كل النص العربي؟ - نص القراءة 16px+ بسطر 1.6+؟
- كل الأحجام من السلّم — ولا في أرقام يتيمة؟
- جربت فقرة مشكولة والتشكيل مش بيلمس السطور؟
- العربي واللاتيني متوازنين بصرياً في العناوين؟
- قريت الصفحة على موبايل حقيقي مش بس المحاكي؟
التايبوغرافي الكويس مش بيتشاف — بيتحس. ولما تظبط الأرقام دي، القارئ مش هيعرف يقولك إيه اللي اتغير... بس هيكمل قراية. وده المطلوب.
كمّل من هنا: أنواع الخطوط العربية لو لسه بتأسس، أفضل الخطوط المجانية للاختيار، وأداة التنسيق للتطبيق الحي.