От @jonathanzwhite

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

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

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

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

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

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

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

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

Изберете шрифт, който отговаря на стила на вашата илюстрация

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

Ако изображенията са в центъра на вашия дизайн, изберете прости шрифтове, така че изображенията да изпъкват

Определете аудиторията си

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

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

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

Основен Sassoon е разработен Rosemary Sassoon

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

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

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

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

Шрифт вдъхновение

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

Друг полезен ресурс е 100-те най-големи колекции безплатни шрифтове за 2015 г. от Awwwards.

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

Typ.io подхранва шрифтово вдъхновение от цялата мрежа

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

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

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

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

Сдвояването на шрифтове е също толкова важно, колкото самите шрифтове

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

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

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

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

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

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

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

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

Сдвоявайте шрифтове, които се контрастират един с друг

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

За уеб шрифтове можете да използвате Google Fonts, Typekit и Font Squirrel. Google Fonts е безплатен, Typekit и Font Squirrel имат безплатни и платени шрифтове.

Определете размерите на шрифта

Следващата стъпка след установяване на комбинация от шрифтове е определянето на оразмеряването. Чудесен инструмент за това е модулната скала на Тим Браун, ръководител на типографията в Adobe. Modular Scale е система за идентифициране на исторически приятни съотношения за създаване на везни за определяне на типовите размери.

Modular Scale е система за идентифициране на исторически приятни съотношения за създаване на везни за определяне на типовите размери

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

Златна съотношение (1: 1.618)
1.000 х 1.618 = 1.618
1.618 х 1.618 = 2.618
2.618 х 1.618 = 4.236
4.236 х 1.618 = 6.854
6.854 х 1.618 = 11.089

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

Златна съотношение (1: 1.618)
...
11.089 х 1.618 = 17.942
17.942 х 1.618 = 29.03
29.030 х 1.618 = 46.971
46.971 х 1.618 = 75.999
75.999 х 1.618 = 122.966

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

Минор втори 15:16
Основен втори 8: 9
Малка трета 5: 6
Основен трети 4: 5
...

Така че вместо да използвате златното съотношение, можете да използвате съотношения, които дават по-малки интервали като Перфектната четвърта.

Идеална четвърта (3: 4)
...
9.969 х 1.333 = 13.288
13.288 х 1.333 = 17.713
17.713 х 1.333 = 23.612
23.612 х 1.333 = 31.475
31.475 х 1.333 = 41.956
41.956 х 1.333 = 55.927

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

Размери на шрифта
Заглавие 1: 55px
Заглавие 2: 42px
Заглавие 3: 31px
Заглавие 4: 24px
Заглавие 5: 14px
Тяло: 17px
Надпис: 14px

Методът Modular Scale използва математическа точност, за да генерира размери на шрифта. Това обаче е само ръководство. Използвайте този метод като начална точка и след това коригирайте размери с окото си.

Създайте ръководство за стил на типография

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

Споделени стилове в Sketch

В програми като Sketch можете да създадете споделени стилове на текст за бързо вмъкване на текст със стилове, които вече са приложени от вашата насока.

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

Дума за цвят: когато избирате цвят, вземете предвид вашата цветова палитра. Изберете цветове за вашия тип, които се хармонизират с вашата цветова палитра.

Използвайте ръководства за стил, за да стандартизирате типа във вашия дизайн

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

Насоките за типография на дизайн на материали на Google са добър пример за това какво да се включи в ръководство за стил. Няколко други примера включват ръководствата за типография на Mailchimp, Apple и Focus Labs.

Типографията е свързана с експериментирането. Това е и наука, и изкуство.

Предизвиквам ви да излезете от зоната си на комфорт и да проучите типа в дизайна си.

Кои са любимите ви шрифтове? Оставете ми бележка или ми изпратете туитър в Twitter.

Ако ви хареса тази статия, може да се насладите и на CSS в Javascript с Aphrodite, библиотека на Khan Academy.

Можете да ме намерите в Medium, където публикувам всяка седмица. Или можете да ме последвате в Twitter, където публикувам нечувствени разправии за дизайн, разработка на предния край и виртуална реалност.

Послепис Ако ви хареса тази статия, това ще означава много, ако щракнете върху и споделите с приятели.