CSS Типография: Основы

Типография – основной компонент дизайна сайта. Cерьёзный довод в пользу этого: хорошая типография обязательна не только для эстетической привлекательности, но она также улучшает юзабилити сайта, когда применены такие понятия, как чёткость текста и удобочитаемость.

Типография – это всё о пропорциях и интервалах. Также в ней рассматривается стиль шрифта.

Как мы можем использовать CSS для создания превосходной типографии в своих дизайнах? Это вопрос, на который мы постараемся ответить.

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

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

CSS свойства типографии

Есть две основные группы свойств CSS, которые управляют стилями типографии: font и text.

Группа CSS свойств font описывает общие характеристики текста, такие как: font-style (начертание шрифта) и font-weight(жирность шрифта). Ниже вы увидите элемент p, к которому были применены свойства font-style и font-weight.

Группа свойств text работает с символами, интервалами, словами и параграфами. К примеру, свойство text-indent выравнивает первую строку текстового блока. Свойство letter-spacing управляет пространством между текстовыми блоками. Ниже вы увидите элемент p, с применёнными к нему свойствами text-indent и letter-spacing.

Есть другие CSS свойства, которые могут затронуть веб-типографию, кроме групп fonts и text. Например, свойство color управляет основным цветом элемента HTML, и может быть использовано для изменения цвета текста. Ниже вы можете увидеть элемент p с применённым к нему красным цветом.

Установка размеров шрифтов

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

Простое использование размеров шрифтов следующее:

Вышеупомянутый код устанавливает размер заголовков 6-го уровня на 12pt.

Для значений размера шрифта есть 4 типа единиц измерения.

Абсолютный размер

Стандартные параметры, значение которых определяется пользовательским агентом (например, браузером). Значения в спецификации W3C CSS 2.1 xx-small, x-small, small, medium, large, x-large, xx-large.

Относительный размер

Стандартные значения, которые измеряют размер шрифта на основе родительских элементов. Они также определяются пользовательским агентом. Возможные значения larger и smaller. Ниже вы увидите, как выглядит элемент параграфа внутри родительского элемента (<div>), у которого указан размер 12pt (в Firefox).

Обе группы значений параметров (абсолютный размер и относительный) могут сильно изменяться в разных браузерах, поэтому, если ваша цель быть совершенным до каждого пикселя, они не могут быть хорошим выбором, и большинство веб-дизайнеров в целом их избегают.

Параметры smaller и larger, однако, могут отлично подойти для удобной относительной установки размера, когда точные пропорции не имеют значения для дизайна. Значения larger и smaller наследуют размер шрифта родительского элемента, а затем относительно него соответственно регулируют размер шрифта конечного элемента. Так, к примеру, если значение родительского элемента установлено на small, параметр larger сделает дочерний элемент больше. Для большинства браузеров изменение от точных единиц около 1.2 единицы, хотя эта пропорция верна не для всех браузеров.

К примеру, если размер текста установлен на 12pt, параметр larger изменит размер текста дочернего элемента приблизительно на 12pt x 1.2 (зависит от браузера), что примерно равно 14.4pt.

Абсолютные размеры

Абсолютные размеры — это точные размеры. Например, 12px — это точно 12 пикселей, а 2in — это точно 2 дюйма. Поэтому абсолютные значения часто используются веб-дизайнерами.

Возможные единицы измерения для абсолютных длин: pt, px, mm, cm, in и pc.

Миллиметры (mm), сантиметры (cm) и дюймы (in) больше подходят для физических, реальных размеров и часто используются в печатном дизайне. Они не очень подходят для экранных размеров, из-за различных разрешающих способностей экранов.

Точки (pt) и пики (pc) — лучше, чем mm, cm и in, но также могут визуально изменяться в зависимости от dpi (количества пикселей на дюйм) браузера или устройства.

Поэтому, при использовании абсолютных длин, пиксели (px) наименее проблематичны. Одна проблема с px, тем не менее есть, старые версии IE прирождённо не могут изменить их размер. При разработке для аудитории, которая, вероятно, изменит размеры вручную через свой браузер, единица измерения px не может быть хорошим выбором. Когда используете px для размеров шрифтов, убедитесь, что доступность не проблема.

Относительные размеры

Другой тип единиц длины – это относительные размеры. Это означает, что их размеры зависят от font-size, применённого к их родительским элементам. Возможные единицы: em, % и ex.

Не многие дизайнеры используют ex — это высота символа "x" в текущем шрифте.

Со значениями em и % намного легче работать. em и % действуют одинаково, это лишь вопрос синтаксиса:

• 0.5em равно 50%
• 1em равно 100%
• 0.2em равно 20%
• 0.73em равно 73%
• 2.21em равно 221%

Все пропорции относительны font-size родительского элемента. Так, если базовый размер элемента ( body или html) установлен на 80%, дочерний элемент с font-size 0.2em или 20% будет в высоту 20% от первоначальных 80%.

Наборы шрифтов

CSS font stacks (наборы или стеки шрифтов в CSS) – это списки шрифтов, которые будут работать на разных операционных системах и платформах, с целью создания настолько совместимой типографии, насколько это возможно.

