Який шрифт вибрати? Практичне керівництво по вибору шрифту для сайту

1

Від автора: друкарська розмітка – широке поле діяльності. Люди присвячують роки свого життя цього давнього ремесла, і завжди знайдеться що-небудь нове для вивчення. У цій статті, я зроблю огляд основних моментів, які слід вирішити при виборі шрифту для свого сайту і гарнітури (набір з одного або декількох шрифтів). Після чого питання на кшталт «Який шрифт вибрати?» у вас відпадуть самі по собі.

Практична типографська розмітка

При створенні дизайну для Мережі вам потрібно взяти до відома, що контент буде змінюватися. Про те, щоб витрачати час на кернінг (підгонку пробілів між окремими літерами) кожного заголовка великого вебсайту, питання навіть не стоїть. Іншими словами, ви відмовляєтеся від контролю.

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

Читабельність при виборі шрифту

Перед тим як вибрати шрифт для сайту, вам слід відповісти на деякі питання. Що ви робите з написаним? Читаєте! Чому ж безліч вебсайтів так сильно ускладнюють цю справу? Будь то крихітний розмір шрифту, безсистемна висота рядка або навіть прості потворні шрифти – здається, багато сайтів не хочуть вам дати можливість нормально прочитати вміст свого!

Зробивши написане читання, ви негайно випередите принаймні половину своїх конкурентів, що насправді здорово, тому що не так вже й складно!

Як вибрати гарнітуру шрифту?

Вирішуючи, яку гарнітуру застосувати на своєму вебсайті, важливо пам’ятати: не перемудрите. Я знаю, як багато дизайнерів недолюблюють використання Helvetica тому, що вона широко застосовується. Я згоден, але це твердження залишає осторонь важливі дані: чому. Люди занадто часто користуються Helvetica, бо він страшенно хороший. Він відмінно підходить до будь-якого дизайну, який тільки можна собі уявити, добре працює як в малому, так і великому розмірі.

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

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

Це що стосується основного тексту, але як щодо заголовків, який шрифт вибрати саме для них?

Обчислити читабельність великих заголовків набагато простіше, ніж основних текстів. Якщо можна негайно розрізнити, про що там пишеться, то заголовок доволі читабельний.

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

Не існує формули вибору вірних шрифтів вашого вебсайту. Часто найкращий спосіб вирішити, на якому зупинитися – це спробувати кожен, який, як ви вважаєте, чи повинен працювати, а потім порівняти їх. Вибір шрифтів насправді инстинктивен, але важливо пам’ятати, що 90% часу користувач не буде роздумувати, що ж це за шрифт був тут застосований, так що якщо він читаємо – значить, досить хороший.

гарнитура шрифта

Вибір пари

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

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

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

Саймон Коллісон (Simon Collison) використовує в своєму сайті ідеально підібрані шрифти, вибираючи потужний sans-serif для основних заголовків і простий Serif для всіх інших, менших заголовків, а також для основного тексту. Це партнерство майстерно передає те, що намагається сказати вебсайт так, як не зміг би висловити кожен шрифт окремо.

выбор пары

Розмір

Як правило, дизайнери встановлюють розмір основного тексту як мінімум на 12px. Більшість, однак, вибирають розмір зразок 14px, який читається ще краще. Вибрати розмір шрифту основного тексту досить легко, а складнощі починаються з заголовками.

Наскільки великими повинні бути заголовки? Буває по-різному. Власними спостереженнями і в процесі створення вебсайтів я прийшов до думки, що заголовок повинен бути настільки великим, наскільки потрібно. Це означає, що ви повинні випробувати різні розміри, поки не знайдете достатньо великий для залучення уваги до чого слід, але не більше того, якщо тільки величезний текст – не те, чого ви прагнете, і в такому випадку продовжуйте в тому ж дусі.

размер

Ієрархія

По своїй суті заголовок великий. На сторінці він – важливий елемент, так що, природно, він повинен бути більше, правильно? І так, і ні. Так, заголовки зазвичай більше інших елементів, і ні, це не єдиний спосіб привернути до них увагу. Колір, насиченість і розташування в рівній мірі важливі для установи чіткої візуальної ієрархії ваших сторінок.

Її ключовий момент, про який треба пам’ятати, що все відносно. Текст на сайті просто повинен виділятися у порівнянні з іншими текстами. Візьміть як приклад сайт Вілсона Майнера (Wilson Miner). Його заголовки досить маленькі для своєї важливості і напрочуд близькі за розміром. Однак використання кольору дає можливість розрізнити найважливіші заголовки і надає їм більше ваги.

