Донецкий техникум промышленной автоматики

Види шрифтів у веб-дизайні і поради щодо вибору правильного шрифту

  1. 1. Які розрізняють види шрифтів?
  2. 2. Чому вибір шрифту такий важливий?
  3. 3. Як правильно вибрати шрифт
  4. Ваш шрифт доречний?
  5. Ваш шрифт універсальний?
  6. Ваш шрифт читається?
  7. Як поєднувати різні шрифти
  8. Де знайти безкоштовні шрифти
  9. ліцензування шрифтів
  1. Які розрізняють види шрифтів?
  2. Чому вибір шрифту такий важливий?
  3. Як правильно вибрати шрифт?
  4. У цьому керівництві ви знайдете все, що вам потрібно знати про шрифти: види шрифтів, як правильно їх вибирати і використовувати, а також де знайти безкоштовні шрифти.

    1. Які розрізняють види шрифтів?

    Існує величезна різноманітність шрифтів, включаючи ті, що не піддаються ніякій класифікації. Майстри типографіки і дизайнери скажуть вам, що виділяють не одну класифікацію зі своїми історичними і технічними особливостями. Ви, можливо, чули про такі класифікаціях, як Old Style, Blackletter і Humanist. Але це не предмет нашої статті. (Якщо ви хочете дізнатися більше, то без зусиль знайдете цікавий контент на цю тему в інтернеті). У цій статті ми розглянемо чотири основні категорії, знати які буде корисно для того, щоб вдало підбирати, комбінувати кілька шрифтів і грамотно аргументувати свій вибір.

    1) Serif: У категорії «Серіф» літери на кінцях мають невеликі зарубки (або рисочки). Зазвичай такі літери виглядають серйозно і традиційно.

    2) Sans-serif: У категорії «санс-Серіф» літери не мають зарубок на кінцях, що надає їм більш сучасний, «чистий» вид. Вважається, що шрифт «Серіф» полегшує візуальне сприйняття великих фрагментів друкованого тексту, допомагаючи очам ковзати по рядках. Але оскільки більшість шрифтів із зарубками - дрібні і тонкі, вони не кращим чином відображаються на піксельних екранах. Вони виглядають не чітко, створюючи спотворену і «гучну» картинку. З цієї причини для екранів або сайтів (особливо компактних) дизайнери вважають за краще використовувати текст без зарубок.

    3) Script: Скрипти являють собою гарні курсивні або рукописні шрифти, в яких літери зазвичай з'єднуються один з одним. Вони використовуються для досягнення різних цілей: щоб створити елегантний, веселий і невимушений рукописний текст.

    4) Decorative: Декоративні шрифти покликані привернути увагу аудиторії. Їх не можна назвати практичними, тому використовуються вони обережно або тільки для певного ефекту або мети.


    2. Чому вибір шрифту такий важливий?

    Деякі дизайнери порівнюють вибір шрифту з вибором одягу. Треба визнати, що таке порівняння як не можна більш вдале. Подумайте про те, що може розповісти про вас ваш образ. Дивлячись на вашу одяг, люди судять (вірно або невірно) про ваш стиль, особистих якостях, соціально-економічне становище, віком (або тому віці, на який ви прагнете виглядати) і враження, яке ви хочете зробити. Більш того, різні події і обставини зобов'язують вас вибирати певний одяг: адже ви не прийдете на співбесіду в купальнику, а костюм з краваткою - чи хороший варіант для пляжного відпочинку. Іншими словами, вам доводиться думати про доречність і доцільність тієї чи іншої одягу.

    Вони служать для тієї ж мети, що і одяг. Вони створюють то перше враження, за яким аудиторія судить про інших елементах візуального образу вашої компанії. Тому обраний вами шрифт повинен переслідувати певну мету і бути доречним в даному контексті. Перевірте, чи не кричить він «пляжний відпочинок», в той час як він повинен транслювати ідею «співбесіди»? Його елементи конфліктують один з одним або ж гармонійно доповнюють один одного? Вони дійсно відображають якості, які ви хочете транслювати своєї аудиторії? Відповіді на ці питання вимагають ретельного аналізу. Ось чому не можна недооцінювати важливість вибору шрифту в процесі створення візуального образу.

    Нерідко він задає тон всьому дизайну і впливає на сприйняття дизайну аудиторією і її взаємодія з ним. Точно так само відбувається і в повсякденному житті: заявив ви на офіційний прийом в футболці і шортах, люди сформують про вас відповідну думку. Не дозволяйте своїй аудиторії робити неправильні висновки про свій бренд або бізнесі; невдало підібраний шрифт здатний спотворити транслюється вами ідею і, відповідно, ваші наміри.

    Не знаєте, з чого почати? У наступному розділі ми докладно і зрозуміло розповімо, як правильно вибирати і використовувати його, а також дамо кілька корисних практичних порад.

    3. Як правильно вибрати шрифт

    основи

    Отже, вам потрібно вибрати шрифт, який би відповідав ідеї і цілі вашого дизайну. Але не поспішайте шукати його на своєму комп'ютері або купувати в інтернеті. Спочатку слід визначитися з тим, які якості або характеристики ви хочете транслювати за допомогою вашого дизайну.

    Таким чином, коли ви будете вибирати шрифт, у вас вже буде уявлення про те, що вам потрібно. Пам'ятайте, що кожне зображення має свій настрій і характер. Серед букв - як і серед людей - зустрічаються серйозні, невимушені, веселі і елегантні екземпляри. Щоб зрозуміти, чи підходить вам той чи інший варіант, постарайтеся розгадати його посил навколишнього світу.

    Якщо транслюються шрифтом якості не відповідають ідеї вашого дизайну, ваша аудиторія не зможе вас правильно зрозуміти. Зіткнувшись з величезним вибором, легко захопитися і піти на поводу у своїх особистих переваг. Але в цій ситуації ви ходите по тонкому льоду: шрифт, який симпатичний особисто вам, може бути абсолютно недоречним для вашого проекту.
    Чи відчуваєте, що зайшли в глухий кут? Тоді просто запитайте себе, підкреслює обраний вами варіант необхідні якості вашого бренду і чи відповідає він цілі вашого дизайну. Якщо відповідь ствердна, то ви, швидше за все, зробили правильний вибір.

    Враховуйте контекст і аудіторію.Где і як ваша аудиторія буде бачити ваш дизайн? Це ще один важливий фактор, що впливає на вибір. Наприклад, для візитної картки потрібен текст, який залишається легко читаним навіть в маленькому розмірі. А якщо ви працюєте над графічними зображеннями для соціальних мереж, які будуть проглядатися переважно з мобільних пристроїв, вам слід віддати перевагу буквах, які чітко відображаються на екрані (html сторінці).

    Також подумайте про те, хто буде оцінювати ваш дизайн. Який вік вашої цільової аудиторії? Які її інші демографічні показники? Чи здатний ваш шрифт встановити емоційний зв'язок з вашими потенційними клієнтами?

    Ваш шрифт доречний?

    Крім настрою, характеру і відповідності контексту, він також володіє такою характеристикою, як «доречність». Чи буде обраний вами варіант ефективний там, де ви збираєтеся його використовувати? Чи буде він практичним і легко читаним в контексті вашого дизайну?

    Одна з найбільш поширених помилок серед новачків пов'язана з нерозумінням того, як найкраще використовувати кожну окрему категорію шрифтів (наприклад, де доречніше виглядатимуть шрифти для основного тексту, а де - декоративні). Шрифти для основного тексту використовуються в книжкових, журнальних чи газетних текстах, контенті сайту, великих фрагментах тексту. Вони легко сприймаються людським оком, не відволікаючи читача від самого тексту. До цієї категорії відносяться, наприклад, Times New Roman і Arial.

    Декоративні (про них ми згадували на самому початку цієї статті), навпаки, не призначені для об'ємних уривків тексту
    Декоративні (про них ми згадували на самому початку цієї статті), навпаки, не призначені для об'ємних уривків тексту. Притягаючи вся увага на себе, такі шрифти використовуються для різних цілей. Наприклад, шрифти з жирними великими букви підходять для заголовків. Шрифти з запорошеними снігом буквами це ідеальний варіант для Різдва; а букви, немов сплетені з гілок дерев, вкажуть на зв'язок вашого бренду з навколишнім середовищем і діяльністю на відкритому повітрі. Проте, для професійного, ділового контексту потрібні більш суворі і лаконічні рішення.

    Декоративні букви мають великий потенціал, але при неправильному використанні вони можуть додати вашому дизайну неохайний, нечитаний і навіть несерйозний вид. Отже, на відміну від шрифтів для основного тексту, декоративні - слід використовувати для вибіркових фрагментів тексту і строго з певною метою. Якщо у вас є сумніви, то краще не ризикувати і вибрати більш нейтральний варіант. У наступному розділі ми розповімо, як вибрати гарний, універсальний і функціональний шрифт, який стане справжньою знахідкою для вашого графічного проекту.

    Ваш шрифт універсальний?

    Кожен дизайнер повинен мати в запасі кілька нейтральних універсальних шрифтів. Вони справжня палочка-виручалочка, коли часу катастрофічно не вистачає, а інші варіанти не підходять. Зазвичай це «Serif» і «Sans-Serif», які можна з успіхом використовувати практично скрізь. Найбільш функціональними є варіанти, що мають різну насиченість (світлі, нормальні, середні, жирні і важкі) і стилі (вузькі, стислі, розтягнуті або малі великі літери).

    Така різноманітність варіантів (особливо для дизайнів з великою кількістю тексту) дозволяє використовувати різні стилі одного і того ж шрифту для різних функцій і скласти з них єдиний, гармонійний дизайн. Ось чому з універсальним варіантом (особливо якщо ви плануєте використовувати лише один) створити привабливий, читабельний дизайн набагато простіше.

    Але як вибрати таку «робочу конячку»? У минулому році більше 40 провідних дизайнерів поділилися своїм улюбленими універсальними шрифтами. І хоча переваги значно різнилися, найбільш часто експерти згадували Avenir (і Avenir Next - його версію, адаптовану під веб-сторінки). Якщо ви вирішите купити його, то відразу попереджаємо, що це не дешевий варіант.

    Але не турбуйтеся: ви не розоритеся на універсальних шрифтах. В інтернеті та операційних системах є велика різноманітність безкоштовних шрифтів. Може, вони і поступаються професійним варіантів, але вони чудово підійдуть для повсякденних потреб. Якщо ви шукайте варіант в категорії «Serif», зверніть увагу на Crimson Text, Georgia, Droid Serif, Andada, Merriweather і Heuristica. З категорії «Sans-Serif» ми рекомендуємо Franklin Gothic, Roboto, Clear Sans, Source Sans, Lato і Merriweather Sans.

    З категорії «Sans-Serif» ми рекомендуємо Franklin Gothic, Roboto, Clear Sans, Source Sans, Lato і Merriweather Sans

    Ваш шрифт читається?

    Якщо ви включаєте в свій дизайн текст, то у вас точно є, що сказати своїй аудиторії. Наявність тексту зобов'язує вас підібрати читабельний шрифт, щоб донести до аудиторії свою ідею. Але як зрозуміти, що обраний вами варіант розбірливий і чіткий, крім як на підставі суб'єктивної оцінки? Ось кілька порад:

    • Розмір: Підберіть такий розмір, який би гармонійно виглядав у вашому контексті. Наприклад, для візитки і постера потрібні шрифти різних розмірів. Якщо аудиторія буде переглядати ваш дизайн з мобільних пристроїв, відкрийте будь-який текстовий редактор, надрукуйте кілька рядків обраним вами шрифтом і зменшіть його розмір. Якщо ви як і раніше без праці читаєте текст, то він, швидше за все, підійде для невеликих екранів. Пошукайте Google інформацію про певний шрифті, щоб дізнатися, оптимізований він під веб-сторінки.
    • Відстань: Відстань між знаками може відігравати велику роль в поліпшенні читабельності тексту. Звичайно чим воно більше, тим легше сприймається текст. Але якщо вам не вистачає місця, варто поекспериментувати з різними комбінаціями розміру шрифту і відстані. Практично в будь-якому графічному редакторі ви можете відрегулювати спейсінг (відстань між цілими групами букв в рядках або фрагментах тексту), кернінг (відстань між парами букв) і лідинг (вертикальна відстань між рядками).
    • X-висота: Це висота малих літер. Достатня X-висота покращує читабельність, зберігаючи її навіть при зменшенні масштабу. Однак не варто наближати X-висоту до висоти великих літер, оскільки це ускладнить відмінність між нижнім і верхнім регістрами.
    • Тест I / l / 1: Якщо ви вибрали шрифт для фрагментів тексту, які містять і букви, і цифри, проведіть один простий тест. Надрукуйте велику літеру I, малу літеру L і цифру 1. Якщо вони вийшли схожими, то він може ввести читачів в оману.

    Як поєднувати різні шрифти

    Підібрати два або більше гармонують один з одним шрифту - завдання не з простих. Вони повинні доповнювати один одного, але при цьому не бути занадто схожими. Вони повинні бути різними, але не настільки різними, щоб вони конфліктували один з одним. Щоб уникнути таких крайнощів, потрібно багато експериментувати, так що приготуйтеся пройти шлях проб і помилок.

    Пошук ідеального поєднання не є послідовним процесом. Підбираючи вдалу комбінацію, ви керуєтеся своїми індивідуальними уподобаннями, досвідом, інстинктом і візуальним сприйняттям. Ось кілька правил, які допоможуть вам знайти вдале рішення:

    • Знайдіть загальну характеристику: шрифти, які виглядають по-різному, але при цьому мають щось спільне, як правило, добре виглядають разом. Наприклад, у них однакова ширина або висота букв або однакова структура. Навіть незначна схожість здатна надати комбінації єдність.
    • Віддавайте перевагу шрифтів від одного дизайнера: Дизайнерів можна дізнатися по їх унікальному стилю, неповторною естетиці. Шрифти одного і того ж автора схожі (за зовнішнім виглядом або структурі), тому їх легко комбінувати. Пошукайте так звані суперсімейства. У них входять комплементарні шрифти із зарубками і без зарубок, з різними ступенями насиченості і різними стилями. Спробуйте, наприклад, безкоштовні суперсімейства Alegreya і Alegreya Sans (кожне з них містить 40 варіантів насиченості / стилю) або Merriweather і Merriweather Sans, які ми також рекомендували в якості універсальних рішень.
    • Визначте мета кожного шрифту: вони повинні бути досить різними, щоб створювати чітку візуальну ієрархію і підказувати аудиторії, на що звертати увагу і що є важливим. Для цього зазвичай вистачає одного варіанту із зарубками і одного - без зарубок.

    Але як зрозуміти, що шрифтів занадто багато? Деякі дизайнери вважають, що для більшості проектів потрібен лише один шрифт і що максимальна кількість варіантів - три. Якщо в сфері дизайну ви ще новачок, то вам не зашкодить прислухатися до цих рекомендацій. Але по суті, тут немає ніяких правил. Або, принаймні, таких правил, які не можна було б порушити в певній ситуації. Наприклад, деяким дизайнам просто необхідна велика різноманітність для створення певної естетики.

    Де знайти безкоштовні шрифти

    Шукайте цікаві шрифти для експериментів, але поки не готові відкривати свій гаманець? На щастя, існує величезна кількість сайтів (різної якості) з безкоштовними шрифтами. Коли будете їх скачувати обов'язково перевірте наявність ліцензії. Ми ще зупинимося на цьому докладніше, ну а поки ось кілька ресурсів, де ви можете знайти прекрасні колекції:
    1) Font Squirrel : Це, напевно, кращий сайт з безкоштовними шрифтами, ліцензованими для комерційного використання (всі до єдиного!). Тут ви знайдете велику колекцію якісних, відібраних вручну варіантів. Пошук можна здійснювати за категоріями або тегами (звичайні, ретро, ​​гранж).

    2) Google Fonts : Це каталог безкоштовних шрифтів для веб-сайтів та інших веб-проектів і програм. Колекція містить сотні загальнодоступних шрифтів, які можна редагувати, поширювати і т.д. Всі вони оптимізовані під веб-сторінки і супроводжуються інструкціями про те, як додати відповідний html код на свій веб-сайт або інтегрувати його в свій CSS. Більш того, ви можете завантажити шрифти на свій комп'ютер і використовувати їх на друкованих носіях.

    3) DaFont : На даний момент цей ресурс пропонує 25 000 безкоштовних загальнодоступних демо-шрифтів. Але оскільки свої роботи в цю базу може додати будь-який користувач, то тут зустрічаються шрифти абсолютно різної якості. Багато варіантів безкоштовні тільки для особистого використання.

    4) +1001 Fonts : Зараз в базі є 7 000 безкоштовних шрифтів різної якості. Тут ви знайдете спеціальний розділ з безкоштовними шрифтами для комерційного використання. Пошук можна здійснювати за типом / стилю / настрою, тимчасовим епох і навіть свят.

    5) Інші ресурси: вони пропонують досить скромні колекції, але там теж можна знайти цілком пристойні варіанти.

    Lost Type Co-Op: Трояндова, унікальні і вантажні шрифти, доступні для особистого використання на основі «заплати, скільки вважаєш за потрібне». Ви навіть можете не платити нічого, але чому б не підтримати дизайнерів?

    Fontfabric: Невелика, але різноманітна колекція безкоштовних професійних шрифтів. Час від часу в базу додаються нові варіанти.

    FontShop: Тут майже все є на платній основі, але деякі варіації з насиченістю і стилями ви отримаєте безкоштовно. Для скачування необхідно зареєструвати аккаунт.

    Pixel Buddha: На цьому сайті є скромний розділ з оригінальними, намальованими вручну шрифтами. Вони хоч і безкоштовні, але, щоб їх завантажити, доведеться зареєструвати акаунт.

    ліцензування шрифтів

    Коли ви купуєте шрифт або завантажуєте його безкоштовно, це не завжди означає, що тепер ви можете робити з ним все, що захочете. Перш ніж використовувати його, обов'язково перевірте його ліцензію. Зазвичай вони ліцензовані для особистого, комерційного або освітнього використання.

    Деякі шрифти ма ють обмеження по частоті їх использование у прессе або онлайн. Також може бути зазначено, чи дозволено поширення того чи іншого шрифту, і якщо так, то на яких умовах. Уважно ознайомившись з ліцензією обраного вами варіанту, ви захистите себе і / або свого клієнта.

    Надихнулися? Тоді почніть створювати дизайн з приголомшливими шрифтами вже сьогодні!
    Щоб навчитися правильно їх використовувати в своїх графічних проектах, потрібно багато тренуватися і експериментувати. Ми сподіваємося, що це керівництво мотивує вас розширити свої знання про підбір і використанні шрифтів. Діліться своїми улюбленими шрифтами і корисними ресурсами в коментарях.

1. Які розрізняють види шрифтів?
2. Чому вибір шрифту такий важливий?
Ваш шрифт універсальний?
Ваш шрифт читається?
Чому вибір шрифту такий важливий?
Як правильно вибрати шрифт?
1. Які розрізняють види шрифтів?
Перевірте, чи не кричить він «пляжний відпочинок», в той час як він повинен транслювати ідею «співбесіди»?
Його елементи конфліктують один з одним або ж гармонійно доповнюють один одного?
Вони дійсно відображають якості, які ви хочете транслювати своєї аудиторії?