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

Изначально дизайнер должен понимать, что типографика в web – это не та же типографика, что используется в дизайне различного рода полиграфии. Текст в web’е – это, прежде всего, строки кода, которые, во-первых, должны одинаково отображаться во всех браузерах, а во-вторых, минимально увеличивать время загрузки страницы.

Итак, какими же правилами следует руководствоваться при создании дизайна сайта.

I. Стандартные и нестандартные шрифты

Мечта всех верстальщиков, чтобы в дизайне использовались исключительно стандартные шрифты

Ниже приведена сводная таблица наличия и замены шрифтов в операционных системах Windows, Mac OS* (стандартный набор шрифтов, дополнительный набор шрифтов), Unix/Linux (стандартный набор шрифтов, пакет шрифтов Core fonts for web**)

Шрифт Windows Mac OS Unix/Linux Другие варианты замены Семейство
станд. дополн. станд. Core Fonts
Arial + Helvetica + Nimbus Sans L + sans-serif
Arial Black + Gadget + Nimbus Sans L + sans-serif
Comic Sans MS + Monaco + TSCu_Comic + cursive
Courier New + Courier + Nimbus Mono L + monospace
Georgia + Times + Century Schoolbook L + Times New Roman serif
Impact + Charcoal + Rekha + sans-serif
Lucida Console + Monaco monospace
Lucida Sans Unicode + Lucida Grande Garuda sans-serif
Microsoft Sans Serif + + New York serif
Palatino Linotype + Palatino Garuda Book Antiqua serif
Tahoma + Geneva + Kalimati sans-serif
Times New Roman + Times + Nimbus Roman No9 L + serif
Trebuchet MS + Helvetica + Garuda + Arial sans-serif
Verdana + Geneva + DejaVu Sans + sans-serif

Выделенные шрифты являются условно “безопасными”. А это значит, что их можно смело использовать

Если есть необходимость использования нестандартных шрифтов, то оптимальный вариант —  Google Web Fonts

Но здесь есть некоторые нюансы. Часть шрифтов отображаются с “рваными” краями при использовании большого кегля.

Причиной тому может быть отключенная опция “сглаживание шрифтов” (актуально для операционной системы Windows). Кроме того, каждый браузер по-своему сглаживает шрифты (например, в Internet Explorer шрифты выглядят более насыщенными, в то время как Mozilla FireFox отображает шрифты строго по пикселям). А, следовательно, где-то сайт будет выглядеть не так привлекательно, как в макете.

Поэтому, прежде чем использовать какой-либо из шрифтов Google Web Fonts, необходимо выставить желаемый размер шрифта, и посмотреть, как он будет отображаться в браузере (по возможности нескольких: Mozilla FireFox, Internet Explorer, Goggle Chrome).

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

Реклама

Страниц: 1 2 3 4 5 6 7 8