font: دليل الخطوط وTypography داخل التطبيق

نُشر في 2026-10-11 · آخر تحديث 2026-10-11

يؤثر font على القراءة والتسلسل البصري والهوية والأداء ودعم اللغات داخل التطبيق. يشرح هذا الدليل كيفية بناء نظام Typography ثابت، واختيار الخطوط المناسبة، وإنشاء مقياس أحجام واضح، وضبط المسافات والتجاوب، ودعم النصوص متعددة اللغات وتحسين التحميل والاختبار.

ابنِ نظام Typography واضحًا أولًا

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

افصل بين التسلسل البصري وبين الزخرفة. العنوان الجيد يجب أن يبدو أهم بسبب الحجم والوزن والمسافة والموقع، لا لأن كل صفحة تستخدم خطًا مختلفًا. عرّف أنماطًا أساسية مثل body وsmall وlabel وsubtitle وsection heading وpage heading، واربطها بمتغيرات أو tokens قابلة للتعديل. إذا احتجت لاحقًا إلى تكبير النص الأساسي أو تغيير الوزن في الوضع الداكن، تستطيع تعديل النظام من مكان واحد بدل إصلاح عشرات الشاشات يدويًا.

• حدد أدوار النص
• استخدم tokens قابلة لإعادة الاستخدام
• حافظ على التسلسل البصري
• وثق القواعد

اختر الخط حسب الوظيفة وليس الشكل فقط

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

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

• حدد أدوار النص
• استخدم tokens قابلة لإعادة الاستخدام
• حافظ على التسلسل البصري
• وثق القواعد

أنشئ مقياس أحجام ثابتًا

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

الحجم ليس العامل الوحيد. الوزن وline-height وletter-spacing ولون النص وحالة الأحرف كلها تؤثر في الأولوية البصرية. قد يكون label أصغر لكن بوزن متوسط، بينما يحتاج العنوان الكبير إلى line-height أضيق حتى لا يحتل مساحة مبالغًا فيها. النصوص الطويلة تحتاج مسافة أكبر بين السطور. الأرقام داخل الجداول قد تستفيد من أرقام متساوية العرض إذا كان الاصطفاف مهمًا. دوّن هذه القرارات حتى لا تنشأ قواعد مختلفة في كل مكوّن.

• حدد أدوار النص
• استخدم tokens قابلة لإعادة الاستخدام
• حافظ على التسلسل البصري
• وثق القواعد

اضبط المسافات وطول السطر

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

راجع الإيقاع العمودي بين العناوين والفقرات والقوائم وحقول النماذج. غالبًا يجب أن تكون المسافة أعلى العنوان أكبر من المسافة تحته حتى يفهم المستخدم أن العنوان مرتبط بالمحتوى الذي يليه. لا تستخدم فراغات عشوائية لإصلاح كل شاشة محليًا؛ استخدم spacing tokens وقواعد للمكونات. عندما يتغير حجم الخط أو line-height قد تحتاج إلى تعديل المسافات المحيطة حتى يبقى النظام متوازنًا.

• حدد أدوار النص
• استخدم tokens قابلة لإعادة الاستخدام
• حافظ على التسلسل البصري
• وثق القواعد

صمم Typography متجاوبة

التصميم المتجاوب لا يعني إنشاء نظام Typography مختلف بالكامل لكل شاشة. العناوين الضخمة يمكن أن تصغر على الجوال، بينما النص الأساسي عادة يبقى ضمن نطاق محدود يحافظ على الراحة. استخدم قواعد responsive أو أحجامًا مرنة عند الحاجة مع حد أدنى وحد أقصى. اختبر عناوين حقيقية طويلة وليس كلمات تجريبية قصيرة، لأن التفاف النص يمكن أن يغيّر ارتفاع القسم وتوزيع العناصر بالكامل.

اختبر أيضًا الأزرار والتبويبات وlabels ورؤوس الجداول والقوائم على الشاشات الضيقة. قرر هل العنصر يلتف أم يتم اختصاره أم يتحول إلى scroll أم يغيّر التخطيط. لا تسمح بتداخل النص مع الأيقونات أو خروجه من الحاوية. جرّب zoom في المتصفح وإعدادات تكبير النص في النظام، لأن بعض المستخدمين يغيّرون حجم النص دون تغيير عرض الشاشة. الواجهة التي تعمل فقط على 100% zoom ليست واجهة قوية.

• حدد أدوار النص
• استخدم tokens قابلة لإعادة الاستخدام
• حافظ على التسلسل البصري
• وثق القواعد

ادعم اللغات واتجاه النص

