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

На деле
Бюросериф на сайте бюроБюросанс в книгах бюро
Как хотим
Бюросериф на сайте бюроБюросанс в книгах бюро
Текст без «лишнего» пространства проще выравнивать по вертикали и подчинять вертикальному ритму

Например, на сайте бюро используется девятипиксельная сетка, она помогает добиться вертикального ритма на страницах, стандартизировать отступы, размеры элементов и кегли используемых шрифтов. По задумке все элементы на странице должны вставать на сетку своими краями, а текст — базовыми линиями.

Для осуществления «мечты дизайнера» нужна система, с помощью которой выравнивание элементов по сетке будет происходить автоматически, без ручной подгонки значений отступов. С элементами вроде картинок всё просто, они имеют явные края. Ставить текст базовыми линиями на сетку — проблема, потому что в ХТМЛ нельзя управлять вертикальным положением символа в строке.

Мы решаем эту задачу с помощью обёрток и вытяжек, отрицательных маржинов, подобранных так, чтобы скомпенсировать пространство над и под буквами:

<div class="textNode">
  <p>Абзац текста</p>
</div>
p {
  font-size: $medium-font-size;
  line-height: $medium-line-height;
  margin-top: -$medium-top-compensator;
  margin-bottom: -$medium-bottom-compensator;
}

Абзац текста

К счастью, в ЦСС появились свойства, делающие то же самое, но в две строчки:

p {
  text-box: trim-both ex alphabetic; /* Обрезаем по икс-хайту и базовой */
  text-box: trim-both cap alphabetic; /* Обрезаем по кап-хайту и базовой */
}
Бюросериф на сайте бюроБюросанс в книгах бюро
trim‑both — это сокращённая форма записи двух свойств: text‑box‑trim, с каких сторон отрезаем, и text‑box‑edge, до чего отрезаем. Скорее всего, по отдельности они вряд ли вам пригодятся, поэтому проще запомнить пару «однострочников» с text‑box

Поддержка в браузерах пока хромает. Работает в последних версиях Сафари и Хрома.

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы