يمكن أن تؤدي الطباعة إلى إنشاء أو كسر التصميم الخاص بك: عملية لاختيار النوع

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

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

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

حدد الغرض الخاص بك

قبل أن تفعل أي شيء آخر ، حدد أولاً الغرض من التصميم الخاص بك. ما هي المعلومات التي تريد نقلها؟ ما هي الوسيلة لتصميمك؟

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

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

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

حدد جمهورك

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

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

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

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

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

ابحث عن الإلهام

انظر إلى عمل المصممين الآخرين. حاول أن تفهم كيف اتخذوا قراراتهم بشأن النوع.

إلهام الخط

لإلهام الخطوط ، فإن أفضل 100 خط مجاني من CreativeBloq هي مقالة رائعة تضعك في العقلية الصحيحة لاختيار النوع. في المقال ، يشرح CreativeBloq الدوافع وراء كل خط.

مورد مفيد آخر هو 100 أكبر مجموعة خطوط مجانية لعام 2015 بواسطة Awwwards.

قام Invision أيضًا بتجميع ريبو ضخم لموارد الطباعة. ستجد الكثير من مصادر الإلهام هناك.

للإلهام من مواقع الويب الفعلية ، تحقق من Typ.io. ينظم الموقع إلهام الخطوط من جميع أنحاء الويب. بالإضافة إلى ذلك ، يوفر الموقع تعريفات خطوط CSS في أسفل كل عينة إلهام.

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

إقران الإلهام

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

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

تنظم FontPair أيضًا إلهامًا لإقران الخطوط ، خاصة لخطوط Google. يمكنك الفرز حسب مجموعات نمط النوع مثل sans-serif و serif أو serif و serif.

أخيرًا ، هناك الكثير من مجموعات اقتران الخطوط التي أنشأها المصممون عبر الإنترنت. فمثلاأسلوب الطباعة: مجموعات خطوط Google والطباعة:Google Fonts Combinations Volume 2. ابحث فقط عن "اقتران الخطوط" على مواقع مثل Behance و Dribbble.

اختر الخطوط الخاصة بك

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

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

لهذا السبب ، قبل اختيار الخط ، ابحث عن الغرض المقصود منه.

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

بالنسبة لخطوط الويب ، يمكنك استخدام Google Fonts و Typekit و Font Squirrel. Google Fonts مجاني ، و Typekit و Font Squirrel بهما خطوط مجانية ومدفوعة.

تحديد أحجام الخط

الخطوة التالية بعد الاستقرار على مجموعة خطوط هي تحديد الحجم. أداة رائعة لهذا هي مقياس Modular Scale بواسطة Tim Brown ، رئيس الطباعة في Adobe. مقياس نمطي هو نظام لتحديد النسب الممتعة تاريخيًا لإنشاء مقاييس لتحديد أحجام الكتابة.

For example, you might use a scale based on the golden ratio. Here would be your first five computed font size options:

Golden Ratio (1:1.618)
1.000 x 1.618 = 1.6181.618 x 1.618 = 2.6182.618 x 1.618 = 4.2364.236 x 1.618 = 6.8546.854 x 1.618 = 11.089

One issue that you might encounter is that your ratio is too large. Take a look at what happens to the later intervals of our scale based on the golden ratio.

Golden Ratio (1:1.618)
...11.089 x 1.618 = 17.94217.942 x 1.618 = 29.0329.030 x 1.618 = 46.97146.971 x 1.618 = 75.99975.999 x 1.618 = 122.966

As you can see, the intervals between numbers start to become too large. For most interfaces, you need smaller intervals. Thankfully, Modular Scale has a variety of ratios based on geometry, nature, and music.

Minor Second 15:16 Major Second 8:9Minor Third 5:6Major Third 4:5...

So instead of using the golden ratio, you can use a ratios that yield smaller intervals like the Perfect Fourth.

Perfect Fourth (3:4)
...9.969 x 1.333 = 13.28813.288 x 1.333 = 17.71317.713 x 1.333 = 23.61223.612 x 1.333 = 31.47531.475 x 1.333 = 41.95641.956 x 1.333 = 55.927

Once you have settled on a scale, you can cherry pick font sizes from your list and round them to the nearest decimal.

Font Sizes
Header 1: 55pxHeader 2: 42pxHeader 3: 31pxHeader 4: 24pxHeader 5: 14px
Body: 17pxCaption: 14px

The Modular Scale method uses mathematical precision in order to generate font sizes. However, it’s only a guide. Use this method as a starting point and then adjust sizes with your eye.

Create a typography styleguide

The last step of the process is to create a styleguide for your typography to help standardize type across your designs.

In programs like Sketch, you can create shared text styles to quickly insert text with styles already applied from your guideline.

It’s during this step of the process that you can tweak and finalize your text attributes such as color, weight, and size.

A word on color: when choosing color, take into account your color palette. Choose colors for your type that harmonize with your color palette.

In your styleguide, make sure to at least include the following things: font definitions, font sizes, font colors, and example usages.

Google’s Material Design typography guidelines is a good example of what to include in a styleguide. A couple of other examples includes the typography guides of Mailchimp, Apple, and Focus Labs.

Typography is all about experimentation. It’s both a science and an art.

I challenge you to break out of your comfort zone and explore type in your design.

What are your favorite fonts? Leave me a note or send me a tweet on Twitter.

If you enjoyed this article, you might also enjoy CSS in Javascript with Aphrodite, a library by Khan Academy.

CSS in Javascript: The future of component based styling

هذا الأسبوع ، أود أن أقدم لكم مفهوم CSS في جافا سكريبت مع أفروديت من أكاديمية خان. أفروديت يتيح… medium.com

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

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