هل هذا النوع يجعل تصميمي يبدو فات؟

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

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

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

ما هو مقياس المطبوعات؟

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

يساعد المقياس في تحديد حجم وموضع عناصر النص في علاقة مع بعضها البعض. بالنسبة لتصميم الويب ، على وجه الخصوص ، غالبًا ما يتوافق مقياس الكتابة المرئي مع علامات في CSS (مثل h1 و h2 و h3 و p وما إلى ذلك).

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

يجب أن يعتمد المقياس على حجم النص الأساسي. (قم دائماً بتعيين محرف وحجم لذلك أولاً). ثم بناء مقياس حول هذه الطباعة الرئيسية. لست متأكدا من أين تبدأ؟ جوجل لديه توصية صلبة :

1. استخدم حجم خط أساسي من 16 بكسل CSS. اضبط الحجم بناءً على خصائص الخط المستخدم.
2. استخدم الأحجام المتعلقة بالحجم الأساسي لتعريف مقياس الطباعة.
3. يحتاج النص إلى مساحة رأسية بين الأحرف ؛ التوصية العامة هي استخدام ارتفاع خط المتصفح الافتراضي 1.2 م.
4. تقييد عدد الخطوط المستخدمة والمقياس المطبوع.

خلق الانسجام والإيقاع

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

إذن، أين تبدأ؟

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

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

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

إن الطريقة الأسهل للتفكير في زيادة العناوين والعناوين الرئيسية الأخرى تعمل في النسبة المئوية بناءً على النص الأساسي. في حين أن كل مصمم لديه نقطة انطلاق مختلفة ، إلا أن 250٪ أكبر من النص الأساسي هو ملعب جيد للعناوين الرئيسية ؛ 150٪ بالنسبة إلى h2 ، و 75٪ لـ h3 و 50٪ لعناصر مثل علامات الاقتباس. (هذه ليست قاعدة ، مجرد نقطة بداية.)

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

المبادئ التوجيهية للخطوط والمسافات

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

• سطح المكتب والأجهزة الكبيرة: من 60 إلى 75 حرفًا في كل سطر
• الهواتف والأجهزة الصغيرة: 35 إلى 40 حرفًا في كل سطر

لاحظ أن إمكانية القراءة على الشاشات الصغيرة تعتمد على عدد أحرف أقل (نص أكبر).

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

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

نصائح للبدء

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

الخيار الأفضل هو استخدام تصميم متجاوب مع استعلامات الوسائط. هذا هو خيار مطور التصميم الذي سيوفر أعلى مستوى من التحكم في مواصفات النص. (لمزيد من الرجوع إلى توصيات Google المذكورة أعلاه).

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

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

3 أدوات لإنشاء مقياس نوع

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

• اكتب مقياس : أدخل النص واللعب مع خيارات مثل الحجم والمقياس والخط على الشاشة مباشرة. grad the CSS أو تحرير الرمز مباشرة من الأداة ؛
• مقياس وحدات : مقياس يعمل مثل قاعدة للمساعدة في تحديد أحجام للنوع ؛ ثم تنزيل النتائج كمكوّن Sass أو JS أو مشاهدتها على الشاشة ؛
• النسبة الذهبية آلة حاسبة الطباعة : تقوم الأداة بتحسين الحجم وارتفاع الخط والعرض والحروف في كل سطر باستخدام النسبة الذهبية

استنتاج

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

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

• ← تعرف على الرجل وراء Comic Sans
• WeTransfer يكشف هوية العلامة التجارية الجديدة وواجهة المستخدم →