Веб-дизайн для дітей: Типографіка

13

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

Що таке типографіка?

Типографіка скрізь. Це те, як ми бачимо написані слова. А отже, скрізь, де ми бачимо слова, ми бачимо типографіку. Слова можуть бути як на екранах, газетах, так і на вивісках.

Веб-дизайн для дітей: Типографіка

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

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

Typeface проти Fonts

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

У нашому дизайні Tuts+Town застосовано шрифт «Open Sans». Ми використовуємо різні розміри і насиченість у typeface, а вони в свою чергу підказують, який шрифт вантажити на сторінці.

Веб-дизайн для дітей: Типографіка

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

Serif проти Sans-Serif

Typeface може бути serif (із зарубками) або sans-serif (без засічок). Serif це шрифт із зарубками на кінцях деяких літер. Шрифт serif з зарубками:

Веб-дизайн для дітей: Типографіка

Наш шрифт Open Sans це шрифт без зарубок; тобто без засічок. У sans-serif шрифтів немає цих зарубок, як на букві нижче:

Веб-дизайн для дітей: Типографіка

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

Шрифти типу serif легше читати на папері або в тих випадках, якщо тексту забагато. У той час як, sans-serif буде краще виглядати на екранах або з маленькими об’ємами тексту.

Частини шрифту

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

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

Давайте швидко пробіжимося по деяким деталям шрифту, щоб краще зрозуміти, як ці деталі можуть поліпшити (або зробити гірше) наш загальний дизайн:

Веб-дизайн для дітей: Типографіка

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

Відстань

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

З-за занадто маленького відстані між літерами і словами шрифт «злипається», в той час як велика відстань теж негативно позначається на читаності тексту та можливості стежити за ним.

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

Кернінг та Трекінг

Керинг це відстань між кожним символом.

Веб-дизайн для дітей: Типографіка

Кожен шрифт, який ми використовуємо, має власні значення кернінгу, але ми можемо змінити їх за допомогою CSS і властивості letter-spacing:

h1 {
letter-spacing: 5px;
}

Трекінг це відстань між кожною групою символом або слів.

Веб-дизайн для дітей: Типографіка

Якщо шрифт за замовчуванням дуже маленьку відстань між словами, ми можемо змінити його з допомогою властивості word-spacing:

h1 {
word-spacing: 15px;
}

Лидинг

Лидинг це міжрядкова відстань пропозицій.

Веб-дизайн для дітей: Типографіка

Ми можемо змінити міжрядковий інтервал, встановлене за замовчуванням для шрифту, використовуючи властивість line-height.

p {
line-height: 2;
}

Значення 2 забезпечить нам подвійне міжрядкова відстань від значення за замовчуванням.

Висячі рядки (Вдови і сироти)

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

Веб-дизайн для дітей: Типографіка

«Сиротою» називають слова, які опинилися на першому рядку іншої колонки. Зазвичай за ними слідує новий абзац.

Веб-дизайн для дітей: Типографіка

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

Налаштувати розмір шрифту

Налаштувати ширину контейнера

Додати або видалити текст

Або налаштувати кернінг або трекінг тексту

Вирівнювання тексту

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

Ліве вирівнювання

На веб-сторінках текст повинен бути, як правило, вирівняно по лівому краю (знову ж таки, для мов, які пишуться зліва направо), тому що всі ми звикли до такого формату.

Веб-дизайн для дітей: Типографіка

Вирівнювання по центру

Вирівнювання по центру часто використовується для назв і заголовків. Таке вирівнювання допомагає виділити заголовки основного тексту. Ми можемо вирівняти текст по центру CSS властивості text-align, наприклад:

h1 {
text-align: center;
}

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

Веб-дизайн для дітей: Типографіка

Вирівнювання по правому краю

Деякі мови (іврит) пишуться справа наліво, і для них вирівнювання по правому краю є значенням за замовчуванням.

Веб-дизайн для дітей: Типографіка

Як дизайнери ми можемо собі дозволити вирівнювати по правому краю невеликі шматочки тексту. Це допоможе трохи виділитися з основного тексту, наприклад, для підписів до зображень. Підписи можуть бути назвою або описом зображення, і розташовані вони в спеціальних тегах figcaption.

Веб-дизайн для дітей: Типографіка

Вирівнювання по правому краю на зображенні вище зроблено з допомогою CSS:

figcaption {
text-align: right;
}

Загальні поради

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

Font-size та візуальна ієрархія

Розмір шрифту (font-size) менше ніж 16px для основного тексту на сторінці вважається занадто маленьким і складним для читання на екранах.

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

Текст на нашому сайті Tuts+Town має кілька рівнів ієрархії. Найважливіший рівень це заголовок привітання, далі йде бізнес секція і конкретні магазини. А закінчується сайт третім рівнем тексту, секцією «створено » в самому низу сторінки.

Веб-дизайн для дітей: Типографіка

Ієрархія тут показується різним розміром шрифту, кольором і розташуванням на сторінці.

Контраст

Більш докладно ми поговоримо про колір і контрасті в наступному уроці. А зараз просто треба зрозуміти, що необхідно уникати кольорів шрифту, що вступають у протиріччя з фоном. Це ускладнює читання для користувачів. Нижче приклад поганого контрасту зліва і хорошого праворуч:

Веб-дизайн для дітей: Типографіка

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

Кількість шрифтів

Основне правило це не використовувати в проекті більше 2-3 різних шрифтів. Парні шрифти повинні підходити один до одного, підтримувати загальне відчуття і передавати ідею, яка була закладена в дизайн.

Веб-шрифти

Не всі шрифти відмінно працюють в інтернеті і одночасно гарні для друку. На щастя Шрифти Google, які ми використовували для імпортування Open Sans у наш сайт Tuts+Town, надають великий список шрифтів, що підходять до відображенню у мережі.

Висновок

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