الخطوط العربية على الويب: كيف تختار خطًا يُقرأ ولا يبطّئ موقعك

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

لماذا يزن الخط العربي أكثر

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

عمليًا: خط لاتيني بوزن واحد قد يكون ٢٠ كيلوبايت بصيغة woff2، بينما خط عربي بالتغطية نفسها قد يتجاوز ٦٠ كيلوبايت. وإذا حمّلت ثلاثة أوزان — عادي وشبه عريض وعريض — فأنت تحمّل الزائر قرابة ٢٠٠ كيلوبايت قبل أن يقرأ كلمة واحدة.

ثلاث طرق لتقليص الوزن

١. اختر عدد الأوزان بحساب

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

٢. الخطوط المتغيّرة حين تناسب

الخط المتغيّر (Variable Font) يضع الأوزان كلها في ملف واحد مع إمكانية التدرّج بينها. إن كنت تستخدم ثلاثة أوزان أو أكثر فالخط المتغيّر غالبًا أخفّ من مجموع الملفات المنفصلة. أمّا إن كنت تستخدم وزنين فقط، فالملفان المنفصلان قد يكونان أخفّ — القاعدة ليست مطلقة، والقياس هو الفيصل.

٣. التقليم (Subsetting)

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

منع «وميض النص»

حين يتأخر الخط، يعرض المتصفح النص بخط بديل ثم يستبدله فجأة — ما يُعرف بوميض النص غير المنسّق. خاصية font-display تتحكّم في هذا السلوك، وswap هي الخيار الأفضل لأغلب المواقع: يظهر النص فورًا بالخط البديل ثم يُستبدَل عند الوصول.

لكن الاستبدال نفسه قد يحرّك التخطيط إن اختلفت مقاييس الخطّين. الحل أن تختار خطًّا احتياطيًا قريبًا في المقاييس، وأن تضبط size-adjust وascent-override ليقارب البديل مقاسات الخط الأصلي. هذا يخفض تحرّك التخطيط إلى ما يقارب الصفر.

وأضف <link rel="preload"> لملفات الخط التي تظهر فوق الطيّة — ولها فقط. تحميل كل الخطوط مسبقًا يزاحم الموارد الأهم ويعطي نتيجة عكسية.

المقروئية قبل الجمال

خط العناوين يحتمل شخصية قوية. خط النص لا. اختبر أي خط مرشّح للنص بثلاثة معايير:

• اقرأ به فقرة كاملة بحجم ١٦ بكسل على شاشة هاتف، لا جملة بحجم ٤٨ بكسل على شاشة حاسب.
• تأكّد من وضوح النقاط: التمييز بين الباء والتاء والثاء يضيع في بعض الخطوط عند الأحجام الصغيرة.
• افحص الأرقام: بعض الخطوط العربية الجميلة تحمل أرقامًا ضعيفة، وموقعك سيعرض أسعارًا وتواريخ.

الترخيص

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

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