خط موقعك يكلفك أكثر مما تظن

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

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

لماذا يُحتسب الخط بعدد مشاهدات الصفحات

الخط برنامج. أنت لا تشتريه، أنت ترخّصه. وتراخيص خطوط الويب تُباع عادة حسب شرائح مشاهدات الصفحات الشهرية.

الأمر يسير تقريبًا هكذا:

• ترخيص سطح المكتب: الاستخدام في Figma وIllustrator وPowerPoint. رخيص.
• ترخيص الويب: تقديم الخط داخل المتصفح. يُحتسب حسب شريحة الزيارات.
• ترخيص التطبيقات: تضمين الخط في تطبيق. يُحتسب حسب عدد التثبيتات.

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

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

الخطوط المجانية صارت جيدة فعلًا

قبل عشر سنوات، كانت عبارة "خط مجاني" تعني Arial أو شيئًا من Google Fonts يصرخ "قالب جاهز". هذا تغيّر.

خط Nebula Sans مثال جيد على ما هو متاح اليوم. عائلة sans-serif مجانية، بترخيص مفتوح، ولا تبدو مجانية. فيها المدى الكامل من الأوزان، وتعمل كخط متغير (ملف واحد يغطي من light إلى black، دون الحاجة لتحميل ستة ملفات)، والتصميم محايد بما يكفي للواجهات دون أن يكون باهتًا. دعم علامات التشكيل موجود، وهذا وحده يستبعد نصف الخيارات الأجنبية.

وهو ليس الوحيد. Inter وGeist وPublic Sans وInstrument Sans وSöhne (هذا مدفوع، لكني أذكره لأن كثيرين يخلطون). الفكرة أن حجة "لا بد أن أدفع كثيرًا للحصول على تنضيد محترم" ماتت.

الخط الغالي لا يجعل المنتج جيدًا. الخط الخطأ يجعل المنتج بطيئًا.

الوزن الذي لا يقيسه أحد

هنا الجزء الذي لا تحكيه تقارير الأداء كما ينبغي.

عائلة خطوط بأربعة أوزان، بصيغة WOFF2، تغطي latin وlatin-extended، تعطيك ما بين 60 و120 كيلوبايت. يبدو لا شيء. لكن الخط يعطّل العرض. المتصفح ينزّل CSS، يكتشف أنه يحتاج الخط، يطلب الخط، وحتى وصوله يبقى النص غير مرئي أو يومض وهو يبدّل شكله. ذلك الأثر المعروف بـ"الموقع حمّل والنص قفز" له اسم: إنه الخط يصل متأخرًا ويعيد ترتيب التخطيط.

هذا يدخل مباشرة في Cumulative Layout Shift، وهو أحد المؤشرات التي يستخدمها Google في الترتيب. ويدخل في إدراك المستخدم، وهو المؤشر الأهم.

ثلاثة أشياء تحل كل شيء تقريبًا:

1. استضف الخط على نطاقك. التحميل من Google Fonts يضيف اتصالًا بخادم آخر. ومنذ أن فصلت المتصفحات ذاكرة التخزين المؤقت لكل موقع، لم تعد حجة "المستخدم يملكه في الكاش من موقع آخر" تساوي شيئًا.
2. استخدم خطًا متغيرًا. ملف واحد بدل أربعة. طلبات أقل، ووزن أقل.
3. اضبط الـ fallback بشكل صحيح. font-display: swap مع خط نظام بمقاييس متقاربة. النص يظهر فورًا، والتبديل يكاد لا يُلاحظ.

فعلت هذا في موقع تجارة إلكترونية العام الماضي. انتقلنا من ثلاثة ملفات خطوط تُحمّل من CDN خارجي إلى ملف متغير واحد محلي. نزل Largest Contentful Paint من 2.8 ثانية إلى 1.6 ثانية. الخط وحده. دون أي تغيير آخر.

الجزء الأهم فعلًا: هل يبدو الموقع موقعك أنت؟

الآن الجزء الذي يصعب الاعتراف به. إذا استخدمت الخط المجاني نفسه الذي يستخدمه الجميع، سيبدو موقعك مثل مواقع الجميع.

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

التنضيد هو أرخص وسيلة لتمييز علامة تجارية. لست بحاجة إلى خط حصري مصمم خصيصًا. أنت بحاجة إلى اختيار بنيّة واضحة:

• خط sans محايد لمتن النص، لأن قابلية القراءة ليست مكانًا للإبداع.
• خط بشخصية في العناوين. قد يكون serif، أو display، أو grotesque بتفاصيل غريبة. هنا تظهر العلامة.
• تدرّج مقاسات ثابت. لا ستة أحجام عشوائية لأن كل شاشة صُممت في يوم مختلف.

هذا المزيج من خطين، واحد محايد وواحد صاحب رأي، يحل 90% من الحالات ويكلف صفرًا إذا أحسنت الاختيار بين الخطوط المجانية.

كيف تقرر دون أن يتحول الأمر إلى مشروع ثلاثة أشهر

إذا كنت تبني منتجًا أو تعيد بناءه الآن، هذا هو الطريق القصير:

ابدأ من القراءة. افتح نصك الحقيقي، لا "Lorem ipsum"، بالخط المرشّح. فقرة من الأسئلة الشائعة، جدول أسعار، شاشة خطأ. إذا أتعبتك القراءة، استبعده.

اختبر الأرقام. كثير من منتجات SaaS تعرض قيمًا وتواريخ ومؤشرات. الخط ذو الأرقام متغيرة العرض يفكك محاذاة أعمدة الجداول. ابحث عن دعم tabular-nums. تفصيل يستغرق عشر ثوانٍ ويمنع خللًا بصريًا أبديًا.

افحص الحروف العربية. اكتب "قِراءة"، "مؤسسة"، "شيء"، "الأرقام ١٢٣". رأيت خطوطًا أجنبية باهظة بدعم عربي مرسوم بلا عناية، بهمزات ملتصقة بالحرف.

اقرأ الترخيص قبل التنزيل. إذا كان SIL Open Font License، فأنت حر: يمكنك استخدامه في الويب والتطبيقات والمنتجات التجارية، دون حد للزيارات. إذا كان ترخيص مسبك، ابحث عن سطر مشاهدات الصفحات وقارنه بـ Analytics عندك. واحتفظ بملف PDF للترخيص في مكان يجده فريقك بعد عامين.

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

ما كنت سأفعله لو كنت مكانك

إذا كان موقعك اليوم يحمّل الخط من Google Fonts، ويعمل بثلاثة أو أربعة أوزان، ولا أحد يعرف من اختار ذلك الخط ولا لماذا، فأمامك ساعتان من العمل ومكسب حقيقي بانتظارك.

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

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

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

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

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

لكن المال هو الجزء الأصغر. الخط الذي يُحمّل بشكل سيئ يعطّل العرض، ويزيح التخطيط، ويُسقط مؤشرات Core Web Vitals. في متجر إلكتروني العام الماضي، استبدلت ثلاثة ملفات من CDN خارجي بملف متغير واحد محلي: نزل LCP من 2.8 ثانية إلى 1.6 ثانية. دون أي تغيير آخر.

وهناك السؤال الذي لا يطرحه أحد تقريبًا: هل يقول هذا الخط شيئًا عن حقيقة شركتك؟ إذا كان الجواب "لا أعرف"، فربما يبدو موقعك مثل مواقع الجميع.

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

#الخطوط #أداء_الويب #تصميم_المنتجات #CoreWebVitals #الهوية_التجارية