05 / 02
Типографіка
Опубліковано 05 квітня 2018, останні зміни 14 червня 2019

Чіткий та доступний текст – це основний спосіб спілкування з користувачами. Наведені нижче рекомендації покращують сприйняття інформації.

Шрифти

Використовуйте шрифт Proba Pro у накресленнях Regular, SemiBold та Bold, який ліцензовано для використання в доменній зоні gov.ua.

Для сервісів, які розміщені на інших доменах, використовуйте інший open source шрифт, наприклад, Open Sans або Source Sans Pro.

Заголовки

  • на сторінці має бути лише один заголовок рівня h1, який повинен чітко вказати, на якій сторінці знаходиться користувач 

  • використовуйте заголовки послідовно, не пропускайте рівні заголовка

  • обмежте кількість рівнів 4-ма – від h1 до h4. Заголовки h4, h5 та h6 мають однаковий стиль

  • міжстрочний інтервал заголовка має бути у 1,5 рази більший, ніж розмір шрифта, а відступи між заголовком та абзацом – 60, 40, 30 та 25 пікселів відповідно

  • якщо у заголовку використовуються ПРОПИСНІ або Капітель, необхідно додати розрядку

  • у кінці заголовків крапка не ставиться.

Заголовок 1

font-family: 'ProbaProSemiBold'
font-size: 40px
line-height: 1.5em/60px
margin-bottom: 60px

Заголовок 2

font-family: 'ProbaProSemiBold'
font-size: 30px
line-height: 1.5em/45px
margin-bottom: 40px

Заголовок 3

font-family: 'ProbaProSemiBold'
font-size: 24px
line-height: 1.5em/36px
margin-bottom: 30px

Заголовки 4-6

font-family: 'ProbaProSemiBold'
font-size: 20px
line-height: 1.5em/30px
margin-bottom: 26px

Текст

  • використовуйте шрифт основного тексту не менш ніж 16 px, а міжстрочний інтервал – у 1,5 рази більший, ніж розмір шрифта;
  • вирівнювання по лівому краю, на відміну від центрованого тексту, надає очам постійну відправну точку для кожного рядка, що полегшує читання тексту. Уникайте також вирівнювання по формату (по всій ширині блоку): це створює нерівномірні пробіли між словами, що погіршує сприйняття тексту, особливо на маленьких екранах;

  • оптимальна довжина строки – не менше 40 та більше 80 символів, а ширина текстового блоку – до 750 пікселів. Задовгі строки стомлюють читача, знайти початок нової строки стає важко. Короткі строки можна використовувати тільки коли тексту мало;

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

  • не використовуйте курсивпідкреслення та ВЕЛИКІ літери, а також уникайте використання жирного. Окреме виділене слово полегшує пошук інформації на сторінці, але масив жирного тексту важко читати.

Читайте також

Правила хорошого тексту
Структура вмісту

Посилання мають бути доступними та корисними для користувачів:

  • посилання має відрізнятись від суцільного тексту не лише кольором – використовуйте підкреслення;

  • посилання на внутрішні розділи порталу мають відкриватись у тому ж вікні, а посилання, що ведуть на зовнішні ресурси, мають відкриватись у новому вікні та позначатись піктограмою;

  • змінюйте колір відвіданих посилань;

  • у тексті посилання чітко формулюйте, куди саме потрапить користувач при переході, уникайте таких посилань: натисніть тут

  • одразу переходьте до суті, не додавайте до посилань пояснюючих фраз «читайте докладніше про…», «отримайте більше інформації щодо...»;

  • використовуйте слова замість url-адрес, наприклад: Про Україну, а не Про Україну: https://uk.wikipedia.org/wiki/%D0%A3%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D0%B0

  • створюйте переходи тільки за важливими посиланнями – текст з великою кількістю посилань важко читати;

  • не додавайте посилання у заголовки;

  • пробіли до та після посилання, орфографічні знаки після посилання не включаються до нього. Якщо посилання не містить супровідного тексту – крапка в кінці не ставиться;

  • форматуйте адресу електронної пошти у вигляді посилання типу “mailto”, наприклад: minister@kmu.gov.ua

  • форматуйте номер телефону у вигляді посилання типу “tel”, наприклад: +380 44 123-45-67

  • при створенні посилання на файл вказуйте його тип та розмір в кБ або МБ

Для людей, які використовують клавіатуру для навігації, додайте:

  • помітний фокус для обраного посилання;
  • перемикання між посиланнями за допомогою клавіші Tab;
  • можливість перейти за посиланням, натиснувши клавішу Enter.

Списки

Використання списків полегшує сканування тексту. Списки потрібно створювати за допомогою відповідного html-коду.

  • використовуйте марковані списки для набору пунктів, які не мають порядку. Такі списки відмічають маркером, наприклад, крапкою;

  • використовуйте нумеровані списки для послідовностей, створення ієрархії або покрокових інструкцій;

  • використовуйте списки лише для вмісту, який насправді є списком;

  • уникайте вкладеності другого та третього рівня;

  • відступи між елементами списку мають бути більшими у 1,2 рази ніж розмір шрифта;

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

Приклади:

Маркований список:

  • перший елемент;
  • другий елемент;
  • третій елемент.

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

  1. перший елемент;
  2. другий елемент;
  3. третій елемент.