Типографіка веб-сайту: Повний перелік правил

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

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

Коли графічний дизайнер розробляє дизайн веб-сайту, окрема сторінка приділяється типографіці, де демонструються типові елементи, такі як заголовки, абзаци, посилання і т.д. Ймовірно, ви знайдете таку ж сторінку на демонстраційному сайті придбаного шаблону CMS, наприклад: https://cassiopeia.joomla.com/typography

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

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

Відступи веб-сторінки

Кожна сторінка повинна мати відступи зверху, знизу, зліва і справа. Сторінки веб-сайтів не є винятком.

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

Якщо ви використовуєте систему управління контентом (CMS), таку як WordPress або Joomla, і не верстаєте свій сайт на чистому HTML (що малоймовірно), скоріш за все, відступи у вашій темі (шаблоні) вже будуть встановлені, тому вам не потрібно робити нічого додаткового для цього.

Проте відступи сторінки є невід'ємною складовою типографіки, про яку варто знати.

Ширина контейнера сторінки

Сторінки книг будуть заповнені від краю до краю, за винятком відступів зліва і справа. Але веб-сторінки - це інша справа. На сайті не обов'язково використовувати всю ширину екрана для основного тексту статті.

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

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

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

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

Тонкий контейнер тексту досягається встановленням максимальної ширини у коді сайту (наприклад, за допомогою файлів CSS). Зручною вважається ширина контейнера основного тексту приблизно до 700 пікселів, що повинно відповідати 40-80 символам у одному рядку.

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

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

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

Сімейства шрифтів

Стандартні веб-шрифти

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

Згідно з w3schools.com, безпечними шрифтами є:

• Arial (sans-serif);
• Verdana (sans-serif);
• Tahoma (sans-serif);
• Trebuchet MS (sans-serif);
• Times New Roman (serif);
• Georgia (serif);
• Garamond (serif);
• Courier New (monospace);
• Brush Script MT (cursive).

Шрифти Google

https://fonts.google.com/ - це безкоштовні шрифти, їх значно більше, ніж у стандартному наборі. На сторінці кожного конкретного шрифту ви можете детально ознайомитися з інформацією про нього, включаючи правила використання (вкладка "About & License tab").

Щоб підключити Google-шрифт до вашого веб-сайту, вам потрібно додати посилання на шрифт у розділі <head>...</head> (1), а потім вказати у CSS сімейство шрифтів для вибраного елемента (2).

Ось як виглядатиме підключення шрифту Roboto:

1) Вставте посилання на шрифт всередині тегів <head>...</head>:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic">
</head>

2) Застосуйте шрифт до елементів веб-сайту в файлі CSS, наприклад, до заголовків:
h1, h2, h3, h4, h5, h6 {font-family: 'Roboto', sans-serif;}

Таким чином, ми підключили шрифт Roboto до веб-сайту і застосували його до всіх типів заголовків (від H1 до H6).

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

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

Оскільки Google пропонує лише один формат шрифтів під час завантаження - TTF, за потреби ви можете додати інші формати, такі як WOFF, EOT, SVG, скориставшись генератором https://www.fontsquirrel.com/tools/webfont-generator.

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

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

1. З завантаженими локально (з хостингу) файлами шрифту Roboto.
2. З завантаженими шрифтами з зовнішнього джерела (Google).
3. Контрольний тест без додаткових шрифтів.

PageSpeed Insights

Сервіс перевірки швидкості завантаження сайту від Google виявив проблему із шрифтами лише при першій умові (1) - з завантаженими локальними файлами шрифту. При інших умовах (2 і 3) проблем із шрифтом не виявлено.

Solarwinds

Solarwinds виявив додаткове навантаження в розділі шрифтів при безпосередньому завантаженні файлів шрифту Roboto (1). При інших умовах (2 і 3) додаткове навантаження не виявлено.

GTmetrix

GTmetrix показав аналогічний результат попереднім сервісам. Якщо перейти до вкладок Waterfall > Fonts, ми побачимо файли завантажуваних шрифтів. У першому випадку, окрім файлу FontAwesome, ми бачимо 3 додаткових файли. Усі три файли належать до Roboto, кожен відповідає за різну жирність, що зрозуміло з назв файлів. Ми бачимо, який саме додатковий обсяг має кожен з файлів.

