Основи чуйної (responsive) типографії у веб-дизайні

Адаптивний або чуйний веб-дизайн – це не тільки стовпці, сітки, картинки та іконки. Все це не матиме сенсу без текстового контенту. Як одного разу сказав Білл Гейтс: «Контент – це король». Тому, адаптивна типографія – це той важливий фактор, який не повинен залишати поза увагою кожен веб-дизайнер і веб-розробник.

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

 

 

Основи типографії

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

Перш ніж ми заглибимося в процес створення адаптивної веб-типографії, ось кілька термінів, які потрібно обговорити.

 

Тип шрифту (гарнітура, typeface)

Також відомий, як сімейство шрифтів (font family). Це колекція дизайну символів, в якому зібрано повний набір букв, цифр, символів, спеціальних символів, а також їх вага («жирність», weight).

приклад в CSS: font-family: "Open Sans", Arial, sans-serif;

 

 

Шрифт

Це фактичний комп’ютерний файл, який містить інформацію про використовувані символи, таку як шрифт, вага, ширина, стиль і т.д. Такі файли мають розширення .eot, .woff, .ttf.

 

 

Базова лінія (baseline)

Це нижня горизонтальна лінія, по якій проходять найвищі літери.

 

 

Відстеження (tracking)

Також відоме як міжбуквений інтервал (letter spacing). Це послідовне збільшення або зменшення відстані між буквами.

 

 

Кернінг

Процес коригування простору між окремими символами в гліфах різної ширини.

 

 

Напрямна (leading)

Також відома як висота рядка (line height) в CSS. Це міжрядковий інтервал (інтерліньяж) тексту, підрахунок якого ведеться від базової лінії шрифту.

 

 

На що слід звернути увагу в веб-типографії

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

• Тип (type)
• Колір (color)
• Текстура (texture)
• Образ (image)

 

Все це дуже впливає на кінцевий результат і впливає на виразність вашого меседжу.

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

 

1. Обирайте шрифт, який відповідає вашій темі

Більшість сайтів в даний момент використовують одні й ті ж шрифти. Навіть сьогодні дуже популярні Arial і Helvetica. Проте, було б більше сенсу, якщо б ви могли узгодити шрифти з вашим повідомленням.

Наприклад, якщо на вашому сайті розміщено контент для дітей, тоді було б доречно використовувати шрифти типу DK Crayon Crumble або Little Miss Priss в заголовках.

Тут головне переконатися, що використовувана типографія відповідає вашій цільовій аудиторії, а текст чіткий і легко читається.

 

 

2. Використовуйте веб-шрифти

Практично всі сучасні браузери підтримують веб-шрифти, які підключені за допомогою команди @import або стандартного тега посилання (<link>).

Приклад використання тега @import:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

 

Приклад тега посилання:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

 

Це означає, що ви можете використовувати будь-який шрифт, доступний на сайті шрифтів, наприклад, на Google Font і Typekit.

Переваги використання веб-шрифтів:

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

 

 

3. Використовуйте правильні поєднання кольорів

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

Якщо ви використовуєте багато кольорів і у випадковому порядку, це зробить ваш текст нечитабельним і принесе біль в очі відвідувачеві. Але як вибрати правильні колірні комбінації? Хоча немає загального правила, є деякі рекомендації.

• Використовуйте правильні контрасти для відмінності між текстом і фоном. Текст і фон не повинні зливатися.
• Використовуйте плоскі UI кольори, якщо це можливо. Ці кольори світлі і мають відмінні комбінації, які не завдають шкоди окові. На сайті flatuicolors.com представлені хороші приклад Flat UI.

 

 

4. Використовуйте текст замість картинок

Як усі ми знаємо, що картинки уповільнюють роботу веб-сторінок. Якщо дозволяє ситуація, використовуйте текст, а не картинки.

 

 

Основні правила чуйної типографії у веб-дизайні

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

 

1. Використовуйте rem замість пікселів

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

Кращим варіантом є використання rem. Rem, також відомий як «root em», завжди дорівнює розміру шрифту кореневого HTML-елемента, і що більш цікаво, так це те, що він підтримується всіма сучасними браузерами.

html{
  font-size: 16px;   // 1rem = 16px
}
h1{
  font-size: 1.9rem // 19px
}
h2{
  font-size: 1.8rem // 18px
}

 

В даному прикладі ми визначили базовий розмір шрифту в 16 пікселів, який є посиланням на розмір шрифту інших елементів. Розміри h1 і h2 будуть змінюватися при зміні розміру області перегляду.

Для більш старих версій Internet Explorer ми можемо спочатку вказати розмір шрифту в пікселях, а потім в rem одиницях.

html{
  font-size: 16px;   // 1rem = 16px
}
h1{
  font-size: 19px; font-size: 1.9rem;
}
h2{
  font-size: 18px; font-size: 1.8rem;
}

 

 

2. Експериментуйте зі значенням rem для різних розмірів

Тепер, коли ви знаєте, як використовувати rem, вам потрібно проекспериментувати на екранах різних розмірів за допомогою запитів @media.

@media (max-width: 640px) {
  h1 {font-size:1.7rem;}
  h2{font-size: 1.6rem;}
}
@media (min-width: 480) {
  h1 {font-size:1.9rem;}
  h2{font-size: 1.8rem;}
}

 

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

 

 

3. Контролюйте розмір

Найідеальніший показник для довжини рядка – це приблизно від 45 до 75 символів в рядку. Для адаптивного веб-дизайну розмір не так просто контролювати, особливо на маленьких пристроях. Якщо ви не можете контролювати розмір, ви не можете контролювати розбірливість вашого тексту.

 

 

 

Заключна думка

Адаптивний дизайн стає все більш і більш просунутим. Картинки, макет і сітки – це важливо. Однак ми не повинні забувати, що контент або текст – це те, що читають не тільки люди, але й пошукові системи.

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