Сетка и строка

Модуль 2

Строка

Em — относительная единица измерения в веб-верстке, ровняется самой усредненной букве в строке.

Книжная верстка:
Длина строки: 45–75 знаков
Высота строки: 1,4 em

Примеры хорошо читабельных сайтов:

http://www.the-village.ru/
высота строки 24px, шрифт 16 px, em — 1,5 (24:16)
daily.afisha.ru
высота строки 27px, шрифт 18 px, em — 1,5

Оптимальная длина строки и em для веб

Оптимальные размеры для удобного сканирования информации на веб-сайте
Оптимальные размеры для мобилок
  • Чем меньше текстовый блок, тем меньше высота строки
  • Высота строки в вебе больше классической

Сетка

В вебе используется вертикальная и горизонтальная сетка. Каждая из них нужна для облегчения восприятия информации и экономии времени при размещении элементов. Вертикальная сетка может выступать как скрытой, так и обнаженной — пространство открыто поделено на явные модули.

Вроде бы хаос, но на самом деле все выстроено по сетке

Модуль

Сетка строится на основе модуля — минимальная единица измерения ( например 6 Px, и все размеры сетки кратны этому модулю ). Внешние отступы всегда больше расстояния между колонками. Высота строки не должна быть равна или быть больше отступа между колонками.

Пример сетки на 12 колонок

Необходимо выстраивать систему по размеру шрифта. Если диапазон рассчитан на десктоп, то надо умножить кегль наборного шрифта на размерный модуль, и получим заголовки 2 уровня, и т.д.

На планшете и на мобильном наборный текст уменьшается и становится более функциональным.

Лайфхак
Чтобы контрастность на мобильном была более сильная, нужно заголовок h2 уменьшить до размера базового шрифта.

Как вариант — можно использовать сетку без межколоночных отступов. В ней соблюдается модуль в 6 px.

Чтобы система соблюдалась правильно на всех разрешениях, необходимо:

  • Делать дизайн от большего к меньшему. Если делать сначала для мелких разрешений — на больших мониторах все будет мелко.
  • Избегайте плывущих строк на больших разрешениях.
Никто не прочитает этот абзац до конца
  • Слишком загружено пространство, необязательно все заполнять.
  • Продумывать максимальную ширину блока, например 50 em (40–50 символов в строке).

Главное — делайте все читабельным.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.