دليل الخط

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

أنواع الخطوط

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

body {
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, 
				'Segoe UI', 'Ubuntu', 'Fira Sans', 
				'Helvetica Neue', sans-serif;
}

body {
	font-family: "Noto Kufi Arabic", sans-serif;
}

أحجام الخطوط

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

ويعد سُمك الخط مزيجًا من 12 حجمًا مدعومة من قبل نظام التصميم هذا.

المحتوى

يتكون نظام الخطوط من 7 أحجام من شأنها تحقيق أعلى معدلات القراءة والوصول. وينصح باستخدام ما لا يقل عن 16 بكسل، إلا إذا استدعى السياق حجمًا أقل. ولمزيد من التفاصيل، يمكنك الاطلاع على قسم «الخطوط المتجاوبة».

الخطوط المتجاوبة

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

وفي الشاشات الصغيرة، يتغير حجم العنوان وفقًا لحجم الإطار، وهو ما يمكن تطبيقه بسهولة على العناوين باتباع قاعدة «تقليل حجم العناوين درجة» التي يمكن تطبيقها كما في المثال الآتي:

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

<h1 class="text-h3 lg:text-h2 xl:text-h1 leading-normal">
ندعوكم لزيارة U.ae النافذة الرقمية الموحدة
</h1>
<!-- the use of the leading-normal (line height) 
for headings is open based on your design needs -->

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

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

ويجب أيضًا اختبار المنصات الرقمية على أحجام الشاشات العادية، التي لا تزيد على 1536 بكسل، واختباره أيضًا على الشاشات الكبيرة التي قد تتراوح من 1536 بكسل فما فوق، وحتى 2500 بكسل. ويمكنك الاطلاع على قسم «الشبكة» لمزيد من التفاصيل.

سمْك الخطوط

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

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

وينص جدول حجم الخط على استخدام خطوط ذات سمْك كبير (عريضة وبلون أسود) للعناوين الرئيسية وعناوين الفقرات لقدرتها على جذب نظر المستخدم. وعلى العكس، تستخدم الخطوط بسُمك محايد (رفيع وعاد) للنص الأساسي والنصوص الطويلة للمساعدة على استيعاب أفضل للمحتوى.

العناوين

يتم استخدام ` font-extrabold ` أو الخط العريض جدًا مع جميع صيغ HTML للعناوين عن طريق إعدادات مسبقة. ولذلك، ننصح بتجنب استخدام أكثر من سمْك للخط بالعناوين بما يتفق مع نمط التصميم، كما ننصح أيضًا باستخدام الخط الخفيف جيدًا ` font-extralight ` للعنوان الرئيسي (HI Display).

المحتوى

استخدم السمْك العادي والمحايد للخطوط لمحتوى موقعك، ويعد سمْك 400 أو السمك العادي ` font-normal ` هو السمْك الرئيسي لجميع أنواع الخطوط.

ويمكنك أيضًا استخدام الخط العريض للتركيز على أجزاء في النص دون غيرها أو سمْك نصف عريض ` font-semibold ` مع الخطوط الكبيرة.

تباعد الأسطر

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

التباعد في المحتوى الأساسي

تم اختيار خط Roboto بحجم 16 بكسل للنص الأساسي باللغة الإنجليزية، وهو ما يعني استخدام 1.5 كأقل ارتفاعٍ للسطر، مما يساعد المستخدمين من ذوي مشاكل البصر أو الإدراك مثل عسر القراءة (dyslexia).

وطبقًا لمعايير النجاح 1.4.12، فإن ارتفاع السطر يجب أن يكون 1.5 والهامش بعد الفقرة بارتفاع 2، بتباعد بين الكلمات يُقدر بما لا يقل عن 0.16 مرة وتباعد بين الحروف يبلغ 0.12 على الأقل من حجم الخط.

ويتماشى كل من خطيّ Roboto وNoto Kufi Arabic تلقائيًا مع تباعد الحروف والكلمات، ولكن عليك التأكد من ارتفاع السطور والهوامش أسفل الفقرات، حيث يهيئ نظام التصميم من البداية ارتفاع السطر لمحتوى النص الأساسي ولكن يتطلب إضافة هوامش الفقرات يدويًا.

مثال توضيحي لارتفاعيّ السطر والهامش بعد الفقرة للتطبيق على محتوى موقعك الإلكتروني فيما يلي:

تباعد العناوين

تستخدم العناوين (التي تحددها علامتيّ <h1> ... <h6> بلغة HTML) صياغة مختلفة للخطوط، ويتم تحديد ارتفاع السطور بها من خلال العناصر التي تم تصميمها.

وتكون الخطوط من <h1> إلى <h4> ذات سمْك عريض وأكبر كثيرًا في الحجم. ولذلك يمكن خفض ارتفاع السطر عن 1.5، وهو الارتفاع النموذجي، ولكن يجب في نفس الوقت تطبيق قاعدة تناقص ارتفاع السطر، فكلما زاد حجم الخط، كلما كان من الأفضل خفض ارتفاعه طالما لم يقل عن 1 rem.

تباعد النصوص

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

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

طول السطور

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

مثلاً، إذا كان حجم النص الأساسي لديك هو ` (16 px) ` بكسل وأردت إضافة نص من أربعة فقرات، فسيكون أفضل عرضٍ للمساحة الحاوية هو ` 745 px ` بكسل، حيث سيتراوح عدد الحروف بين 60 و100 في السطر الواحد.

التسلسل الهرمي لبنية المحتوى

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