CSS Типография: Приёмы и лучшие методы

1 246

В первой части этой серии статей мы обсуждали некоторые фундаментальные понятия, относящиеся к CSS типографии. Сегодня мы постараемся охватить некоторые превосходные приёмы, советы, уловки и лучшие методы для работы с типографией веб-сайтов.

Это вторая из трёх частей серии уроков по CSS типографии, которая охватит всё от базового синтаксиса, до лучших методов и инструментов, связанных с CSS типографией.

Лучшая веб-типография с @font-face

Хорошая идея использовать умные наборы шрифтов (которые обсуждались в первой части) для текстовых блоков, но для заголовков и коротких текстовых фрагментов, могут быть использованы более интересные шрифты, с помощью @font-face.

Когда всё осуществлено правильно, @font-face совместим с большим количеством браузеров — даже с IE (eng).

Просто добавьте копию файла шрифта на свой веб-сервер и используйте команду @font-face в своём CSS коде следующим образом:

Затем используйте font-family, объявленное выше в своём CSS:

При том, что IE4+ поддерживает @font-face, шрифт должен быть в файле формата .eot. Достаточно просто — только сначала обработайте любой выбранный вами шрифт этим конвертером: ttf > eot Convertor.

Для получение дополнительной информации о @font-face, прочитайте следующее:

Для более простой реализации @font-face, обратитесь к @font-face generator от Font Squirrel.

Вертикальный ритм

Дизайн веб-типографии – это всё о чёткости и удобочитаемости.

Фактор межстрочного интервала для чёткости и читабельности это то, как текст вертикально располагается на странице. Строки расположены так близко, что сливаются вместе, или же наоборот, расположены слишком далеко друг от друга? Вот здесь может пригодится понимание и практическая реализация вертикального ритма.

Вертикальный ритм – это интервалы и расположение текста, с учётом того, как пользователь читает страницу сверху вниз.

Вертикальный ритм работает прежде всего с font-size и line-height, но также и с top/bottom margin и padding.

Концепция вертикального ритма проста: line-height, margin и padding должны соответствовать чётной пропорции.

Вот пример:

Посчитайте top margins и padding с текстовыми блоками (например, параграфы, списки, цитаты), так же, как и с изображениями и другими элементами уровня блока. Постарайтесь использовать те же значения line-height или кратные ей (например, 18px, 32px, 64px, и т.д. для примера выше).

С чётными пропорциями легко разобраться, применив немного математики. Давайте попытаемся выяснить, каково должно быть значение line-height в следующем примере.

Если line-height для body установлено на 1.5em, то нам нужно только разделить её на наш font-size, чтобы решить пропорцию: 1.5em/2em = 0.75em.

Для размеров шрифта больших, чем line-height, line-height должна быть уменьшена, чтобы соответствовать сетке базовых линий. Для размеров шрифта меньших, чем line-height, мы должны увеличить line-height.

Мы можем определить line-height для меньших размеров шрифта с помощью той же математики. Давайте попробуем снова, но на сей раз наш font-size меньше, чем line-height элемента body.

Если line-height элемента body всё ещё 1.5em, тогда мы возьмём её и разделим на наш font-size: 1.5em/.7em = 2.14em.

Для получения дополнительной информации по созданию базовых линий или вертикального ритма в разметке веб страниц (eng), просмотрите перечисленные ниже ресурсы. Также есть удобный генератор вертикального ритма (eng), на случай, если вы не хотите делать все вычисления сами.

Работа с CSS свойствами текста и белого пространства

@font-face и вертикальный ритм иногда могут становиться подавляющими, поэтому давайте немного остановимся и вернёмся назад к базовым приёмам.

CSS свойства текста

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

Вот некоторые текстовые CSS свойства (из названий понятно, для чего они нужны):

  • text-align (выравнивание текста): значения могут быть left, center, right или justify
  • text-decoration (оформление текста): значения могут быть overline, line-through, underline или blink
  • text-transform (управление регистром букв): значения могут быть uppercase, lowercase или capitalize

Давайте посмотрим на практике, как работает одно из этих свойств. В следующем примере мы выровняем начала всех параграфов:

Направление текста

Вы можете установить направление текста, используя свойство direction. По умолчанию направление установлено на ltr, что является сокращением от left to right (слева направо). Представьте, что мы хотели бы обратить его, тогда мы можем установить 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. Вот стиль для придания параграфам хорошей текстовой тени.

Для создания внутренней тени вы можете также использовать отрицательные значения:

Чтобы увидеть text-shadow в действии, просмотрите этот урок “Как создать внутреннюю тень текста, используя CSS3” (eng).

Лучшие методы 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.5em для Line-Height

1.5em – это самое обычное и рекомендуемое базовое значение line-height, которое означает, что высота строки должна быть +50% от font-size текста, предоставляя текстовым блокам некоторое вертикальное пространство.

Это не означает, что любое другое значение line-height плохое; но если вы сомневаетесь, 1.5em – беспроигрышный вариант.

Используя относительные единицы измерения для line-height применяйте математику, чтобы выяснить соответствующее значение line-height, как показано в следующем примере:

Для 12px font-size можно было использовать line-height 18px и при этом получить тот же результат, но тогда вы должны будете заново вычислять это значение, если font-size изменится для других элементов.

Используйте сокращенные записи CSS

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

Это сокращённая структура свойства font:

Например:

Заключение

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


Возможно, Вам будет интересно ↓↓↓

Оставить комментарий