Иерархия

Використання друкарні дуже важливо для встановлення візуальної ієрархи, будь це за допомогою розміру, кольору, щільності або навіть розміщення.

Міжрядковий інтервал

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

За допомогою властивості CSS line-height (висота рядка) можна легко встановити інтервал між рядками основного тексту. Загалом кажучи, для великих текстових блоків хороший розмір – в 1,5 разів більше розміру тексту. У більш дрібного тексту повинен бути менший міжрядковий інтервал, а у величезного – великий. Насправді не так складно.

Межстрочный интервал

Трекінг

Трекінг – це пробіл між знаками у тексті. Зазначу, що він – щось незрозуміле, коли справа доходить до «практичної розмітки тексту», тут CSS не дає нам сильно контролювати його. Зазвичай в маленькому тексті вам не доведеться турбуватися, це стає проблемою тільки для заголовків. Загалом, при додаванні в CSS letter-spacing: 1px; letter-spacing: 2px; між літерами буде достатній інтервал.

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

Трекинг

Колір

Хоча, строго кажучи, не відноситься до друкарської розмітці, колір – дуже важлива деталь кожного типу веб-сайту. Я кажу не про колірних схемах, а більше про контрасті, потрібному для забезпечення читабельності сайту. Чорний текст на білому (або білому) фоні вважається найбільш читабельним кольором тексту.

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

Цвет

Сітка

На мою думку, застосування сітки – найважливіша ідея практичної розмітки тексту в Мережі. У вас можуть бути відмінні шрифти, відступи і кольору, але якщо відсутня хороша розмітка, ви з таким же успіхом можете застосувати comic sans.

Використання сітки при створенні дизайну з текстами гарантує чіткий баланс і геометричну структуру вашого проекту. Це – не чарівне виправлення поганого дизайну, але якщо з самого початку ви створюєте проект по сітці, то можете бути впевнені, що щонайменше ваша розмітка буде міцною.

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

Вирівнювання тексту по сітці – ключовий метод встановлення візуальної ієрархії і відмінний показник того, наскільки великим або маленьким) повинен бути ваш текст.

Сетка

Виділення

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

Шрифти

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

Вибір унікального шрифту – область відчуттів. Відчувається цей шрифт по-іншому? Або просто виглядає по-іншому? При виборі гарнітур будь-якого проекту завжди потрібно брати до уваги відчуття від дизайну. Так як це суто особиста думка, я не можу допомогти вам знайти унікальну гарнітуру. Можу лише показати приклади шрифтів.

У The Design Cubicle – дуже унікальний логотип і дизайн. Він потужний, однак класний, привертає увагу, але витончений. Коли я дивлюся на цей проект, у мене залишається відчуття високого класу цього сайту. Він каже мені: «Я знаю, що роблю».

Шрифты

Будьте небанальні

Скільки ви знаєте вебсайтів з логотипом розміром у всі вміст? Як щодо ультратонкого заголовка? На відміну від мого останнього пункту, бути небанальним – значить дивитися на те, що роблять інші, а потім зробити все навпаки.

Хлопці з Savvy Belfast розумні. Вони помітили, якими виглядають скутими більшість вебсайтів і вирішили замінити весь безглуздий основний текст одним реченням.

Навіть кинувши на їх сайт єдиний погляд на одну мить, ви не можете не запам’ятати їх назва.

Приводьте свій дизайн у відповідність

Друкарська розмітка – не річ сама в собі. Це частина веб-дизайну, як будь-яка інша. Текст важливий, так, але не слід забувати, що він – лише частина того, що робить ваш проект великим. Ви повинні створювати текст, маючи в голові образ іншого дизайну.

Якщо у вас застосовується хитромудра фонова текстура, то, можливо, вашим заголовкам підійде хороший serif.

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

Емоційний текст

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

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

Вперше відвідавши Solid Giant, я посміхнувся. Я посміхнувся в наступний раз, коли його побачив, і навіть в наступний. Раптово я відчув спорідненість з цим проектом. Ця велика, пухнаста «G» надто чарівна, щоб її можна було забути!

Эмоциональный текст

Якщо чесно, я думаю, що це геніально.

Емоційного дизайну навчити неможливо, це щось, що слід випробувати, а потім обіграти у власних проектах.

Висновок уроку про те який вибрати шрифт для сайту

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

Як ви вважаєте, що найважливіше в друкарської розмітці сайту? Залиште свою думку в коментарях!