Nebula Sans: خط مجاني لمنتجك SaaS

منتجك فيه سبع شاشات وخمسة خطوط مختلفة. لا أحد اختار ذلك. الأمر حدث وحده: المطور استخدم الخط الافتراضي للإطار، والمصمم المستقل جاء بخط آخر، وأحدهم لصق مكوّناً من مكتبة جاهزة أتى بخط ثالث، والبريد المعاملاتي خرج بخط Arial لأن لا أحد انتبه. خط Nebula Sans، وهو خط مجاني ومفتوح المصدر مصمَّم للواجهات، يحل جزءاً كبيراً من هذا بقرار واحد. وهذا بالضبط نوع القرارات التي تؤجّلها معظم منتجات الـ SaaS الصغيرة حتى تتحول إلى عمل مُعاد.

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

لماذا خط منتجك ليس تفصيلاً صغيراً

الـ SaaS نصٌّ بنسبة 90%. اسم حقل، زر، جدول، رسالة خطأ، رقم في لوحة تحكم، تنبيه فوترة. المستخدم يقضي يومه يقرأ ما كتبتَه، على شاشات صغيرة، وهو مستعجل، وغالباً من الهاتف في خضم شيء آخر.

حين يكون الخط سيئاً للواجهات، تظهر التكلفة في أماكن لا يربطها أحد بالتصميم:

• الرقم 1 يشبه الحرف l، فيكتب العميل الرمز خطأ.
• الأرقام في العمود لا تتحاذى، فيصعب مقارنة جدول الفواتير.
• نص الـ 12px يبدو مشوشاً، فيكبّر الشخص الشاشة بدل أن يقرأ.
• الوزن "semibold" غير موجود، فكل شيء إما رفيع أكثر من اللازم أو ثقيل أكثر من اللازم.

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

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

ما الذي تقدمه Nebula Sans

Nebula Sans خط sans-serif من عائلة النيو غروتيسك، تلك التي شهّرها خط Helvetica. أشكال محايدة، بلا شخصية صارخة، مصمَّمة لتختفي وتترك المحتوى يظهر. وهو مجاني، مفتوح المصدر، ومتاح للاستخدام التجاري.

النقاط المهمة للمنتج:

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

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

الخط الجيد هو الذي لا تلاحظه. إن انتبه المستخدم للخط، فقد أعاقه.

"لكن أليس الخط المجاني أسوأ؟"

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

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

الاختبار الذي أجريه دائماً هو نفسه، ويمكنك فعله في خمس دقائق:

1. اكتب أكثر نص ممل في منتجك بهذا الخط. شيء مثل "تعذّر إتمام عملية الدفع. تحقق من بيانات البطاقة وحاول مرة أخرى."
2. اجعله بحجم 13px، رمادي متوسط، على خلفية بيضاء.
3. انظر إليه على الهاتف مع إضاءة منخفضة.
4. اكتب بجانبه عموداً من القيم: 1.480,00 / 990,00 / 12.375,50.

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

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

التكلفة الخفية: الوزن والسرعة

هنا يأتي الجزء الذي يؤثر في الإيراد مباشرة.

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

ما أفعله عملياً:

• أحمّل وزنين أو ثلاثة كحد أقصى. Regular وMedium وBold تغطي 95% من أي واجهة.
• أستخدم صيغة woff2، وهي الأخف وتعمل في كل ما يهم.
• أستضيف الخط على نطاقي بدل سحبه من خدمة خارجية. اعتمادية أقل، وطلب أقل، ولا أحد يتتبع مستخدمك مجاناً.
• أحدد خط نظام احتياطياً، ليظهر النص فوراً بينما يُحمّل الخط الأساسي.

هذا يقلّص عادة الزمن حتى أول نص مقروء إلى النصف. ليست تحسيناً دقيقاً يخص المهووسين فقط: هذا ما يفصل الزائر الذي ينتظر عن الذي يغلق التبويب.

قرار واحد، لا مشروع

ما أتمنى أن يفهمه المزيد هو أن توحيد الخطوط رخيص إن فعلته مبكراً، وباهظ إن فعلته متأخراً.

مبكراً: تختار عائلة واحدة، وتحدد خمسة أحجام وثلاثة أوزان، وتكتب ذلك في ملف. نصف يوم عمل.

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

المقياس الذي أستخدمه في الغالب، ويكفي أي SaaS:

• 12px للتعليقات
• 14px لمتن الواجهة
• 16px لمتن القراءة
• 20px لعنوان القسم
• 28px لعنوان الصفحة

خمسة أحجام. إن احتجت سادساً، فالمشكلة غالباً في التخطيط لا في الخطوط.

كيف تطبق هذا خلال أسبوعك

إن كنت تدير منتجاً وقرأت حتى هنا وأنت تفكر "منتجي فعلاً فوضوي"، ابدأ بالأكثر ظهوراً:

1. افتح الشاشة التي يستخدمها عملاؤك أكثر. هي فقط.
2. أحصِ كم حجماً ووزناً للنص يظهر فيها.
3. اختصرها إلى أربع تركيبات كحد أقصى.
4. اختر عائلة واحدة، طبّقها، ثم انتقل للشاشة التالية في الأسبوع الذي يليه.

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

هذا نوع الترتيب الذي أقوم به في منتجات تعمل بالفعل: أعدّل ما يعطي عائداً، دون إيقاف التشغيل ودون رمي ما ينجح. إن كان منتجك عند تلك النقطة التي يعمل فيها كل شيء لكن لا شيء يبدو من المكان نفسه، احكِ لي كيف هو اليوم ولنرَ ما الذي يمكن حله أولاً.

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

المطور استخدم الخط الافتراضي للإطار، والمستقل جاء بخط آخر، والبريد المعاملاتي خرج بخط Arial لأن لا أحد انتبه.

يبدو تفصيلاً صغيراً، لكن الـ SaaS نصٌّ بنسبة 90%. حين يشبه الرقم "1" الحرف "l"، يكتب العميل الرمز خطأ. وحين لا تتحاذى الأرقام، يتحول جدول الفوترة إلى تخمين. هذا يصير تذكرة دعم، والتذكرة لها تكلفة باسم واضح.

الخبر الجيد: اليوم يمكن حل الأمر بخط مجاني ومفتوح المصدر، مثل Nebula Sans. أوزان كاملة، أرقام جدولية، ترخيص بلا مفاجآت.

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

إن كان منتجك يعمل لكن لا شيء فيه يبدو من المكان نفسه، كلّمني ولنرَ ما الذي نصلحه أولاً.

#SaaS #الخطوط #تصميم_المنتجات #تجربة_المستخدم #مايكرو_ساس