مقياس نوعي مُطابق — الحسابات الرياضية وراء كل أبعاد نظام التصميم للحجم المكتوب

لقد نظرت إلى النموذج. أبعاد الخطوط هي 14px, 16px, 18px, 24px, 32px, 48px. لا شيء يبدو خاطئًا تمامًا — ولكن شيئًا ما يشعر بالانعدام. لا تشعر التغيرات بين الأحجام بالتناسق. يكون العنوان قريبًا جدًا من العنوان الفرعي. يشعر العلامة الصغيرة بالانفصال عن النص الأساسي. لقد اخترت أرقامًا تبدو مربوطة وطبيعيًا، وتساءلت لماذا يشعر الناتج ببعض التصريح. إنه مُصاغ بشكل عشوائي. هذه هي المشكلة.

أُثبت أن وعي الإنسان للفرق في الأحجام يُشبه اللوغاريتم. لا نشعر بالفرق بين 16px و32px كـ "مُضاعف" — نشعر به كخطوة واحدة. لبناء خطوط تبدو متناسقة من حيث النسبة، يجب أن تتبع الفجوات بين الأحجام نسبًا، وليس تسلسلًا حسابيًا. هذه هي الفكرة وراء المقياس المُعياري.

ما هو المقياس المُعياري فعليًا؟

المقياس المُعياري هو تسلسل أرقام يتم بناؤه عن طريق ضرب قيمة أساسية بعلاقة ثابتة متكررة. الصيغة هي:

size = base × ratio^n

حيث n أين عدد الخطوة (0 للقيمة الأساسية، موجب للقيم الأكبر، سالب للقيم الأصغر). مع قيمة أساسية 16px وقيمة النسبة 1.25 (النسبة الكبرى الثالثة)، تُحصل على:

• 16 × 1.25^-2 = 10.24px
• 16 × 1.25^-1 = 12.8px
• 16 × 1.25^0 = 16px (القيمة الأساسية)
• 16 × 1.25^1 = 20px
• 16 × 1.25^2 = 25px
• 16 × 1.25^3 = 31.25px
• 16 × 1.25^4 = 39.06px

كل خطوة تزيد بـ 25% أكثر من الخطوة السابقة. تشعر التغيرات البصرية بالتناسق لأنها متماسكة — من حيث التماثل الهندسي. مقارنة ذلك مع ، حيث تكون التغيرات 14, 16, 18, 24, 32, 48. توزيع مسافات غير متناسق مُغطى بأرقام مربوطة. +2, +2, +6, +8, +16مُسميات النسب (وأوقات تطبيق كل منها)

تستمد الأسماء من فترات الموسيقى الغربية، والتي تتبع نفس العلاقات الرياضية. إليك الترتيب العملي:

1.067 — الثانية الصغيرة:

• مُضطرب جدًا. لا يمكن التمييز بين الخطوات. مفيد لمسافات النص الدقيقة داخل مكون واحد، وليس لتصنيفات العناوين. 1.125 — الثانية الكبيرة:
• مُخفف. مناسب للواجهات الكثيفة التي تحتاج إلى تمييز دون تأثير — مثل جداول البيانات، لوحة التحكم. 1.25 — الثالثة الكبيرة:
• النقطة المثالية لمعظم واجهات الويب. يوفر تباينًا كافٍ بين المستويات لقراءة التسلسل بوضوح دون أن تبدو العناوين كبيرة جدًا. هو الأكثر شيوعًا في أنظمة التصميم. 1.333 — الرابعة المثالية:
• مُنظف وشائع الاستخدام. يمنح العناوين مزيدًا من القيمة. يعمل بشكل جيد عندما ترغب في تسلسل واضح للخطوط مع عدد قليل من الخطوات. 1.414 — الرابعة المُعززة (√2):
• كما هو نسب الأبعاد في ورقة A4. أكثر تأثيرًا من الرابعة المثالية، مناسب للمحتوى التحريري. 1.5 — الرابعة المثالية:
• يُظهر تباينًا قويًا بين المستويات. تشعر العناوين بالكثير من الحجم والقوة. مناسب للتركيبات التحريرية، صفحات التسويق، أي محتوى يُظهر تأثيرًا. 1.618 — النسبة الذهبية:
• مُدهش من الناحية النظرية، مُفرط في الممارسة. بعد خطوتين من النص الأساسي، سيكون العنوان كبيرًا جدًا. استخدمه فقط للعناوين المُعرضة، وليس للهياكل الكاملة للواجهة. للمطورين في الواجهة، يغطي النسبة الكبيرة (1.25) أو الرابعة المثالية (1.333) معظم الحالات. إذا كنت غير متأكد، ابدأ بـ 1.25. يمكنك دائمًا زيادة النسبة إذا شعرت أن التسلسل يُظهر توازنًا ضعيفًا.

