مقياس الطباعة المعياري: كيفية بناء نظام طباعة متسق

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

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

ما هو مقياس الخط المعياري

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

اختر حجمًا أساسيًا، ولنقل 16 بكسل، ونسبة، ولنقل 1.25. اضرب 16 في 1.25 لتحصل على 20. اضرب 20 في 1.25 لتحصل على 25. استمر في ذلك لتحصل على 31، 39، 49، 61. اقسم 16 على 1.25 لتحصل على 12.8. اقسم الناتج على 1.25 لتحصل على 10.24. هذا هو المقياس. ثمانية أحجام، حجم أساسي واحد، نسبة واحدة، اتساق رياضي تام.

يكمن سر نجاح هذا في الجانب النفسي الفيزيائي. فالإدراك البصري البشري يستجيب للنسب، لا للفروق المطلقة. الانتقال من 12 إلى 14 يُقرأ بنفس طريقة الانتقال من 24 إلى 28 تقريبًا، لأن كليهما يُمثلان نفس الخطوة المضاعفة تقريبًا. يبدو السلم الموسيقي الخطي (12، 14، 16، 18، 20، 22) مزدحمًا في الأعلى ومتباعدًا في الأسفل. أما السلم الموسيقي المعياري فيبدو متساويًا، لأنه كذلك نسبيًا.

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

النسب الخمس التي تُغطي المنتجات الحقيقية

تتراوح قيم معظم المنتجات بين 1.125 و1.618، وتحمل كل نسبة إشارة كثافة محددة.

النسب الخمس التي تغطي تقريبًا جميع واجهات المستخدم الحقيقية:

| النسبة | الاسم | إشارة الكثافة | التطبيق الفعلي |

|------:|------|----------------|---------------------|

| 1.125 | النسبة الثانية الصغرى | مُحكمة، كثيفة، غنية بالبيانات | Vercel، Geist، معظم لوحات تحكم الإدارة |

| 1.2 | النسبة الثالثة الصغرى | مُدمجة، متوازنة | المقياس الافتراضي لـ Tailwind |

| 1.25 | النسبة الثالثة الكبرى | تحرير قياسي | Stripe، أدوار Material 3 |

| 1.333 | النسبة الرابعة المثالية | واسعة، تُشبه المجلات | المواقع التحريرية، المدونات الطويلة |

| 1.618 | النسبة الذهبية | جذابة، تعتمد على العرض | صفحات التسويق، المواقع التي تعتمد على البطل |

تظهر نسبتان إضافيتان أحيانًا. النسبة 1.414 (الرابعة المُعززة، وهي الجذر التربيعي للعدد 2، وتُمثل النسبة في ورقة A4) تقع بين الرابعة والخامسة التامتين، وهي خيار مناسب للمنتجات ذات الطابع التسويقي التي تتطلب مستوىً أعلى من التأثير الذي تُوفره النسبة 1.333. أما النسبة 1.5 (الخامسة التامة) فهي أعلى من 1.333 وأقل من 1.618، وهي النسبة الافتراضية في العديد من مُنشئي صفحات التسويق.

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

اختر النسبة المناسبة لكثافة المحتوى

يحتاج تطبيق البيانات الكثيفة إلى نسبة ضيقة، بينما يحتاج موقع التحرير إلى نسبة واسعة، والاختيار الخاطئ سيؤثر سلبًا على جميع جوانب المحتوى.

إذا كان المنتج عبارة عن لوحة تحكم، أو لوحة إدارة، أو نظام إدارة علاقات العملاء (CRM)، أو أداة تحليل، أو أي تطبيق آخر يقرأ فيه المستخدم سطورًا من المعلومات الكثيفة لساعات، فاختر النسبة الافتراضية 1.125 أو 1.2. تضمن النسبة الضيقة عدم تشتيت انتباه المستخدم عن البيانات. ويبقى التسلسل الهرمي فعالًا، لأنه في هذا النطاق يعتمد بشكل أساسي على سمك الخط ولونه والمسافة، وليس على حجمه.

إذا كان المنتج عبارة عن صفحة تسويق لبرنامج كخدمة (SaaS)، أو موقع محتوى، أو صفحة منتج، أو منصة توثيق، فاختر النسبة الافتراضية 1.25 أو 1.333. توفر النسب المتوسطة حجمًا مناسبًا للعناوين لتمييز الأقسام دون أن تجعل محتوى الصفحة يبدو صغيرًا بالمقارنة. هذا هو المكان الذي تتواجد فيه معظم منتجات B2B، وهو المكان الذي تلاقت فيه كل من Tailwind وMaterial وStripe.

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

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