У другому тесті у вкладці Waterfall > Fonts файли шрифтів не виявлені. Проте шрифт все-таки завантажується, з зовнішнього джерела. Щоб переконатися у цьому, потрібно перейти до вкладки All, там ви знайдете раніше додане в head посилання на шрифт:

 

Третій тест без додаткових шрифтів.

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

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

Для заголовків і основного текстового блоку можуть використовуватися різні сімейства шрифтів. Тобто на одній сторінці можуть бути підключені 2 або більше сімейства шрифтів.

Скріншот сторінки сайту The Washington Post

Якщо ви хочете дізнатися, який шрифт використовується на певному веб-сайті, ви можете переглянути це через код обраного елемента (клацнувши правою кнопкою миші на тексті та скористашись інструментом інспектування) або скористатися спеціальними додатками, наприклад, розширенням WhatFonts для Chrome https://chrome.google.com/webstore/search/whatfont

Як вибрати сімейство шрифта?

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

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

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

Заголовки H1 — H6

Головний заголовок на сторінці веб-сайту позначається тегом H1. Зазвичай це найбільший заголовок, розміщений у верхній частині сторінки. На веб-сторінці рекомендується розміщувати лише один заголовок з тегом H1.

Підзаголовки H2-H6, тобто другого, третього і інших рівнів, мають менший розмір. Чим нижчий рівень підзаголовка, тим менший розмір шрифту.

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

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

У CSS жирність шрифту позначається числами (900, 700, 600, 500, 400) або словами (bold, bolder). Числа забезпечують більш точне налаштування, але не всі шрифти мають ці значення. Однак значення "bold, bolder" є універсальними і застосовними до всіх шрифтових сімейств.

Кегль (розмір шрифта)

Для основного тексту сторінки зручним вважається кегль від 16 до 20 px, залежно від сімейства шрифту.

Заголовок H1 – найбільший текст на сторінці. Підзаголовки H2-H6 відповідно менші, кожен відповідно до своєї ієрархії.

Підзаголовки рівня H4-H6 на практиці зазвичай використовуються рідше, ніж H2-H3. Ви повинні розуміти, скільки рівнів підзаголовків плануєте використовувати. Наприклад, якщо ви плануєте використати всього один рівень підзаголовка, краще, щоб він виглядав контрастно відносно головного заголовка і основного тексту. Припустим, що цим заголовком буде H2, тоді він повинен бути чимось середнім між головним заголовком і основним текстом.

Кегль головного заголовка сторінки H1 може бути приблизно в 2 рази більше, ніж кегль основного тексту. Кегль середнього підзаголовка (H2 або H3) може бути приблизно в 1,5 рази більше. Тобто, наприклад, якщо основний текст = 16px, тоді головний заголовок може бути 32px, а середній заголовок — 24px.

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

https://typescale.com/
Вам необхідно вибрати кегль основного тексту, і сервіс підбере кегль заголовків. Ви можете вибрати коефіцієнт збільшення розміру шрифту, а також сімейство серед Google-шрифтів.

https://fonts.google.com/specimen/Roboto/tester
На сайті Google шрифтів ви також можете протестувати зовнішній вигляд обраного шрифту, включаючи заголовки. В прикладі обрано популярний шрифт Roboto. У візуальному редакторі ви можете переглянути, як виглядають заголовки H1–H3, крім основного тексту.

https://fontjoy.com/
Сервіс, який випадковим чином підбирає три види шрифтів: для заголовка, підзаголовка і основного тексту. Кожен рівень має свій кегль.

Колір тексту та фону

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

Також допустимо використовувати інші світлі відтінки фону, такі як світло-сірий або світло-бежевий.

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

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

Абзаци

Відстань між абзацами (інтерпараграфний відступ)

На веб-сторінках абзаци позначаються значним відступом між ними, який схожий на порожній рядок.

Зазвичай, технічно відступ досягається не встановленням порожнього рядка, а заданим відступам у коді веб-сайту (у файлах CSS) для тега <p>.

