Вертикальна сітка ритму / базової лінії в веб-дизайні

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

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

Мені хотілося б знати, як покращити свою типографіку за допомогою вертикального ритму. У когось є поради чи методи, які я повинен використовувати?

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

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

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

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

Вертикальний ритм не важко реалізувати, особливо якщо ви починаєте з скидання CSS . Я натрапив на це посилання http://24ways.org/2006/compose-to-a-vertical-rhythm деякий час тому, і з тих пір використовую техніку у всіх моїх проектах.

Що я з’ясував, це те, що після роботи з набором декларацій типу «консерви» у моєму CSS-файлі (h1 - h6, p тощо) - конкретно, розмір, висота рядка, нижня межа), це дуже просто розгортати.

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

Це може бути важко бачити, але коли це повторюється як фонове зображення: ви побачите сітку 20x20.

HTH

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

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

Щоб допомогти зіставити все з сіткою, дуже корисним є фонове зображення, як пропонує Доусон.

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