Вот пример набора шрифтов:

В примере выше веб-браузер пойдёт слева направо, пока не найдёт шрифт на компьютере пользователя. Например, он будет искать шрифт Georgia, и если не найдёт его, то перейдёт к шрифту Times, и так далее.

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

Идея наборов шрифтов состоит в том, чтобы показывать идеальные шрифты, которые были бы доступны на большинстве компьютеров, и показывать дополнительные шрифты (для резерва), если первые шрифты не были найдены.

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

Есть несколько ключевых моментов, которые стоит отметить при создании пользовательских наборов шрифтов:

1. Необходимо достаточное количество второстепенных шрифтов. Наш пример выше перечисляет только три, но было бы идеально, если бы их было больше.
2. Выбранные шрифты должны быть доступны на ряде платформ. К примеру, Arial широко используется в Windows, в то время, как его близкий эквивалент, Helvetica, поддерживается почти во всех Mac.
3. Для наборов шрифтов, ориентированных на пользователей Linux, прочитайте Руководство веб-дизайнера по шрифтам Linux (eng.).

Лучшие методы разработки наборов шрифтов

У всех шрифтов в одном наборе должна быть одинаковая (или похожая) пропорциональность символов. В некоторых шрифтах символы шире или выше, чем в других из-за большего соотношения ширины и высоты символа.

Так, если мы используем Verdana (главным образом Windows) с Helvetica (Mac), мы ответили вышеупомянутым требованиям. Однако, поскольку Verdana намного шире, чем Helvetica, текст будет выглядеть иначе на большинстве компьютеров Mac по сравнению с большинством компьютеров Windows.

Изображение ниже показывает различие в пропорциональности четырёх основных шрифтов Windows (eng). Как вы можете видеть, Verdana и Georgia шире и выше чем Arial, и чем Times.

В больших текстовых блоках различие более очевидно. Если у нас был набор с Verdana для Windows и Helvetica для Mac, изображение ниже показывает существенное различие.

Итак, разрабатывая наборы шрифтов:

• Убедитесь, что ваш набор подходит ко всем операционным системам (Windows, Mac и Linux).
• Убедитесь, что набор шрифтов содержит либо все шрифты sans serif (без засечек) либо serif (с засечками) (для согласованности шрифтов)
• Убедитесь, что шрифты в наборе имеют схожую пропорциональность.

Здесь список самых основных шрифтов с различными типами пропорициональности:

• Широкие sans serif: Verdana, Geneva
• Узкие sans serif: Tahoma, Arial, Helvetica
• Широкие serif: Georgia, Utopia
• Узкие serif: Times, Times New Roman
• Моноширинные: Courier, Courier New, Lucida Console

Если вам нужно больше помощи в создании наборов шрифтов, CodeStyle создали очень полезный составитель наборов шрифтов, который включает все шрифты Mac, Windows и Linux.

Псевдо-классы и псевдо-элементы CSS типографии

CSS псевдо-классы и псевдо-элементы хорошо подходят для обращения к определённым типам элементов. Псевдо-классы начинаются с двоеточия (:), за которым следует название класса/элемента.

Есть несколько CSS псевдо-классов/псевдо-элементов, связанных с типографией, таких как :hover и :first-letter.

Давайте пройдёмся по некоторым, которые помогут нам в дизайне типографии.

Ссылки и динамические псевдо-классы

Дизайн гиперссылок сайта (eng.) очень важен. Используйте псевдо-классы тегов ссылок, чтобы задать стили шрифта для каждого состояния ссылки.

:hover является, вероятно, самым знакомым, и это хороший способ создать отдельный (но всё же похожий) стиль, чтобы обеспечить визуальное понимание, что элемент ссылки интерактивен.

Здесь перечислены псевдо-классы ссылок:

Псевдо-элементы First, Last и n-th

Все следующие псевдо-элементы связаны с позицией элемента относительно HTML документа и других элементов HTML в нём.

:first-letter позволяет вам обращаться к первому символу элемента. Вот пример:

Как вы можете видеть, элемент может быть полезен для создания буквицы (eng.).

Псевдо элемент :first-line позволяет вам выбрать первую строку элемента HTML, содержащего текст. Вот пример задания первой строке текста свойств bold и uppercase:

:nth-child() – псевдо-элемент CSS3, который обращается к n-ному элементу на странице или в родительском элементе в зависимости от специфики селектора. В нашем примере ниже мы обращаемся ко второму параграфу на странице.

Мы могли также обратиться ко второму параграфу внутри тега div или ко второму элементу в списке следующим образом:

Также поиграйте со псевдо-классами :nth-child(even) и :nth-child(odd), чтобы получить доступ к чётным или нечётным элементам.

Также есть псевдо-элементы :first-child (CSS2) и :last-child (CSS3), которые могут выбрать первый и последний элементы в наборе.

Заключение

Мы охватили основы CSS типографии. С некоторым творческим потенциалом, типография может стать одним из самых красивых и интересных направлений CSS.

В следующей части, мы обсудим лучшие методы CSS, имеющие отношение к CSS типографии.