Типографията може да направи или наруши вашия дизайн: процес за избор на тип

Едно от най-важните умения, които можете да научите като дизайнер, е как да изберете тип. Това е така, защото текстът е един от основните начини, по които дизайнерите могат да общуват с потребителите. Типографията може да направи или разчупи дизайн.

Типографията има красота и сложност. Някои хора посвещават цялата си кариера на типа. За щастие работата им е добре документирана, така че имаме множество онлайн ресурси за типография.

Тази статия е създадена, за да служи като отправна точка, за да ви помогне да се научите как да избирате тип за вашите дизайни. Това ще ви насърчи да изследвате шрифтове и комбинации от шрифтове извън познатите.

Определете целта си

Преди да направите нещо друго, първо определете целта на вашия дизайн. Каква информация искате да предадете? Каква е средата за вашия дизайн?

Добрият дизайн привежда своята типография в съответствие с нейната цел. Това е така, защото типографията е ключова за определяне на настроението, тона и стила във вашите дизайни.

Например, ако проектирате поздравителна картичка с тежка илюстрация, изберете шрифт, който отговаря на стила на вашата илюстрация. Хармонизирайте вашия тип с останалата част от вашия дизайн.

Ако проектирате управлявана от изображения целева страница, изберете обикновен шрифт, който да не влошава вашите изображения. Използвайте типа като начин за подчертаване на информацията за предаване на значението.

Идентифицирайте аудиторията си

След като определите целта на вашия дизайн, идентифицирайте аудиторията си. Тази стъпка е от решаващо значение, тъй като възрастта и интересът ще повлияят на опциите ви за шрифтове.

След изясняване на целта на вашия дизайн, идентифицирайте аудиторията си. Тази стъпка е от решаващо значение, тъй като информация за вашите потребители като възраст, интереси и културно възпитание може да повлияе на решенията, които вземате за вашия тип.

Например, някои шрифтове са по-подходящи за деца. Когато се учат да четат, децата се нуждаят от четливи шрифтове с щедри буквени форми. Добър пример за това е Sassoon Primary. Sassoon Primary е разработена от Розмари Сасун и въз основа на нейното изследване за това какъв вид писма децата са били лесни за четене.

Другите шрифтове са по-подходящи за възрастни хора. Удобните за възрастни шрифтове използват четливи размери, силно контрастни цветове и избягват скриптове и декоративни стилове.

Когато избирате тип, вземете предвид вашата аудитория и нейните нужди. Просто казано, съпреживявайте вашите потребители .

Търсете вдъхновение

Погледнете работата на други дизайнери. Опитайте да разберете как са взели решенията си за тип.

Вдъхновение на шрифта

За вдъхновение на шрифта, 100-те най-добри безплатни шрифта от CreativeBloq са чудесна статия, която ще ви постави в правилното мислене за избор на тип. В статията CreativeBloq обяснява мотивацията зад всеки шрифт.

Друг полезен ресурс е 100 Greatest Free Fonts Collection за 2015 г. от Awwwards.

Invision също така изготви гигантски репо на типографски ресурси. Там ще намерите много източници за вдъхновение.

За вдъхновение от действителните уебсайтове разгледайте Typ.io. Сайтът лекува вдъхновение за шрифтове от цялата мрежа. Освен това сайтът предоставя CSS дефиниции на шрифтове в долната част на всяка проба за вдъхновение.

Освен да разглеждате специализирани уебсайтове за вдъхновение на шрифтове, посетете любимите си сайтове и проверете какви шрифтове използват. Добър инструмент за това е WhatTheFont. WhatTheFont е разширение за Chrome, което ви позволява да проверявате уеб шрифтовете, като задържите курсора на мишката върху тях.

Сдвояване на вдъхновение

Освен шрифтовете, погледнете и вдъхновението за сдвояване на шрифтове. Сдвояването на шрифта е също толкова важно, колкото и самите шрифтове. Доброто сдвояване на шрифтове помага да се установи визуална йерархия и да се подобри четливостта на вашите дизайни.

За вдъхновение започнете с Typewolf. Typewolf лекува вдъхновение за сдвояване на шрифтове от различни сайтове. Освен това те също имат препоръки за шрифтове и задълбочени ръководства за типография. Това е съкровище за типографите.

FontPair също лекува вдъхновение за сдвояване на шрифтове, специално за Google Fonts. Можете да сортирате по комбинации от стилове тип, като безсерифа и серифа, или серифа и серифа.

И накрая, има множество колекции от сдвояване на шрифтове, създадени от дизайнери онлайн. НапримерТипография: Комбинации от шрифтове на Google и типография:Комбинации от шрифтове на Google том 2. Просто потърсете „сдвояване на шрифтове“ на сайтове като Behance и Dribbble.

Изберете вашите шрифтове

Въоръжени с изследвания и вдъхновение, вие сте готови да изберете своя тип. Когато става въпрос за избор на тип, имайте предвид следните принципи: четливост, четливост и цел .

Изберете шрифтове, които са конвенционални и лесни за четене. Избягвайте силно декоративни шрифтове в полза на прости и практични шрифтове. Също така, имайте предвид целта на шрифта. Например, някои шрифтове са по-подходящи за заглавки, а не за основен текст.

Поради тази причина, преди да изберете шрифт, проучете предназначението му.

In terms of font pairing, keep it simple with a maximum of three different fonts. In addition, pair fonts that contrast one another. Doing so will help guide the eyes of readers, first to headers and then to body texts. You can also create visual contrast using different font sizes, colors, and weights.

For web fonts, you can use Google Fonts, Typekit, and Font Squirrel. Google Fonts is free, Typekit and Font Squirrel have free and paid fonts.

Determine font sizes

The next step after settling on a font combination is determining sizing. A great tool for this is Modular Scale by Tim Brown, the head of typography at Adobe. Modular Scale is a system for identifying historically pleasing ratios to create scales to determine type sizes.

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

This week, I want to introduce you to the concept of CSS in Javascript with Aphrodite by Khan Academy. Aphrodite lets…medium.com

You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.

P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.