كيف تختار خطوط الهوية؟ دليل بناء Typography System للعلامة التجارية

ما الذي يضيفه نظام الخطوط؟

نظام الخطوط يربط كل قرار بوظيفة: عنوان رئيسي، عنوان قسم، فقرة، زر، تسمية حقل أو تعليق. ويحدد الفروق بين هذه الأدوار دون أن يصبح كل عنصر كبيرًا أو عريضًا.

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

اختبر العربية والإنجليزية كزوج واحد

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

افحص شكل الحروف والتشكيل واتصال العربية والمساحات الداخلية ومستوى السطر. يمكن استخدام عائلة تدعم النصين أو عائلتين متكاملتين، لكن لا تؤجل اختيار الإنجليزية إلى ما بعد اعتماد العربية.

مثال للاختبار: IBM Plex Sans Arabic وIBM Plex Sans

تقدم عائلة IBM Plex خطوطًا عربية ولاتينية ضمن مشروع واحد، ولذلك تصلح كنقطة بداية لاختبار التناسق. هذا مثال وليس توصية تلقائية لكل علامة، ولا يعني تغيير الخطوط الحالية لموقع الوسام.

كوّن قائمة قصيرة، وطبق كل خيار على الصفحة نفسها. قارن وضوح النص العربي الطويل، والأزرار، والأسعار، والعنوان الإنجليزي، ثم راجع الأوزان المتاحة في ملفات الخط الفعلية. احفظ المصدر والإصدار والترخيص مع قرار الاعتماد.

ابنِ تسلسلًا واضحًا للأحجام والأوزان

ابدأ بعدد محدود من الأدوار. يمكن للنص الأساسي أن يستخدم Regular، وللتسميات Medium، وللعناوين Semibold أو Bold، حسب العائلة. لا تحمل أوزانًا إضافية دون وظيفة واضحة، ولا تعتمد على تغليظ اصطناعي بدل ملف الوزن الصحيح.

الجدول التالي مثال بداية لصفحة محتوى، وليس معيارًا عامًا أو مقاسات إلزامية. اختبره مع الخط الفعلي وطول العناوين واللغة؛ فاللوحات التشغيلية والبطاقات الصغيرة تحتاج أحجامًا أقل من العناوين التحريرية.

المسافات والقراءة على الشاشات الصغيرة

ارتفاع السطر وطول الفقرة والمسافة بينها لا تقل أهمية عن حجم الخط. يمكن البدء بارتفاع سطر يقارب 1.7 إلى 1.8 للنص العربي الطويل، ثم التعديل حسب العائلة والتشكيل. العناوين القصيرة تحتاج إيقاعًا مختلفًا.

استخدم أحجامًا محددة لكل نقطة انتقال، مع وحدات rem عند التنفيذ لإتاحة استجابة أفضل لتفضيلات الخط. اسمح بالتفاف العنوان، ولا تصغر النص الأساسي إلى حد يصعب قراءته. راجع أطول كلمة، والجداول، والأزرار على عرض هاتف فعلي.

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

RTL والنص المختلط ليسا مجرد محاذاة يمين

حدد lang="ar" وdir="rtl" للصفحة العربية، وتعامل مع المقاطع الإنجليزية والأرقام والروابط ضمن سياقها الصحيح. استخدم العزل الاتجاهي مثل bdi عند الحاجة، واختبر البريد الإلكتروني وأرقام الهاتف وSKU والأسعار.

لا تنقل تباعد الحروف اللاتينية إلى العربية بصورة آلية. ابدأ بتباعد عادي دون إضافات، وحافظ على اتصال الحروف والتشكيل. اختبر المخرجات داخل المتصفح لا في برنامج التصميم فقط.

<p lang="ar" dir="rtl">
  رقم المنتج: <bdi dir="ltr">AW-2035</bdi>
</p>

إمكانية الوصول: اختبر التباين والتكبير والمسافات

لا يكفي أن يبدو الخط جيدًا للمصمم. راجع التباين، ولا تستخدم وزنًا شديد النحافة للنصوص المهمة. يحتاج النص العادي إلى 4.5:1 في WCAG AA، والنص الكبير إلى 3:1؛ لكن نجاح التباين وحده لا يثبت توافق الصفحة بالكامل.

اختبر تكبير النص إلى 200% دون فقد المحتوى أو الوظائف. واختبر تحمل تعديل ارتفاع السطر إلى 1.5 مرة، والمسافة بعد الفقرة إلى مرتين حجم الخط، وتباعد الحروف إلى 0.12em والكلمات إلى 0.16em حيث تنطبق هذه الخصائص على اللغة والكتابة.

معيار Text Spacing لا يفرض هذه القيم كتصميم افتراضي؛ بل يطلب عدم فقد المحتوى أو الوظائف عندما يطبق المستخدم تعديلات المسافات المحددة. تحقق خصوصًا من العناوين والأزرار ورسائل النماذج.

الأداء والخطوط المتغيرة والخط البديل

حمّل العائلات والأوزان التي تستخدمها فعلًا، واستخدم WOFF2 عندما يتوفر في مسار النشر. حدد خطًا بديلًا مناسبًا وسلوك تحميل مثل font-display، ثم اختبر بطء الشبكة وفشل تحميل الخط وتغير تخطيط الصفحة.

الخط المتغير قد يجمع نطاق أوزان في ملف واحد، لكنه ليس أسرع تلقائيًا في كل مشروع. قارن حجم الملفات الفعلي بالحاجة. استخدم خصائص مثل font-weight للتحكم في المحاور القياسية عندما تكون مناسبة، واحتفظ بالتحكم المنخفض المستوى للحالات التي تحتاجه.

التراخيص والطباعة وتسليم النظام

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

في الطباعة، اعتمد الحجم بالنقاط واختبر عينة بالحجم النهائي. تحقق من التضمين أو التقسيم الجزئي للخط داخل PDF وفق صلاحياته، ومن إعدادات المطبعة. قواعد الويب لا تنتقل كما هي إلى كتيب أو لوحة خارجية.

سلم العائلات والإصدارات والأوزان، ومقاييس الويب والطباعة، وقواعد العربية والإنجليزية، والخطوط البديلة، وأمثلة صحيحة وخاطئة، مع مصدر واحد للقيم بين التصميم والكود.

هل الخط يؤثر على SEO وGEO؟

لا يوجد خط يضمن تصدّر Google أو الاستشهاد في إجابات الذكاء الاصطناعي. الفائدة العملية تأتي من محتوى واضح قابل للقراءة والوصول، وعناوين دلالية منظمة، ونص حقيقي في HTML بدل تحويل الفقرات إلى صور.

استخدم H1 وH2 بحسب بنية المحتوى، لا بحسب حجم الخط الذي تريده؛ الحجم تضبطه CSS. واختبر الأداء واللغة والروابط الداخلية، مع تجنب حشو الكلمات المفتاحية أو نسب التحسن غير المدعومة.