اختيار الخط العربي في تصميم الويب أصعب من اختيار الخط اللاتيني: حروف العربية متصلة، تتغير شكلاً حسب الموضع، وتعتمد على نقاط دقيقة. الخط الخاطئ يجعل النص الطويل مرهقاً، التطبيق غير احترافي، والقراءة على الهاتف صعبة. هذا الدرس يقدم منهجية في 8 خطوات لاختيار وتنسيق الخطوط العربية، مع أمثلة CSS عملية ونصائح أداء.
المتطلبات
- متصفح حديث مع DevTools
- محرر كود
- (اختياري) أداة Figma لتجربة الخطوط
- الوقت المقدر: ساعة ونصف
الخطوة 1 — فهم عائلات الخطوط العربية
أربع عائلات تاريخية رئيسية، كل واحدة لها غرض مختلف. فهمها أساسي لاختيار الخط المناسب للسياق.
| العائلة | الوصف | الاستخدام الموصى |
|---|---|---|
| Naskh (نسخ) | كلاسيكي، مقروء، متوازن | النصوص الطويلة، المقالات |
| Kufi (كوفي) | هندسي، حديث | العناوين، الشعارات |
| Diwani (ديواني) | زخرفي، مائل | الدعوات، التصاميم الفنية |
| Ruqaa (رقعة) | مكتوب باليد، سريع | التطبيقات اليومية |
للويب الحديث، Naskh و Kufi هما الخيارات العملية. Diwani و Ruqaa جميلان لكن غير ملائمين للقراءة على الشاشة. الخطوط الحديثة (Cairo، Tajawal) تستوحي من Kufi مع تعديلات للقراءة الرقمية. ابدأ Naskh للنصوص، Kufi المعدّل للعناوين.
الخطوة 2 — الخطوط الموصى بها في 2026
كل الخطوط أدناه مجانية ومتاحة عبر Google Fonts. لائحة أكثر من 50 خطاً عربياً مفتوح المصدر، لكن هذه السبعة تغطي 95% من الحالات.
| الخط | العائلة | الأنسب لـ |
|---|---|---|
| Cairo | Kufi معدّل | عام، يوازن بين عربي وإنجليزي |
| Tajawal | Kufi نحيف | الأنيق، الفخم |
| Noto Sans Arabic | Naskh حديث | القراءة الطويلة، الأخبار |
| IBM Plex Sans Arabic | هندسي | الواجهات التقنية، الـ B2B |
| El Messiri | Kufi مزخرف | الدعاية، الإعلانات |
| Almarai | Kufi نقي | العناوين الكبيرة |
| Reem Kufi | Kufi خفيف | التصاميم البسيطة |
Cairo هو الخيار الافتراضي الذكي: يبدو احترافياً في معظم السياقات، يوازن جيداً مع نص بالإنجليزية، ويعمل في الأحجام الصغيرة (12-14px) مثل الكبيرة (32px+). إن لم تستطع التفكير في خط، استخدم Cairo وتقدّم. التحسين لاحقاً.
الخطوة 3 — تحميل عبر Google Fonts
Google Fonts هو CDN المجاني الأكثر شيوعاً للخطوط العربية. يقدم خاصية « subsetting » التي تحمّل فقط الحروف المستخدمة، ما يقلل الحجم بنسبة 70-80%.
<!-- في <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap&subset=arabic" />
<!-- استخدام في CSS -->
<style>
body { font-family: "Cairo", system-ui, sans-serif; }
</style>ثلاث ملاحظات مهمة. preconnect يفتح اتصال مسبق مع Google Fonts، يوفر 50-150ms على أول طلب. display=swap يعرض النص بخط النظام أولاً ثم يستبدله بالخط العربي عند تحميله — يمنع « النص المخفي » أثناء الانتظار. subset=arabic ضروري للأداء — بدونه يحمّل 80+ كيلوبايت إضافية لكل اللغات.
الخطوة 4 — الإيقاع الطباعي
line-height للنص العربي يجب أن يكون أعلى من اللاتيني. السبب: الحروف العربية تحتوي نقاطاً تحتاج فضاء عمودي. القاعدة: 1.7-1.8 للعربية، مقابل 1.5 للاتيني.
body {
font-family: "Cairo", system-ui, sans-serif;
font-size: 16px;
line-height: 1.75; /* أعلى من اللاتيني */
letter-spacing: 0; /* لا تستخدم مع العربية */
word-spacing: 0.05em; /* فراغ خفيف بين الكلمات */
}
h1 { font-size: 2rem; line-height: 1.4; font-weight: 700; }
h2 { font-size: 1.5rem; line-height: 1.5; font-weight: 600; }
p { font-size: 1rem; line-height: 1.75; }تجنب letter-spacing الموجب على العربية — يكسر الاتصالات بين الحروف ويجعل الكلمات تبدو مفككة. القيمة الوحيدة المقبولة هي 0 أو سالبة طفيفة. للعناوين الكبيرة (32px+)، قد تحتاج letter-spacing: -0.02em لإحكام الحروف بصرياً.
الخطوة 5 — مزج العربية مع اللاتينية
كثير من المواقع العربية تحتوي مصطلحات إنجليزية (Google، API، CSS). الخط العربي يجب أن يبدو متناسقاً مع خط اللاتينية. حلان:
/* الحل 1: خط واحد يدعم الاثنين */
body { font-family: "Cairo", "Inter", sans-serif; }
/* Cairo يعرض العربية، Inter يعرض اللاتينية */
/* الحل 2: خطّان مختارتان للتناغم */
@font-face { font-family: "Mixed"; src: ...; unicode-range: U+0600-06FF; } /* عربي */
@font-face { font-family: "Mixed"; src: ...; unicode-range: U+0000-00FF; } /* لاتيني */
body { font-family: "Mixed", sans-serif; }Cairo + Inter هو الزوج الأكثر تناغماً للمواقع التقنية. Tajawal + Source Sans Pro للمواقع الأنيقة. Noto Sans Arabic + Noto Sans للمواقع الإخبارية. اختبر الزوج بكتابة جملة طويلة فيها العربية والإنجليزية معاً — يجب أن تبدو « موحّدة » بصرياً، لا كأنها قصاصتان مختلفتان.
الخطوة 6 — تحسين الأداء
الخطوط العربية أكبر من اللاتينية بسبب تنوع الأشكال. خط Cairo الكامل يصل إلى 250 KB. مع subsetting وتحسينات أخرى، يمكن خفضه إلى 50-70 KB دون فقدان مرئي.
<!-- preload الخطوط الحرجة -->
<link rel="preload"
href="/fonts/cairo-arabic-700.woff2"
as="font" type="font/woff2" crossorigin />
<!-- @font-face محلي مع unicode-range -->
<style>
@font-face {
font-family: "Cairo";
src: url("/fonts/cairo-arabic-400.woff2") format("woff2");
font-weight: 400;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F; /* عربي فقط */
}
</style>استضافة الخطوط محلياً (بدلاً من Google Fonts) تتجنب طلب شبكة إضافي وتحترم GDPR (Google Fonts تتلقى IP المستخدم). font-display: swap يمنع FOIT (Flash of Invisible Text) — مشكلة شائعة حيث يبقى النص مخفياً لثوانٍ. للمواقع المهمة، فكر في self-hosting عبر أدوات مثل google-webfonts-helper.
الخطوة 7 — الوصولية والقراءة
القاعدة الأهم: لا تستخدم خطاً صغيراً جداً للنصوص الطويلة. الحد الأدنى المقبول للنص العربي: 16px (متن المقال). أصغر من ذلك يرهق العين، خاصة للقراء فوق 40 سنة.
| السياق | الحد الأدنى | الموصى |
|---|---|---|
| متن نص طويل | 16px | 17-18px |
| عناوين H1 | 28px | 32-36px |
| تسميات (caption) | 14px | 14-15px |
| أزرار CTA | 14px | 16px |
| طباعة فاتورة | 12px | 14px |
التباين أيضاً مهم: نص رمادي #999 على خلفية بيضاء فاشل في WCAG. النص العربي بحاجة إلى تباين أعلى من اللاتيني بسبب رقة الأشكال. التزم بـ #1a1a1a للنصوص أو أغمق على خلفية فاتحة. عرض السطر (line-length): 60-80 حرفاً للقراءة المريحة. استخدم max-width: 70ch على فقرات النص.
الخطوة 8 — اختبار التصميم
قبل الإطلاق، اختبر على ثلاث أجهزة: شاشة كبيرة (1920×1080)، لابتوب (1366×768)، هاتف (375×667). الخط الذي يبدو ممتازاً على شاشة Mac قد يكون كارثياً على هاتف Android بشاشة LCD رخيصة.
# أدوات اختبار سريعة:
- Chrome DevTools → Device Mode (Pixel 5، iPhone 12)
- BrowserStack (مدفوع، يختبر على أجهزة فعلية)
- اطلب من 5 أصدقاء أرسال لقطات من هواتفهم
# علامات المشاكل:
- نقاط الحروف غير واضحة في 14px → كبّر إلى 16px
- نص يقطع غير طبيعي → افحص line-height
- مسافات بين الكلمات سيئة → اضبط word-spacingأفضل اختبار: اقرأ مقالاً كاملاً (1000 كلمة) من تصميمك على هاتفك في الشمس. إن واجهت إرهاقاً قبل النهاية، صمم خطئك. الإحساس بالإرهاق هو المؤشر الأهم على نجاح التيبوغرافيا — أكثر دقة من أي قياس تقني.
أخطاء شائعة
| المشكلة | السبب | الحل |
|---|---|---|
| خط صغير 12-13px | محاكاة تصميم اللاتيني | 16px على الأقل للعربية |
| line-height منخفض 1.4 | إعداد افتراضي | 1.7-1.8 للعربية |
| letter-spacing موجب | إفساد بصري | 0 أو سالب طفيف فقط |
| FOIT (نص مخفي) | غياب font-display | أضف font-display: swap |
| Google Fonts بطيء | طلب شبكة كل مرة | self-hosting + preload |
| مزج خطوط متنافرة | اختيار عشوائي | اختبار الزوج بجملة مختلطة |
للمزيد
- Google Fonts العربية fonts.google.com
- Khotot.com — كتالوج كامل khotot.com
- دليل التيبوغرافيا العربية arabictypography.com
- google-webfonts-helper helper
- FontPair (اختبار الأزواج) fontpair.co