ثبّت حجم الخط الأساسي قبل تغيير الحجم

يُعدّ حجم الخط الأساسي هو نقطة الانطلاق التي تُقاس منها جميع الخطوات، وأي خطأ فيه سيؤدي إلى خطأ في جميع الخطوات.

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

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

بالنسبة للأجهزة المحمولة، يمكنك تصغير الحجم الأساسي (15 أو 16) والاعتماد على الوحدات النسبية. أما بالنسبة للطباعة، فالحجم الأساسي عادةً ما يكون 11 أو 12 نقطة، وتبقى النسب كما هي. بالنسبة لصفحات التوثيق التي تحتوي على كتل برمجية، اضبط حجم النص الأساسي على 16 وحجم النص البرمجي الأحادي على 14 مع تطبيق النسبة نفسها على مقياس النص البرمجي. الحجم الأساسي خاص بكل وسيط، والنسبة خاصة بكل منتج، وكلاهما قرار تتخذه مرة واحدة.

قاعدة أخرى: اضبط الحجم الأساسي بوحدة rem، وليس px، على الويب. يجب التعبير عن المقياس بالكامل بوحدة rem حتى تنتقل تفضيلات المستخدم لحجم الخط وأدوات إمكانية الوصول (التكبير، وضع القراءة، تغيير حجم المتصفح) بشكل صحيح. يقوم Tailwind بذلك بالفعل. ويقوم Material بذلك أيضًا. ويقوم Apple في نظام iOS بالوظيفة المكافئة. إذا كان مقياسك مُحددًا بالبكسل، فأنت تُخالف قواعد المنصة.

أنشئ الخطوات، وسمِّها حسب وظيفتها

يُغطي مقياس من سبع إلى تسع خطوات جميع الأحجام التي يحتاجها المنتج، وسمِّها حسب وظيفتها لا حجمها.

استخدم قاعدة 16 بكسل ونسبة 1.25. الخطوات هي:

• 10 (تعليق صغير جدًا، حاشية سفلية)
• 13 (نص ثانوي صغير)
• 16 (نص أساسي)
• 20 (نص رئيسي كبير)
• 25 (عنوان فرعي صغير)
• 31 (عنوان متوسط)
• 39 (عنوان رئيسي كبير)
• 49 (عنوان الصفحة)
• 61 (عرض رئيسي)

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

الآن، سمِّها. ليس المقصود "text-31" أو "39px". سمِّها حسب دورها: العنوان الفرعي، والنص الصغير، والنص الأساسي، والنص الرئيسي، والعنوان الفرعي 4، والعنوان الفرعي 3، والعنوان الفرعي 2، والعنوان الفرعي 1، والنص المقروء. أسماء الأدوار هي الاتفاق مع فريق الهندسة، وليست قيم البكسل. قد تتغير قيمة البكسل إذا تغيرت القاعدة أو النسبة، لكن الدور يبقى كما هو. العنوان الفرعي 1 هو دائمًا أكبر عنوان. النص الأساسي هو دائمًا القاعدة. العنوان الفرعي هو دائمًا أصغر نص مقروء.

هذا ما يجعل المقياس نظامًا متكاملًا بدلًا من مجرد جدول بيانات. يقول المصمم "هذا هو النص الأساسي"، ويُصدر المهندس نصًا أساسيًا. إذا تغير المقياس في الربع التالي، فسيظل النص الأساسي هو نفسه، وستحصل جميع المكونات على القيمة الجديدة تلقائيًا. لا حاجة للبحث عن كل قيمة 16 في قاعدة البيانات وتغييرها إلى 17.

يأتي تصميم Material Design 3 بمقياسه مُسمى حسب الدور: النص المقروء، والعنوان الرئيسي، والعنوان، والتسمية، والنص الأساسي، مع متغيرات حجم (كبير، متوسط، صغير) داخل كل منها. تتضمن واجهة المستخدم الرسومية Apple عناصر مثل العنوان الكبير، والعنوان 1، والعنوان 2، والعنوان 3، والعنوان الرئيسي، والنص الأساسي، والتعليق، والعنوان الفرعي، والحاشية السفلية، والتعليق 1، والتعليق 2. بينما توفر Tailwind أحجامًا تتراوح من text-xs إلى text-9xl، وهي أحجام تُشبه أحجام القمصان وليست أسماء أدوار، وهذا هو الجانب الوحيد الذي تُعتبر فيه الإعدادات الافتراضية لـ Tailwind أضعف من Material. معظم الفرق التي تعتمد Tailwind تُضيف في النهاية أسماءً بديلة مُخصصة للأدوار فوق فئات القمصان.

