Адаптивний або чуйний веб-дизайн – це не тільки стовпці, сітки, картинки та іконки. Все це не матиме сенсу без текстового контенту. Як одного разу сказав Білл Гейтс: «Контент – це король». Тому, адаптивна типографія – це той важливий фактор, який не повинен залишати поза увагою кожен веб-дизайнер і веб-розробник.
У сьогоднішній статті ми обговоримо основи створення адаптивної веб-типографіки, а також ті фактори, які впливають на це.
Гарна типографія – це правильний вибір шрифту. Правильне поєднання шрифту, кольору тексту, розміру шрифту гарантує, що контент буде виглядати в найвищій якості.
Перш ніж ми заглибимося в процес створення адаптивної веб-типографії, ось кілька термінів, які потрібно обговорити.
Тип шрифту (гарнітура, typeface)
Також відомий, як сімейство шрифтів (font family
). Це колекція дизайну символів, в якому зібрано повний набір букв, цифр, символів, спеціальних символів, а також їх вага («жирність», weight).
приклад в CSS: font-family: "Open Sans", Arial, sans-serif;
Шрифт
Це фактичний комп’ютерний файл, який містить інформацію про використовувані символи, таку як шрифт, вага, ширина, стиль і т.д. Такі файли мають розширення .eot
, .woff
, .ttf
.
Базова лінія (baseline)
Це нижня горизонтальна лінія, по якій проходять найвищі літери.
Відстеження (tracking)
Також відоме як міжбуквений інтервал (letter spacing
). Це послідовне збільшення або зменшення відстані між буквами.
Кернінг
Процес коригування простору між окремими символами в гліфах різної ширини.
Напрямна (leading)
Також відома як висота рядка (line height
) в CSS. Це міжрядковий інтервал (інтерліньяж) тексту, підрахунок якого ведеться від базової лінії шрифту.
Слова, фрази і речення мають значення, але й кожен символ дуже важливий. Загальний дизайн не матиме сенсу, якщо ваша аудиторія не зрозуміє контент, або він її не буде приваблювати. У веб-типографії є чотири основні елементи:
Все це дуже впливає на кінцевий результат і впливає на виразність вашого меседжу.
Існує чотири фактори, які можуть допомогти вам створити презентабельну веб-типографіку.
Більшість сайтів в даний момент використовують одні й ті ж шрифти. Навіть сьогодні дуже популярні Arial і Helvetica. Проте, було б більше сенсу, якщо б ви могли узгодити шрифти з вашим повідомленням.
Наприклад, якщо на вашому сайті розміщено контент для дітей, тоді було б доречно використовувати шрифти типу DK Crayon Crumble або Little Miss Priss в заголовках.
Тут головне переконатися, що використовувана типографія відповідає вашій цільовій аудиторії, а текст чіткий і легко читається.
Практично всі сучасні браузери підтримують веб-шрифти, які підключені за допомогою команди @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.
Переваги використання веб-шрифтів:
Одна з головних помилок, якої веб-дизайнери в даний час припускаються, — вони додають непотрібні комбінації кольорів на свої сайти. Пам’ятайте, що хороший веб-дизайн визначається тим, наскільки добре функціонує сайт і наскільки хороший дизайн.
Якщо ви використовуєте багато кольорів і у випадковому порядку, це зробить ваш текст нечитабельним і принесе біль в очі відвідувачеві. Але як вибрати правильні колірні комбінації? Хоча немає загального правила, є деякі рекомендації.
Як усі ми знаємо, що картинки уповільнюють роботу веб-сторінок. Якщо дозволяє ситуація, використовуйте текст, а не картинки.
Чуйна типографія в веб-дизайні – це більше, ніж просто адаптація або оптимізація розміру тексту під різні розміри екрану. Давайте поговоримо про основні правила, які ми можемо застосовувати для досягнення адаптивної і чуйної типографії.
Використання пікселів дуже популярне. Але, пікселі – це фіксована величина. Це означає, що коли ви змінюєте розмір вікна в браузері, важко визначити ефективний розмір тексту.
Кращим варіантом є використання 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; }
Тепер, коли ви знаєте, як використовувати 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;} }
Зверніть увагу, що на менших екранах розмір шрифту трохи більше в порівнянні з більш широкими екранами. Це зробить текст більш читабельним, оскільки сьогодні більшість користувачів читають в телефоні або планшеті.
Найідеальніший показник для довжини рядка – це приблизно від 45 до 75 символів в рядку. Для адаптивного веб-дизайну розмір не так просто контролювати, особливо на маленьких пристроях. Якщо ви не можете контролювати розмір, ви не можете контролювати розбірливість вашого тексту.
Адаптивний дизайн стає все більш і більш просунутим. Картинки, макет і сітки – це важливо. Однак ми не повинні забувати, що контент або текст – це те, що читають не тільки люди, але й пошукові системи.
Займаючись побудовою ефективного макета, також не забувайте про те, як буде виглядати ваш текст. Найголовніше, щоб ваш текст був читабельний, зрозумілий і легко проглядався на різних пристроях з різним розміром екрану.
Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…
Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…
Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…
Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…
Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…