В первой части этой серии статей мы обсуждали некоторые фундаментальные понятия, относящиеся к CSS типографии. Сегодня мы постараемся охватить некоторые превосходные приёмы, советы, уловки и лучшие методы для работы с типографией веб-сайтов.
Это вторая из трёх частей серии уроков по CSS типографии, которая охватит всё от базового синтаксиса, до лучших методов и инструментов, связанных с CSS типографией.
- CSS Типография: Основы
- CSS Типография: Приёмы и лучшие методы
- CSS Типография: Примеры и инструменты
Лучшая веб-типография с @font-face
Хорошая идея использовать умные наборы шрифтов (которые обсуждались в первой части) для текстовых блоков, но для заголовков и коротких текстовых фрагментов, могут быть использованы более интересные шрифты, с помощью
Когда всё осуществлено правильно, @font-face
совместим с большим количеством браузеров —
Просто добавьте копию файла шрифта на свой веб-сервер и используйте команду @font-face
в своём CSS коде следующим образом:
1 2 3 4 |
@font-face { font-family: CurlzMTRegular; src: url(fonts/CurlzMTRegular.eot); } |
Затем используйте font-family
, объявленное выше в своём CSS:
1 2 3 4 |
h1, h2, h3, h4, h5, h6 { /* Всегда используйте набор шрифтов, даже с пользовательскими веб шрифтами! */ font-family: CurlzMTRegular, Helvetica, Arial, sans-serif; } |
При том, что IE4+ поддерживает @font-face
, шрифт должен быть в файле формата .eot. Достаточно просто — только сначала обработайте любой выбранный вами шрифт этим конвертером:
Для получение дополнительной информации о @font-face
, прочитайте следующее:
Для более простой реализации @font-face
, обратитесь к @font-face generator от Font Squirrel.
Вертикальный ритм
Дизайн веб-типографии – это всё о чёткости и удобочитаемости.
Фактор межстрочного интервала для чёткости и читабельности это то, как текст вертикально располагается на странице. Строки расположены так близко, что сливаются вместе, или же наоборот, расположены слишком далеко друг от друга? Вот здесь может пригодится понимание и практическая реализация вертикального ритма.
Вертикальный ритм – это интервалы и расположение текста, с учётом того, как пользователь читает страницу сверху вниз.
Вертикальный ритм работает прежде всего с font-size
и line-height
, но также и с top/bottom
margin
и padding
.
Концепция вертикального ритма проста: line-height
, margin
и padding
должны соответствовать чётной пропорции.
Вот пример:
1 2 3 4 5 6 7 |
p, ol, ul, blockquote, pre, code { line-height: 18px; margin-bottom 18px; /* 1.5em обеспечивает хороший интервал строк ( = 150% размера шрифта) */ line-height: 1.5em; margin-bottom: 1.5em; } |
Посчитайте top margins
и padding
с текстовыми блоками (например, параграфы, списки, цитаты), так же, как и с изображениями и другими элементами уровня блока. Постарайтесь использовать те же значения line-height
или кратные ей (например, 18px, 32px, 64px, и т.д. для примера выше).
С чётными пропорциями легко разобраться, применив немного математики. Давайте попытаемся выяснить, каково должно быть значение line-height
в следующем примере.
1 2 3 4 |
h1 { font-size: 2em; line-height: <strong>?</strong>; } |
Если line-height
для body
установлено на 1.5em
, то нам нужно только разделить её на наш font-size
, чтобы решить пропорцию: 1.5em/2em = 0.75em.
1 2 3 4 |
h1 { font-size: 2em; line-height: <strong>0.75em</strong>; } |
Для размеров шрифта больших, чем line-height
, line-height
должна быть уменьшена, чтобы соответствовать сетке базовых линий. Для размеров шрифта меньших, чем line-height
, мы должны увеличить line-height
.
Мы можем определить line-height
для меньших размеров шрифта с помощью той же математики. Давайте попробуем снова, но на сей раз наш font-size
меньше, чем line-height
элемента body
.
1 2 3 4 |
h2 { font-size: .7em; line-height: <strong>?</strong>; } |
Если line-height
элемента body
всё ещё 1.5em
, тогда мы возьмём её и разделим на наш font-size
: 1.5em/.7em = 2.14em.
1 2 3 4 |
h2 { font-size: .7em; line-height: 2.14em; } |
Для получения дополнительной информации по созданию базовых линий или вертикального ритма в
Работа с CSS свойствами текста и белого пространства
@font-face
и вертикальный ритм иногда могут становиться подавляющими, поэтому давайте немного остановимся и вернёмся назад к базовым приёмам.
CSS свойства текста
Группа CSS свойств текста содержит несколько свойств для работы со стилем текста. Наличие хорошего понимания этих свойств может помочь вывести текстовые блоки вашего дизайна на более дружественный уровень.
Вот некоторые текстовые CSS свойства (из названий понятно, для чего они нужны):
text-align
(выравнивание текста): значения могут бытьleft
,center
,right
илиjustify
text-decoration
(оформление текста): значения могут бытьoverline
,line-through
,underline
илиblink
text-transform
(управление регистром букв): значения могут бытьuppercase
,lowercase
илиcapitalize
Давайте посмотрим на практике, как работает одно из этих свойств. В следующем примере мы выровняем начала всех параграфов:
1 2 3 |
p { text-indent: 3em; } |
Направление текста
Вы можете установить направление текста, используя свойство direction
. По умолчанию направление установлено на ltr
, что является сокращением от left to right (слева направо). Представьте, что мы хотели бы обратить его, тогда мы можем установить direction
на rtl
.
1 2 3 |
p { direction: rtl; } |
Свойство direction
не очень популярно, потому что у него очень специфическое применение, но оно может пригодиться при работе с другими письменными языками. Многие ближневосточные языки, например, читаются справа налево.
White-space, Letter-spacing и Word-Spacing
Эти свойства обеспечивают интервалы между словами и символами.
Свойство white-space
регулирует, как текст обёрнут в своём родительском элементе. Возможные значения normal
, nowrap
, pre
, pre-line
, pre-wrap
и inherit
.
Свойство word-spacing
затрагивает расстояние между словами. Значениями могут быть любые единицы измерения CSS (такие как 0.5em или 5px).
Свойство letter-spacing
похоже на свойство word-spacing
, однако, оно влияет на расстояние между отдельными символами. Значениями могут быть любые единицы измерения CSS.
Текстовые тени
CSS3 предоставляет нам ещё несколько свойств CSS для использования в веб типографии. Одно из них это text-shadow
. Вот стиль для придания параграфам хорошей текстовой тени.
1 2 3 |
p { text-shadow: 1px 1px 1px #000; } |
Для создания внутренней тени вы можете также использовать отрицательные значения:
1 2 3 4 |
h1 { /* Use negative offsets to create inset text. */ text-shadow: #000 -1px -1px 0; } |
Чтобы увидеть text-shadow
в действии, просмотрите этот урок
Лучшие методы CSS Типографии
Далее следует обзор лучших методов, как тех, которые мы уже рассматривали, так и нескольких дополнительных. Ключевое понятие, которое нужно иметь в виду это то, что CSS типография – это всё о создании читабельного текста, который улучшит впечатление пользователя.
Serif или Sans serif?
Нет никакого законченного урока (eng), который бы указывал, что одна группа шрифтов более читабельная, чем другая. На читабельность больше всего действуют CSS свойства, которые мы уже обсудили, такие как font-size
и letter-spacing
.
Для шрифтов с засечками (serif), используйте большие line-height
, letter-spacing
, и возможно даже word-spacing
, потому что им нужно некоторое дополнительное пространство для всех изгибов и засечек.
Для шрифтов без засечек (sans serif) – более простой стиль шрифта может позволить более тесное пространство и меньший размеры шрифта, с наименьшим ущербом для читабельности.
Семантическая разметка
Всегда используйте надлежащую разметку. Например, используйте <strong>
вместо <b>
и <em>
вместо <i>
, а затем используйте CSS, чтобы применить к ним шрифт.
Используйте заголовки (h1-h6
) соответственно: чтобы сформировать разделы вашего контента в логические группы. Использование <h2>
после <h1>
означает, что раздел, который следует за предыдущим, является подразделом <h1>
. Используйте CSS, чтобы задать им стиль любым удобным вам способом, но сохраните свою разметку семантической.
Используйте HTML теги, чтобы добавить значение контенту HTML документа, и используйте CSS, чтобы применить к ним визуальный стиль. Например, используйте <small>
вместо <p class="smalltext">
.
Создание базовых стилей
Это всегда хороший способ сократить игру, которую затевают браузеры, когда не могут найти стиль определённого элемента. Не забывайте добавлять стили базовым элементам HTML.
1 2 3 4 5 6 7 |
h1, h2, h3, h4, h5, h6 { } p { } ol, ul { } a { } blockquote { } pre, code { } small { } |
Используйте 1.5em для Line-Height
1.5em – это самое обычное и рекомендуемое базовое значение line-height
, которое означает, что высота строки должна быть +50% от font-size
текста, предоставляя текстовым блокам некоторое вертикальное пространство.
Это не означает, что любое другое значение line-height
плохое; но если вы сомневаетесь, 1.5em – беспроигрышный вариант.
Используя относительные единицы измерения для line-height
применяйте математику, чтобы выяснить соответствующее значение line-height
, как показано в следующем примере:
1 2 3 |
p { font-size: 12px/1.5em; } |
Для 12px font-size
можно было использовать line-height
18px и при этом получить тот же результат, но тогда вы должны будете заново вычислять это значение, если font-size
изменится для других элементов.
Используйте сокращенные записи CSS
Всегда используйте сокращённые записи там, где это возможно, поскольку это обычный способ записи CSS в настоящее время.
Это сокращённая структура свойства font
:
1 |
font: [font-style] [font-size]/[line-height] [font-family 1, font-family 2, ..., font-family n] |
Например:
1 2 3 |
p { font: normal 12px/1.5em Arial, Helvetica, sans-serif; } |
Заключение
В этой части, мы охватили некоторые приёмы, уловки и лучшие методы CSS типографии. В следующей части, мы познакомим вас с некоторыми примерами отличной CSS типографии, а также с некоторыми инструментами, которые вы можете использовать, чтобы облегчить свою жизнь.
- CSS типография: Основы
- CSS типография: Приёмы и лучшие методы
- CSS типография: Примеры и инструменты