تصميم نظام الطباعة: كيف تبني خطوطًا قابلة للتوسع

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

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

هذا التناقض هو مشكلة في نظام الطباعة. وهو قابل للإصلاح.

ما يحتويه نظام الطباعة بالفعل

يحدد نظام الطباعة الحقيقي خمسة أشياء:

1. مقياس الخط. العلاقة الرياضية بين أحجام نصوصك.
2. توافقات الخطوط. أي الخطوط تؤدي أي الأدوار ولماذا.
3. قواعد الوزن والنمط. متى تستخدم الغامق (bold)، المائل (italic)، المتوسط (medium)، وماذا يشير إليه كل وزن.
4. معايير التباعد. ارتفاع السطر، تباعد الأحرف، وتباعد الفقرات لكل حجم.
5. السلوك المتجاوب. كيف تتكيف كل العناصر المذكورة أعلاه عبر أحجام الشاشات.

إذا كان "نظام الطباعة" الخاص بك يفتقر إلى أي من هذه، فلديك خيارات خطوط، وليس نظامًا.

مقياس الخط هو الأساس

مقياس الخط هو مجموعة من أحجام الخطوط التي يتم إنشاؤها من نسبة رياضية متسقة. بدلاً من اختيار الأحجام بالحدس (16 بكسل هنا، 24 بكسل هناك، ربما 36 بكسل للقسم الرئيسي)، تختار حجمًا أساسيًا ونسبة، وكل حجم آخر يتدفق من ذلك.

النسب الشائعة التي تعمل:

ابدأ بحجم أساسي 16 بكسل (الافتراضي للمتصفح، سهل الوصول، قابل للقراءة) واضرب للأعلى للعناوين، واقسم للأسفل للتعليقات التوضيحية والتسميات. مقياس Major Third من 16 بكسل يمنحك: 10 بكسل، 12.8 بكسل، 16 بكسل، 20 بكسل، 25 بكسل، 31.25 بكسل، 39 بكسل. قم بالتقريب إلى قيم نظيفة وسيكون لديك مقياس يبدو مقصودًا بدلاً من أن يكون عشوائيًا.

توافق الخطوط هو استراتيجية

الإنترنت مليء بقوائم "أفضل توافقات الخطوط". معظمها نصائح تزيين متنكرة في هيئة نصائح تصميم. توافق الخطوط الحقيقي استراتيجي.

القواعد التي تعمل بالفعل:

تباين في الهيكل، تناغم في النسبة. قم بإقران خط sans هندسي مع خط serif إنساني. التباين الهيكلي يخلق اهتمامًا بصريًا. الارتفاع المشترك للحرف x والنسبة يحافظان على شعورهما بالانتماء معًا. Inter + Merriweather. DM Sans + Lora. Satoshi + Source Serif.

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

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

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

قواعد الوزن والنمط

الوزن هو التسلسل الهرمي. الغامق (Bold) يعني مهم. المتوسط (Medium) يعني داعم. العادي (Regular) يعني نص أساسي. الخفيف (Light) يعني زخرفي أو ثانوي. هذه الارتباطات متأصلة في كيفية قراءة الناس.

الخطأ هو استخدام الوزن بشكل غير متسق. إذا كان عنوان H2 الخاص بك شبه غامق (semibold) في موقع التسويق ولكنه غامق (bold) في التطبيق، فإن العلامة التجارية تبدو مختلفة على الرغم من أن الخط هو نفسه. نظام الطباعة يثبت هذا الأمر:

• H1: غامق (700). دائمًا. هذا هو صوتك الأعلى.
• H2: شبه غامق (600) أو غامق (700). اختر واحدًا، واستخدمه في كل مكان.
• H3: متوسط (500). تباين كافٍ للتميز دون التنافس مع H2.
• النص الأساسي: عادي (400). قابل للقراءة، محايد، بدون احتكاك.
• التعليقات التوضيحية والتسميات: عادي (400) أو متوسط (500) بأحجام أصغر.

للمائل (Italic) وظيفة واحدة: التأكيد داخل النص الأساسي. استخدام المائل لأغراض زخرفية (اقتباسات بارزة، تسميات الأقسام) يضعف معناه ويجعل التأكيد الفعلي غير مرئي.

التباعد هو نقطة ضعف الأنظمة

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

قواعد ارتفاع السطر:

