CSS типография для веб-страниц

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

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

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

Псевдо Элементы

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

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

Ниже я привёл пример кода, который реализует данную функциональность.

p:first-letter {
display:block;
float:left;
font-size: 80px;
color: #c9c9c9;
}

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

Очередь шрифтов

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

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

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

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

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

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

p {
font-family: Helvetica, Verdana, Arial, sans-serif;
}

Высота строки

Высота строки - другое важное свойство CSS, которое улучшает удобочитаемость. Никому же не удобно читать какой-то текст, строки которого просто прилипают друг к другу. Пользователь будет недоволен, потому что его глаза будут быстро уставать и, возможно, он бросит читать статью едва начав.

Я надеюсь, вы поняли, что такое оформление текста приведёт к резкому снижению пользователей, которые будут посещать ваш сайт. Именно поэтому я вам советую всегда пользоваться CSS свойством line-height, тем самым, вы обеспечите удобство и простоту чтения вашим пользователям. В этой ситуации будут довольны все: вы и они.

Тут же я позволю себе дать некую рекомендацию относительно межстрочного расстояния. Думаю 150% в качестве значения к данному CSS свойству будет вполне достаточно, чтобы добиться нужного эффекта. Это значение может быть и выше. Всё зависит от вашего вкуса.

Правило @font-face

Использование CSS правила @font-face - это очень популярный и распространённый приём среди веб-дизайнеров, поскольку он помогает решить одну из выше перечисленных проблем и совсем не париться на счёт того, установлен тот или иной шрифт у пользователя на компьютере или нет. Для того чтобы воспользоваться правилом @font-face, вам необходимо расположить ваш шрифт на сервере, так же как и другие элементы вашего сайта.

Но не спешите сильно радоваться. @font-face может решить указанную проблему. Но у этого метода также есть несколько недостатков.

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

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

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

Наконец, при использовании метода @font-face, вы должны учитывать то, что указанный вами шрифт не всегда может отображаться в браузере по техническим причинам. Именно поэтому вам всё равно нужно указывать семейство шрифтов, которые будут использоваться в случае непредвиденных обстоятельств. Теперь я бы хотел продемонстрировать применение @font-face. Заметьте, что нам необходимо указать свойство font-family с именем шрифта и вписать значение в специальный атрибут src, где указать источник файла.

@font-face {
font-family: myfont;
src: url('myfont.otf');
}

В качестве альтернативы вы могли бы использовать популярные службы, такие как Typekit, FontDeck, или даже Google Web Fonts API. Всегда же должна быть альтернатива!

Заключение

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

• Комментарии