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

Але веб-дизайнери бойові хлопці і ми так просто не здаємося. У тривалій і важкій битві із кривими браузерами ми переносимо у веб все більш витончені та складні техніки з друку.

У нас є технологія

Минулого року було багато розмов про використання сіток у дизайні сайтів. Mark дав нам план уроку, Khoi - тематичне дослідження, а Cameron - toolkit. Тут все ясно, у нас є підтримка браузерів, знання та інструменти для створення багатоколонної розмітки.

Ми можемо внести деякі принципи пропорційності і балансу в наші сторінки за допомогою іншої техніки добре відомої в друкованій справі - базової сітки.

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

Сітка

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

Перше, що ми повинні зробити - це вибрати висоту ліній сітки. Я вибрав стандартний розмір шрифту 12 пікселів і висоту ліній 18 пікселів, щоб одержати гарний лідинг у 150%. Дуже важливо заздалегідь визначити яку висоту ліній Ви будете використовувати. Ви повинні вибрати відношення розміру шрифту до висоти так, щоб читабельність тексту була найкращою.

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

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

Параграфи і заголовки

Почнемо з того, що встановимо margin і padding для всіх елементів рівним 0, щоб не турбується про те які значення браузер використовує за умовчуванням. На практиці нам знадобитися більш складна конструкція, але для прикладу достатньо використати селектор *.

* { 
margin: 0;
padding: 0;
}

Ми хочемо додати простір між параграфами, але значення за умовчуванням дорівнює 1 em (у нашому випадку це 12px) не підходить для сітки, встановимо нижнє поле параграфа у 18px.

p {
margin-bottom: 18px;
}

Коли будемо створювати заголовки важливо встановити висоту рядка кратну 18, а також додати нижнє поле 18px.

h1 {
font-size: 24px;
line-height: 36px;
margin-bottom: 18px;
}

h2 {
font-size: 18px;
line-height: 18px;
margin-bottom: 18px;
}

h3 {
font-size: 12px;
line-height: 18px;
}

Алгоритм простий, якщо потрібно додати відступи або поля, вони повинні бути кратні 18, щоб лінії відповідали сітці, не обов'язково додавати відразу 18 пікселів, можна використати пари, які в сумі дають 18, наприклад верхню границю 12 пікселів, а нижню - 6.

Списки

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

ul, ol {
margin-bottom: 18px;
}

Плаваючі елементи та бічні панелі

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

.left { 
float: left; 
margin: 0 18px 18px 0; 
}

.right {
float: right; 
margin: 0 0 18px 18px; 
}

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

.callout {
border: 1px solid #ddd;
padding: 8px 10px;
margin-bottom: 18px;
}

Зауважте, що я задав відступи знизу та зверху рівними 8 пікселям, оскільки рамка дає ще 2 пікселя (8 + 8 + 1 + 1 = 18).
Також потрібно забрати нижню границю останнього елемента, щоб наприкінці вставки не було занадто великого простору. Це не критично для нашої розмітки (тому що відступ відповідає сітці), але все-таки я вирішив виправити це і використав псевдо-клас :last-child, IE6 звичайно його не розуміє, але це не сильно впливає на розмітку.

.callout :last-child {
margin-bottom: 0;
}

Ще одна важлива річ, про яку ви повинні пам'ятати, створюючи вставки та бічні панелі - це висота рядків, вона не повинна змінюватися, навіть якщо ви робите текст дрібним, для 11 та 10 піксельних шрифтів, висота рядка 18 пікселів залишається зручної для читання.

Наша сторінка повністю відповідає сітці.

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

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

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

Не бійтеся пікселів

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

Ви можете використати відносні одиниці виміру, але це значно ускладнить обчислення. Дуже просто задати висоту рядків 18 пікселів (line-height:1.5em), але коли Вам знадобитися використати шрифти іншого розміру доведеться проробити чималі обчислення, щоб задати висоту рядка який би відповідав базовій сітці, до того ж різні способи округлення, які використовують браузери, тільки ускладнюють завдання. Проте це можливо і якщо ви хочете спробувати цю техніку з відносними розмірами шрифтів, я рекомендую Вам хорошу статтю Ричарда Руттера "Compose to a Vertical Rhythm".

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

Оригінал статті: Setting Type on the Web to a Baseline Grid