تحتاج العناوين إلى ارتفاع سطر أضيق (1.1 إلى 1.3) لأن النص الكبير يخلق مساحة رأسية كبيرة جدًا عند نسب نص الجسم. يحتاج النص الأساسي إلى ارتفاع سطر أوسع (1.5 إلى 1.8) لقراءة مريحة. الخطأ الشائع هو تطبيق 1.5 على كل شيء، مما يجعل العناوين تطفو ويجعل النص الأساسي يبدو ضيقًا بالحجم الخاطئ.

قواعد تباعد الأحرف:

يستفيد النص الكبير (العناوين، العرض) من تباعد أحرف سلبي قليل (-0.01em إلى -0.02em). التباعد البصري عند الأحجام الكبيرة يخلق فجوات تبدو أوسع مما هو مقصود. يستفيد النص الصغير (التعليقات التوضيحية، التسميات، الأحرف الكبيرة) من تباعد أحرف إيجابي قليل (+0.02em إلى +0.05em) لأن التتبع الضيق عند الأحجام الصغيرة يقلل من قابلية القراءة.

تباعد الفقرات:

استخدم مضاعفًا ثابتًا لوحدتك الأساسية. إذا كانت وحدتك الأساسية 16 بكسل مع شبكة 4 بكسل، فيجب أن يكون تباعد الفقرات 16 بكسل أو 24 بكسل، وليس قيمة عشوائية. هذا يحافظ على الإيقاع الرأسي متسقًا عبر كل صفحة.

السلوك المتجاوب

نظام الطباعة الذي يعمل عند نقطة توقف واحدة ليس نظامًا. إنه لقطة شاشة.

الطباعة المرنة تقوم بتغيير أحجام الخطوط بسلاسة بين نقاط التوقف باستخدام CSS clamp(). بدلاً من القفز من 16 بكسل إلى 14 بكسل عند نقطة توقف، يتم استيفاء الحجم. هذا يزيل تشوه التخطيط الذي يأتي من التغييرات الصارمة لنقاط التوقف.

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

ضغط المقياس على الهاتف المحمول. نسبة مقياس سطح المكتب الخاص بك (على سبيل المثال 1.250) تخلق تباينًا كبيرًا جدًا على شاشة صغيرة. عنوان H1 بحجم 39 بكسل على سطح المكتب يعمل. عنوان H1 بحجم 39 بكسل على هاتف بحجم 375 بكسل لا يعمل. الحل: ضغط النسبة على الهاتف المحمول (خفضها إلى 1.125 أو 1.150) مع الحفاظ على الحجم الأساسي كما هو. يبقى التسلسل الهرمي، وتتكيف الأحجام.

الحد الأدنى للأحجام القابلة للقراءة. لا تقل أبدًا عن 16 بكسل للنص الأساسي على الهاتف المحمول. لا تقل أبدًا عن 12 بكسل لأي نص. إمكانية الوصول ليست اختيارية، والنص الصغير على الشاشات الصغيرة يفشل المستخدمين الحقيقيين.

إخفاقات نظام الطباعة الشائعة

• بوفيه الخطوط. خمسة خطوط، بدون منطق. كل صفحة تبدو وكأنها علامة تجارية مختلفة.
• الوزن اليتيم. استخدام الخفيف (Thin 100) أو الأسود (Black 900) لعنصر زخرفي واحد فقط ولا شيء آخر. يضيف ضوضاء بصرية دون إضافة قيمة للنظام.
• تخمين التباعد. ارتفاعات الأسطر وتباعد الأحرف التي تتغير بين المكونات لأن لا أحد حدد القواعد.
• المقياس المخصص لسطح المكتب فقط. يبدو رائعًا على نموذج 1440 بكسل. ينهار على أي شيء أصغر لأن لا أحد اختبر السلوك المتجاوب.
• الرموز المفقودة. نظام طباعة محدد في ملف Figma ولكنه لم يُترجم إلى رموز تصميم أو خصائص CSS مخصصة. النظام موجود نظريًا ولكن ليس في الكود، لذلك يعيد المهندسون اختراعه في كل سباق تطوير.

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

ما هو نظام الطباعة في التصميم؟

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

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

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

ما هي أفضل نسبة لمقياس الخط؟

لا توجد نسبة واحدة هي الأفضل. Major Third (1.250) يعمل جيدًا للتسويق والتحرير. Minor Third (1.200) يناسب الواجهات الكثيفة. Perfect Fourth (1.333) يخلق تباينًا قويًا للعناوين. اختر النسبة التي تتناسب مع كثافة المحتوى واحتياجات التسلسل الهرمي لديك.

ابنِ النظام قبل اختيار الخط

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