النسبة في الممارسة: الثالثة الكبيرة من 16px

إليك ما يظهره المقياس الكامل للثالثة الكبيرة (النسبة = 1.25، القيمة الأساسية = 16px) عبر سبعة خطوات:

قيمة px

خطوة	العامل	قيمة rem	xs
10.24px	1.25^-2	0.64rem	sm
12.8px	1.25^-1	0.8rem	base
1rem	1.25^0	16 بكسل	lg
1.25rem	1.25^1	20 بكسل	xl
25px	1.25^2	1.5625rem	2xl
31.25px	1.25^3	1.953rem	3xl
39.06px	1.25^4	2.441rem	ملاحظة حول القيم العشرية:

مقبولة تمامًا للحفاظ عليها بدقة في rem — تتعامل المتصفحات بشكل صحيح مع التمثيل تحت البكسل. لا تحتاج إلى تحسين القيم إلى 12.8px و 31.25px وإغلاق التماسك الرياضي. احتفظ بالرياضيات النظيفة؛ دع المتصفح يُدير عمله. 13px أو 31px مُخصّصات CSS: نظامك للتصميم

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

ثم استخدمها مثل أي مُخصّص تصميمي:

:root {
  --font-size-xs:   0.64rem;    /* 16 × 1.25^-2 = 10.24px */
  --font-size-sm:   0.8rem;     /* 16 × 1.25^-1 = 12.8px  */
  --font-size-base: 1rem;       /* base = 16px             */
  --font-size-lg:   1.25rem;    /* 16 × 1.25^1  = 20px     */
  --font-size-xl:   1.5625rem;  /* 16 × 1.25^2  = 25px     */
  --font-size-2xl:  1.953rem;   /* 16 × 1.25^3  = 31.25px  */
  --font-size-3xl:  2.441rem;   /* 16 × 1.25^4  = 39.06px  */
}

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

body        { font-size: var(--font-size-base); }
small       { font-size: var(--font-size-sm);   }
h3          { font-size: var(--font-size-xl);   }
h2          { font-size: var(--font-size-2xl);  }
h1          { font-size: var(--font-size-3xl);  }
.label      { font-size: var(--font-size-xs);   }

إذا لم ترغب في حساب القيم يدويًا، فإن

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

المقياس أداة، وليس قانونًا. إليك الأوقات المناسبة للانحراف بشكل عمد:

العناوين المُعرضة تحتاج إلى معالجة خاصة

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

الخطوط المُتغيرة تُحسّن التحولات

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

يُحافظ على قيم المقياس كأطر مرجعية، ويسمح للحجم بالتكيف بسلاسة بينهما بناءً على عرض الشاشة. يحدد المقياس القيم المحدودة؛ clamp():

h1 {
  font-size: clamp(1.953rem, 4vw + 1rem, 2.441rem);
}

يُدير التحولات. يبقى التمثيل الرياضي متماسكًا، ويظل الناتج قابلًا للقراءة على جميع أحجام الأجهزة. clamp() التعديلات السياقية مقبولة

إذا كان عنوانك

داخل شريط جانبي يشعر بالكثير من الحجم عند h2 ، فإن تقليله إلى 1.953remفي هذا السياق هو خيار مقبول. يُعطي المقياس لك القيمة المتماسكة، وليس قاعدة غير قابلة للتغيير. الهدف هو التوازن البصري، وليس الوضوح الرياضي. اُنحرف عن المقياس عندما يطلب السياق ذلك — ولكن اُنحرف بشكل عمد، وليس لأنك اخترت رقمًا مربوطًا. 1.5625rem اختر قيمة أساسية (عادة 16px)، اختر نسبة تتناسب مع الوزن البصري الذي تحتاجه (1.25 للواجهات، 1.333 لشيء يحمل تواجدًا أكبر، 1.5 للمحتوى التحريري)، أنشئ المقياس، وانسخه كمُخصّصات CSS. مكتمل. الآن أصبحت أبعاد الخطوط تمتلك علاقة رياضية بدلًا من علاقة عشوائية، وستفهم أي مصمم ينظر إلى كودك أن النظام مُصمم بشكل متماسك.

باستخدام لون واحد، يمكنك الآن إنشاء مقياس كامل، مُعرّف بمعنى، وقابل للوضع المظلم، في أقل من 50 سطرًا من JavaScript. الخطوات الأساسية:

على IO Tools يسمح لك بتكوين القيمة الأساسية والنسبة وعدد الخطوات — ويُعطيك المُخصّصات جاهزة للنسخ. جرب تغيير النسبة من 1.25 إلى 1.333 وشاهد كيف تتحرك أبعاد العناوين بسرعة. هذه هي المعرفة المهمة التي يجب بناؤها: فهم ما يمثل كل نسبة

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

قد يعجبك أيضاً