Тег <p> - це тег, який використовується для позначення абзацу в HTML-розмітці. Якщо в візуальному редакторі вашої CMS ви відокремите абзац натисканням клавіші Enter, ймовірно, новий абзац позначиться саме цим тегом - <p>...</p>.

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

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

Кількість рядків у абзаці

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

Сучасні блоги тяготіють до невеликих, коротких абзаців, іноді навіть одного речення (навіть якщо це речення складається з однієї короткої фрази або одного слова).

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

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

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

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

Орієнтовні рекомендації щодо встановлення міжрядкового інтервалу для основного тексту ~ 1.5, для заголовків ~ 1.2.

Цифра 1.5 - це коефіцієнт множення. Наприклад, якщо розмір шрифту становить 20 px, то встановлений міжрядковий інтервал в 1.5 буде дорівнювати 35 px. Багато сучасних блогів встановлюють більший коефіцієнт, наприклад, 1.7, або навіть 1.9.

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

Жирність, курсив, підкреслення, виділення

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

Так само, як і читачі, Google також звертає увагу на жирні слова, що може мати значення для SEO.

Посилання

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

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

Зображення, відео, графіки

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

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

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

Як стиснути розмір зображення в МБ

Нумеровані списки

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

1. Для єдності стилю слід дотримуватися одного типу нумерації на одній сторінці. Наприклад: арабські цифри (1, 2, 3), римські (I, II, III), літери (a, b, c) або інші символи.

2. Відступи. Текст пунктів нумерованого списку зазвичай має додатковий відступ зліва. Візуально це виглядає приблизно як 2-3 пробіли.

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

Таблиці

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

Таблиці можуть мати проблеми з адаптивністю. Але необхідно пам'ятати про принцип "Mobile first". Якщо ваша таблиця не може адаптуватися до вузького екрану смартфона, краще використати інший формат подання інформації.

Наприклад, ви можете:

• Подати інформацію у вигляді нумерованого списку або іншого простішого текстового формату.
• Зробити знімок екрану, і замість текстового формату додати скріншот таблиці (при цьому пошукові системи не зможуть розпізнати текст і цифри на скріншоті таблиці).
• Розмістити таблицю у блоку з прокруткою. Таким чином, смуга прокрутки не буде автоматично з'являтися внизу сторінки веб-сайту. Прокрутка буде безпосередньо під таблицею і не буде впливати на загальну ширину сторінки.
• Побудувати адаптивну таблицю, не використовуючи тег <table>, а з допомогою інших тегів, які можуть змінювати порядок блоків, адаптуючись до екрану, наприклад, тег <div> та властивість "display: grid" (для цього потрібно розбиратися в HTML і CSS).

Цитати

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

У HTML є спеціальний тег, призначений для цитат - "blockquote". Тому все, що вам потрібно зробити, це помістити цитований текст між тегами <blockquote>...</blockquote> та задати стиль для "blockquote" у CSS-файлі.

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

Встановлювати окремий стиль для цитати (наприклад, інший шрифт або фон) безпосередньо в HTML (за допомогою елементу style) не є правильним. Зазвичай ця помилка в оформленні виникає, коли користувач намагається змінити стиль тексту, використовуючи інструменти візуального редактора так само, як він звик робити це в програмах типу Word (наприклад, змінює колір і розмір шрифту) і не звертає уваги на початковий код. Таким чином, новачок накладає зайвий код на основний текст. При такому способі стилізації користувачеві доведеться змінювати стиль в HTML для кожної цитати, що не дуже зручно. Користувач витратить більше часу на публікацію. До того ж, сторінка отримає додаткову вагу від повторюваного коду2

Особливим чином виділені блоки

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

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

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

• вміст блоку не повинен виходити за контейнер;
• текст повинен залишатися контрастним щодо фону;
• розмір відступів (в середині та зовні блоку) повинен відповідати іншим відступам на сторінці.

Зміст як елемент навігації

Для зручності навігації в статті ви можете додати зміст на початку статті. Це допоможе користувачам орієнтуватися на сторінці.

Пункти змісту будуть ще зручнішими, якщо додати до них якірні посилання.

Додаткова навігація у вигляді змісту з якірними посиланнями - необов'язкова умова. Зміст доцільно додавати до великих статей зі складною структурою.

Як встановити якірні посилання на розділи сторінки

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

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