19.12.2016 в 4:48 |

12 0


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

Набиваючи гулі на своїх власних помилках, ви скоро почнете розуміти – які вони, ці правильні розміри, які ставлять вертикальний ритм.

Визначення вертикального ритму

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

Навіщо нам все це?

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

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

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

Отже, на вертикальний ритм впливають в основному три фактори:

  • Інтерліньяж;
  • Розміри шрифтів;
  • Поля і відступи.

Щоб було зрозуміло, про що я кажу, розглянемо всі ці складові окремо:

Інтерліньяж

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

font-size: 12px;

line-height: 1.5;

В моєму прикладі основний розмір – 12рх. Але найчастіше використовується розмір не менш 14рх. Інтерліньяж дорівнює 1,5 рх. Цей розмір дозволить додати 6 рх в самий низ сторінки. Так створюється основний розмір інтерліньяжу, а з нього вже вертикальний ритм.

Відступи

В браузерах встановлений стандарт, що відступ додається у верхню і нижню частини абзаців. АЛЕ при цьому римт може задаватися некоректно. Деякі браузери також мають стандартний розмір нижнього і верхнього відступів – 1em. Наше завдання – зробити відступи того ж розміру, що і інтерліньяж. Потім ви побачите, що розмір порожнього місця між абзацами дорівнює розмірам порожнього місця між рядками. Це дозволить візуально зробити текст більш читабельним і гармонійним.

Скидаємо налаштування браузера

Раджу всім скидати настройки за допомогою програми CSS Reset. Сама нею користуюся і нарікань не маю. Вона може повністю очистити всі стандартні налаштування браузера, які спочатку там встановлені. Так ви починаєте свою роботу з нуля, і вам нічого не заважає. Потрібно прибрати відступи і поля в стилістичній частині браузера. Це робиться так:

padding: 0;

margin: 0;

Що робити з рештою тексту

Не будемо забувати про заголовки, які можуть зіграти в тексті вирішальну роль. Між іншим, доведено, що користувачі спочатку переглядають заголовки. І якщо вони їх зацікавлять, то вони можуть прочитати текст. Необхідно насамперед встановити розмір для Н1. Стандарт 24 рх. З-за такої установки розміри абзацу збільшуються вдвічі. Щоб налаштування для абзаців не попливли, встановимо такий розмір line-height заголовка h1 в 1.5 em.

Відповідно Н2, Н3 і так далі, повинні бути на 2 рх менше наступного заголовка. Наприклад, Р2-22 рх, Н3-20 і т. д.

Сподіваюся, що вам тепер стали більш доступні принципи встановлення вертикальних ритмів в CSS. Якщо у вас виникли питання або пропозиції, то з задоволенням прочитаю про них в коментарях!