إذا كان التطبيق عالميًا، تأكد أن الخط يدعم الحروف المطلوبة في اللغات الفعلية. بعض الخطوط ممتازة للاتينية لكنها لا تحتوي العربية أو التشكيل أو الحروف التشيكية، فيحدث fallback إلى خط آخر يغيّر العرض والارتفاع والوزن. اختبر النصوص المترجمة الحقيقية وليس English placeholders، لأن طول الكلمات والعناوين يختلف كثيرًا بين اللغات.

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

• حدد أدوار النص
• استخدم tokens قابلة لإعادة الاستخدام
• حافظ على التسلسل البصري
• وثق القواعد

حسّن تحميل الخطوط والبدائل

تحميل web fonts يجب أن يكون مقصودًا. لا تضف كل الأوزان المتوفرة إذا كنت تستخدم ثلاثة فقط، لأن كل ملف إضافي يرفع حجم الصفحة. استخدم صيغ حديثة مناسبة حيثما أمكن، وانتبه إلى character coverage إذا فكرت في subsetting. الهدف هو أن يظهر النص بسرعة مع أقل layout shift ممكن عندما يصل الخط المخصص ويستبدل fallback.

حدد fallback stack جيدًا بحيث يبقى التطبيق مقروءًا إذا فشل الخط الأساسي. اختبر شبكة بطيئة وطلب font محجوب وزيارة أولى بدون cache. إذا تم self-hosting تحصل على تحكم أكبر، لكنك تتحمل مسؤولية الملفات وcaching والترخيص والتحديث. القرار يجب أن يعتمد على قياسات فعلية للأداء وليس على افتراض أن الاستضافة الذاتية أو الخارجية أفضل دائمًا.

• حدد أدوار النص
• استخدم tokens قابلة لإعادة الاستخدام
• حافظ على التسلسل البصري
• وثق القواعد

اختبر النظام وحافظ عليه

اختبر Typography بمحتوى إنتاجي حقيقي: عناوين طويلة، رسائل أخطاء، جداول، أرقام، نصوص مترجمة، محتوى أنشأه المستخدم، حالات فارغة وفقرة طويلة. راقب القص والتداخل وكثرة الالتفاف وضعف contrast وعدم اتساق الأوزان. صفحة demo مرتبة لا تكفي؛ النظام الحقيقي يحتوي نصوصًا غير متوقعة ويجب أن يتحملها.

احتفظ بمرجع صغير يوضح عائلات الخطوط والأوزان والأحجام وline-height وletter-spacing والاستخدامات والبدائل لكل لغة وطريقة التحميل. قبل إضافة style جديد تحقق هل يمكن لأحد الأنماط الحالية أداء المهمة. هذه العادة تمنع تضخم النظام تدريجيًا. عند تغيير الخط الأساسي قارن المقاييس والتفاف النصوص قبل التعميم، لأن عائلة جديدة قد تغيّر ارتفاع عشرات المكونات حتى لو بقي الحجم الرقمي نفسه.

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

مراجعة الوصول Accessibility لا تقتصر على contrast. اختبر zoom وتكبير الخط من النظام وتغيير الخط الافتراضي في المتصفح. لا تجعل المعنى يعتمد فقط على اللون أو الوزن. يجب أن تبقى البنية مفهومة حتى لو فشل الخط المخصص أو استُخدم fallback مختلف. النظام الجيد يحافظ على التسلسل البصري تحت إعدادات المستخدم المختلفة.

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

مراجعة الوصول Accessibility لا تقتصر على contrast. اختبر zoom وتكبير الخط من النظام وتغيير الخط الافتراضي في المتصفح. لا تجعل المعنى يعتمد فقط على اللون أو الوزن. يجب أن تبقى البنية مفهومة حتى لو فشل الخط المخصص أو استُخدم fallback مختلف. النظام الجيد يحافظ على التسلسل البصري تحت إعدادات المستخدم المختلفة.

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

مراجعة الوصول Accessibility لا تقتصر على contrast. اختبر zoom وتكبير الخط من النظام وتغيير الخط الافتراضي في المتصفح. لا تجعل المعنى يعتمد فقط على اللون أو الوزن. يجب أن تبقى البنية مفهومة حتى لو فشل الخط المخصص أو استُخدم fallback مختلف. النظام الجيد يحافظ على التسلسل البصري تحت إعدادات المستخدم المختلفة.

• حدد أدوار النص
• استخدم tokens قابلة لإعادة الاستخدام
• حافظ على التسلسل البصري
• وثق القواعد

أسئلة

ابدأ مجانًا القوالب