Типографика в вёрстке
Капитель, лигатуры и компенсаторы
Расскажу, с чем из дизайнерских тонкостей мы заморачиваемся на сайтах и в книгах бюро.
Типографика в вёрстке
Капитель, лигатуры и компенсаторы
Выравнивание по базовой, икс‑хайту или кап‑хайту
На сайте бюро и в книгах с классической темой, например, в «Типографике и вёрстке» и «Информационный стиле», текстовые элементы выравниваются снизу по базовой линии, а сверху — по линии строчных. В книгах со швейцарской темой текстовые элементы выравниваются по базовой линии и по линии заглавных:
Мы добиваемся такого поведения заголовков, параграфов и подписей с помощью отрицательных вытяжек:
Капитель и лигатуры
Капитель и лигатуры — фичи шрифта, соответственно, включаются через font-feature-settings:
.smallcapitals {
/* smcp включает капитель,
* c2sc капителит строчные */
font-feature-settings: 'smcp', 'c2sc';
}
.liga {
/* liga включает лигатуры,
* kern включает кернинг */
font-feature-settings: 'liga', 'kern';
}КПСС, ЦСС и difficulty
КПСС, ЦСС и difficulty
Компенсаторы
Если поставить рядом крупный заголовок и мелкий текст, будет видно, что расстояние от левого края до букв очень разное. Текст словно уезжает вправо. Чтобы это скомпенсировать, нужно «отжать» воздух слева:
Пятёрка
Тройка
Двойка
Айбукс Автор — собственный закрытый формат Эпла. Книги в формате Айбукс нельзя продавать нигде, кроме Айбукса. В любой момент Эпл может перестать его поддерживать, и тогда ваши книги превратятся в тыковку, как это происходит со старыми приложениями в Апсторе. Для чтения книг Эпла нужно устройство Эпл, которые есть не у всех. А ведь книга должна быть самым доступным и долговечным носителем знаний.
Пятёрка
Тройка
Двойка
Айбукс Автор — собственный закрытый формат Эпла. Книги в формате Айбукс нельзя продавать нигде, кроме Айбукса. В любой момент Эпл может перестать его поддерживать, и тогда ваши книги превратятся в тыковку, как это происходит со старыми приложениями в Апсторе. Для чтения книг Эпла нужно устройство Эпл, которые есть не у всех. А ведь книга должна быть самым доступным и долговечным носителем знаний.
Чтобы добиться такого поведения, мы используем относительные отрицательные левые маржины в em:
h1,
h2,
h3,
p {
margin-left: -.07em;
}Это заключительный совет о типографике в вёрстке. Хотите знать больше? Присылайте вопросы