تحويل المقياس إلى رموز تصميم

تحوّل الرموز المقياس من جدول بيانات المصمم إلى عقد الفريق.

رموز التصميم هي قيم مُسماة تُمثل قرارات التصميم. بالنسبة لمقياس الخط، تحتاج إلى ثلاث طبقات:

1. الرموز الخام. قيم الحجم الفعلية. font-size-100، font-size-200، إلخ، أو بأسماء مثل font-size-body، font-size-h1. هذه هي المصادر الموثوقة. ... ملف رموز JSON بسيط لمقياس ذي أساس 16 ونسبة 1.25:

{
  "font-size": {
    "raw": {
      "100": { "value": "0.625rem" },
      "200": { "value": "0.8125rem" },
      "300": { "value": "1rem" },
      "400": { "value": "1.25rem" },
      "500": { "value": "1.5625rem" },
      "600": { "value": "1.9375rem" },
      "700": { "value": "2.4375rem" },
      "800": { "value": "3.0625rem" },
      "900": { "value": "3.8125rem" }
    },
    "semantic": {
      "caption":  { "value": "{font-size.raw.100}" },
      "small":    { "value": "{font-size.raw.200}" },
      "body":     { "value": "{font-size.raw.300}" },
      "lead":     { "value": "{font-size.raw.400}" },
      "h4":       { "value": "{font-size.raw.500}" },
      "h3":       { "value": "{font-size.raw.600}" },
      "h2":       { "value": "{font-size.raw.700}" },
      "h1":       { "value": "{font-size.raw.800}" },
      "display":  { "value": "{font-size.raw.900}" }
    }
  }
}

هذا الهيكل قابل للنقل. تدعم أدوات مثل Style Dictionary وTokens Studio وSpecify وSupernova هذا التنسيق وتُصدر متغيرات Figma، ومتغيرات CSS، وإعدادات Tailwind، وثوابت Swift لنظام iOS، وXML لنظام Android، وأي متطلبات أخرى للمنصات. الرموز هي المصدر، أما باقي البيانات فتُنشأ تلقائيًا.

تضمين المقياس في متغيرات Figma

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

أنشئ مجموعة متغيرات باسم Typography. أضف داخل هذا الملف متغيرًا رقميًا لكل حجم خام: من size/100 إلى size/900، مع قيم البكسل المكافئة لها بوحدة rem (10، 13، 16، 20، 25، 31، 39، 49، 61). ثم أضف طبقة ثانية من الأسماء المستعارة: text/caption، text/small، text/body، text/lead، text/h4، text/h3، text/h2، text/h1، text/display. يشير كل اسم مستعار إلى متغير حجم خام.

ثم أنشئ أنماطًا نصية، نمطًا واحدًا لكل دور. يستخدم Heading/H1 text/h1 لتحديد الحجم، ونوع خط العنوان لتحديد العائلة، ووزن خط العنوان لتحديد الوزن، ونسبة ارتفاع سطر العنوان لتحديد التباعد بين الأسطر. يستخدم Body/Default text/body، ونوع خط النص الأساسي بوزن عادي. كرر هذه العملية لكل دور.

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

يمكنك دمج هذا مع إعداد الأوضاع إذا كنت تدعم أوضاع كثافة متعددة. يُمكن للوضع "المُضغوط" تجاوز متغيرات الحجم الأساسية لاستخدام نسبة 1.125 لتجربة أكثر كثافة. يُمكن للوضع "المريح" استخدام نسبة 1.25. تبقى الأسماء البديلة كما هي. لا تتغير المكونات. يتغير المقياس فقط أسفلها. هذا ما يوفره لك النظام.

ربط المقياس بـ Tailwind CSS

يُعدّ ملف إعدادات Tailwind المكان الذي يُخزّن فيه المقياس لفريق الهندسة، ويجب أن يُطابق تمامًا بنية المتغير Figma.

استبدل المقياس الافتراضي fontSize في Tailwind بمقياسك، في tailwind.config.js:

module.exports = {
  theme: {
    fontSize: {
      'caption':  ['0.625rem',  { lineHeight: '1rem' }],
      'small':    ['0.8125rem', { lineHeight: '1.25rem' }],
      'body':     ['1rem',      { lineHeight: '1.5rem' }],
      'lead':     ['1.25rem',   { lineHeight: '1.75rem' }],
      'h4':       ['1.5625rem', { lineHeight: '2rem' }],
      'h3':       ['1.9375rem', { lineHeight: '2.375rem' }],
      'h2':       ['2.4375rem', { lineHeight: '2.875rem' }],
      'h1':       ['3.0625rem', { lineHeight: '3.5rem' }],
      'display':  ['3.8125rem', { lineHeight: '4.25rem' }],
    },
  },
}

الآن، text-h1 في لغة الترميز تعني نفس ما تعنيه Heading/H1 في Figma. اسم الفئة هو الأساس. لا يختار المهندسون الأحجام، بل يختارون الأدوار، ويتم تحديد الدور تلقائيًا بناءً على قيمة البكسل الصحيحة أثناء عملية البناء.

ارتفاعات الأسطر هنا ليست عشوائية. النمط هو: ارتفاع سطر ضيق للعناصر الصغيرة، تباعد أسطر أوسع للعناصر الرئيسية والفرعية، ثم ارتفاع سطر ضيق مرة أخرى للعناوين. القاعدة الشائعة هي أن يكون ارتفاع سطر النص الأساسي 1.5، وارتفاع سطر العنوان من 1.1 إلى 1.2، مع انتقال تدريجي من 1.3 إلى 1.4 حول حجمي البادئة و h4. يمكنك التعبير عن ذلك كمقياس آخر (مقياس البادئة) أو كقيم لكل خطوة، ولكن يجب أن تكون العلاقة بين الحجم والبادئة مدروسة، وليست تقديرية.

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

اربط المقياس بـ دليل تنسيق الخطوط حقيقي لاختيار الخطوط و نظام التصميم إطار عمل يضع المقياس في سياقه. المقياس هو جزء من نظام الطباعة، واختيار الخط وتحديد الأدوار هما الجزآن الآخران. هل تحتاج إلى مقياس جاهز للعمل، ورموز حقيقية، وإعداد Figma + Tailwind بشكل صحيح من البداية؟ استئجار Brainy. نوفر أنظمة أنواع كاملة عبر BrandBrainy وUXBrainy مع الرموز، ومتغيرات Figma، وإعدادات Tailwind مدمجة في حزمة واحدة.

قواعد الحوكمة التي تحافظ على فعالية المقياس

كل مقياس أنواع فاشل يموت بنفس الطريقة، بسبب الاستثناء.

ثلاث قواعد تضمن استمرار فعالية المقياس لفترة أطول من أي أداة:

القاعدة الأولى: كل مكون جديد يختار الأدوار، وليس الأحجام. يختار المصمم الذي ينشئ بطاقة "Body" للنص، و"H3" للعنوان، و"Caption" للطابع الزمني. لا يكتب font-size: 18px في نافذة الخصائص. إذا لم يكن الدور موجودًا، يقترح دورًا جديدًا من خلال النظام، وليس تعديلًا لمرة واحدة.

القاعدة الثانية: تُسمى الاستثناءات وتُحدد لها تاريخ. إذا احتاج فريق التسويق إلى عنوان رئيسي بحجم 72 بكسل لصفحة رئيسية في حملة إعلانية، وكان حجم العرض 61 بكسل، يُسمى الاستثناء (hero-marketing-q3-launch) ويُحدد له تاريخ. بعد إطلاق الحملة، إما أن يُدمج الاستثناء في المقياس (إذا كان قابلاً لإعادة الاستخدام) أو يُحذف (إذا كان استثناءً لمرة واحدة). لا يُسمح بالتعديلات غير المُسجلة.

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

دائمًا ما تُكرر الفرق التي تفقد مقياس الخطوط نفس القصة لاحقًا. احتاج أحدهم إلى حجم 17 بكسل لزر، واحتاج آخر إلى حجم 21 بكسل لشعار، وبعد ستة أشهر، يصبح هناك 47 حجم خط في قاعدة البيانات، ولا أحد يستطيع تحديد الأحجام الفعلية. اختفى المقياس. ما تبقى هو فوضى عارمة من أحجام الخطوط.

يمكنك تجنب ذلك بالتعامل مع المقياس كعقد، لا كجدول بيانات. يُفرض هذا العقد بواسطة أدوات (أنماط Figma، فئات Tailwind، قواعد التدقيق اللغوي) ومن خلال المراجعة. يُعاد التفاوض على العقد في المراجعة ربع السنوية. أي شيء خارج هذا العقد يُعتبر خطأً.

الأسئلة الشائعة

ما هو مقياس الخطوط المعياري؟

مقياس الخطوط المعياري هو نظام يُولّد فيه كل حجم خط في المنتج بتطبيق نسبة واحدة على حجم أساسي واحد. اختر حجمًا أساسيًا، عادةً 16 بكسل للويب، واختر نسبة، عادةً ما بين 1.125 و1.618، ثم اضرب أو اقسم الحجم الأساسي على النسبة بشكل متكرر لتوليد الخطوات. والنتيجة هي مقياس يرتبط فيه كل حجم رياضيًا بكل حجم آخر، مما يمنح الطباعة إحساسًا بالاتساق الداخلي لا يمكن تحقيقه باختيارات عشوائية للبكسل.

ما النسبة المثلى لحجم الخط؟

اختر النسبة المناسبة لكثافة الخط المطلوبة لمنتجك. استخدم 1.125 أو 1.2 للمنتجات التي تحتوي على بيانات كثيفة، مثل لوحات المعلومات وأدوات الإدارة، حيث يجب ألا تشتت العناوين الانتباه عن البيانات. استخدم 1.25 أو 1.333 لصفحات التسويق القياسية لبرامج SaaS، ومواقع المحتوى، وصفحات المنتجات، وهي الصفحات التي تُستخدم عادةً في منتجات B2B. استخدم 1.414 أو 1.618 للمنتجات التحريرية، أو منتجات المجلات، أو المنتجات التي تعتمد على الإعلانات، حيث يجب أن تبدو العناوين جذابة. الخطأ الأكثر شيوعًا هو اختيار نسبة معينة لمجرد أنها تبدو رائعة، بدلاً من اختيار نسبة مناسبة للمنتج.

كم عدد الأحجام التي يجب أن يتضمنها حجم الخط؟

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

هل أستخدم وحدة rem أم px لقيم مقياس الخط؟

استخدم وحدة rem للويب. يبلغ حجم الخط الأساسي للمتصفح 16 بكسلًا افتراضيًا، ولكن يمكن للمستخدم تغييره من خلال إعدادات إمكانية الوصول وتفضيلات المتصفح، ويحترم المقياس القائم على وحدة rem هذه التفضيلات تلقائيًا. أما المقاييس القائمة على البكسل فتتجاهلها. يستخدم كل من Tailwind وMaterial Design ومعظم أنظمة التصميم الحديثة وحدة rem لهذا السبب. بالنسبة لمنصات الأجهزة المحمولة، اتبع نظام التشغيل: يستخدم iOS النقاط ويدعم الكتابة الديناميكية، بينما يستخدم Android وحدات البكسل المستقلة عن المقياس (sp). المبدأ واحد، استخدم الوحدة النسبية للنظام، وليس الوحدات المطلقة.

ما الفرق بين مقياس الخط المعياري ورموز التصميم؟

مقياس الخط المعياري هو العملية الحسابية، أما رموز التصميم فهي طريقة تنفيذ هذه العملية. يُحدد المقياس القيم (10، 13، 16، 20، 25، 31، 39، 49، 61). تُمثل الرموز طبقة مُسماة تُتيح لبقية نظام التصميم الرجوع إلى هذه القيم دون الحاجة إلى تضمينها في الكود. يُمكنك إنشاء مقياس بدون رموز، لكن هذا المقياس لن يصمد في قاعدة بيانات حقيقية. كما يُمكنك إنشاء رموز بدون مقياس، لكن القيم ستكون عشوائية. النظام الكامل هو المقياس مُعبرًا عنه بالرموز، مع طبقات البيانات الأولية والدلالية والمكونات، ويتم تضمينه في Figma والكود من خلال نفس المصدر.

النمط الذي تُغفله معظم مقاييس الخطوط

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

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

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

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

إذا كنت ترغب في الحصول على مقياس أنماط معياري فعال، ورموز حقيقية، ومتغيرات Figma حقيقية، وإعدادات Tailwind حقيقية، وخطة حوكمة تضمن استمرارية المقياس بعد الإطلاق، فاستخدم استئجار Brainy. نوفر أنظمة تصميم متكاملة عبر BrandBrainy وUXBrainy، مع مقاييس أنماط مصممة كرموز منذ البداية، وربط نظام الطباعة بـ لوحة ألوان العلامة التجارية، وقواعد تضمن استمرارية النظام بعد إطلاقه من قِبل الفريق.