Какие шрифты лучше использовать при верстке вебсайта?

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

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

1. Корректно отображающиеся у основной массы пользователей.
2. Отсутствующие у основной массы пользователей.

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

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

Как нам различать эти два типа шрифтов? Понятное дело, что нельзя судить по своему компьютеру об этом факте. Предлагаю разобрать подробнее.

Стандартные шрифты

Базовый шрифты устанавливаются при установке ОС. Они разные, следовательно, и количество шрифтов разное. Список основных шрифтов Windows не затруднит найти, равно как и для «яблочной» операционной системы. А вот в Unix и Linux список не определен и вовсе. Большинство линуксоидов инсталлируют себе набор шрифтов DejaVu. В UBUNTU это по умолчанию. Согласно статистических данных http://www.codestyle.org любители этих ОС инсталлируют также Free, URW и другие наборы. Опрос выявил, что свыше 60 процентов пользователей Linux и Unix пользуются набором Core fonts for the Web. После 2002 года Майкрософт больше не предоставляет бесплатной возможности скачивания этого пакета.

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

Это свойство дает возможность использования иных шрифтов, либо их семейств. По спецификации CSS2 существует 2 вида наименований шрифтовых семейств:

1. Наименование семьи шрифтов в принципе произвольно. Варианты: «Times new Roman», «Arial» и прочие. Наименования семей шрифтов, которые включают пробелы, обязательно помещаются в кавычки. Если их нет, разные знаки пробела до и после наименования шрифта будут проигнорированы, а различное количество пробелов внутри наименования шрифта будет преобразовано в одинарный пробел.
2. Родовое (общее) семейство. В спецификации представлены такие общие сообщества шрифтов:

• serif — шрифты, имеющие засечки на «хвостах»;
• sans-serif — шрифты, не имеющие засечек;
• cursive — наклонные шрифты;
• fantasy —шрифты декоративного начертания;
• monospace — моноширинный шрифт(Все символы имеют строго одну определенную ширину).

Наименования общих семейств — это ключевые слова и нет нужны помещать их в кавычки.

Так для дизайна выбирают стандартный шрифт ОС Windows, выбирая при этом максимальной схожий для iOS и Linux-подобных ОС, указывается одна семья шрифтов, все дела.

Иногда бывает сложнее. Разберем основательнее.

В поисках Web-безопасных шрифтов

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

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

Базой для отнесения шрифтов к «безопасных» являются шрифты массовой ОС Windows, использующиеся в иных операционках. Как пример — Core fonts for the Web, который, скачало огромное количество пользователей Linux и Unix, согласно статистике.

Сюда вошли: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Все они — кириллические, что важно в русскоязычном сегменте Интернета.

В стандартной поставке Mac OS X (она наиболее распространена среди владельцев яблочной продукции) имеются все без исключения шрифты набора Core fonts for the Web.

Вот так на базе шрифтов ОС Windows, применяющихся в иных системах появился дальнейший список условно «безопасных» шрифтов для создания сайта:

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Шрифт Webdings представляет собой набор значков, следовательно, его никак нельзя применять для текстового содержимого. Andale Mono мало распространен, так как отвратительно подходит для ежедневного чтения текстов с дисплея и имеется далеко не на каждом ПК с ОС Windows.

Эти шрифты присутствуют у всех владельцев ОС Windows, Mac OS X и у широкой массы пользователей Unix-подобных ОС (конкретно — которые инсталлировали набор Core fonts for the Web).

А что с другими? Ведь дизайнер желает чтобы его великий замысел оценили широкие массы.

Шрифты, поддерживающие кириллицу

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

Ниже дана таблица корреляции внешнего вида шрифтов.

* значит, что нативных русскоязычных эквивалентов Windows шрифта у ОС нет. Имеется великая вероятность, что в ОС инсталлирован именно этот шрифт.

Как вариант, если базовым текстом макета используется Arial, находим в таблице этот шрифт и в таблице стилей прописываем соответствующую ему строчку:

Этот код указывает, что если в системе присутствует шрифт Arial (он точно присутствует на Windows и на Mac OS X), то текст будет выведен именно данным шрифтом. Если шрифт отсутствует, то текст русскоязычного пользователя Mac OS будет выведен стандартным системным шрифтом Helvetica CY, в случае Unix-подобных систем тест выведется шрифтом Nimbus Sans L, имеется у порядка 90% ПК на Linux. Если же сайт просматривает пользователь, у которого отсутствует и этот шрифт, то текст будет отображен шрифтом с засечками (установлен для просмотра Web-страниц по умолчанию).

Также, в таблице требуется учесть шрифты Unix-систем, так там после привычного Helvetica следует CY. Выясним, что это за зверь!

До появления Mac OS X этот код имел такое значение: для Windows- пользователей показываем страницу Arial, для Mac OS 9 — стандартным шрифтом Helvetica, все остальные увидят этот текст со шрифтом без засечек, он используется по умолчанию. Важный нюанс! У стандартного шрифта Mac OS 9 Helvetica нет русского алфавита! Для русскоязычного текста это значит следующее: для Windows выводим страницу шрифтом Arial, для Mac OS 9 —шрифтом Helvetica, который даст не понятно, что (вернее понятно – не читаемый текст), а остальные увидят этот текст со шрифтом без засечек, применяемым по умолчанию в браузере.

Для корректного вывода этого набора у пользователей Mac OS 9 вместо некириллизированной Helvetica, целесообразно применить для Mac OS 9 шрифт Helvetica CY, который поддерживает кириллицу.

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

Так хоть и нет безопасных шрифтов, но имеются безопасные линейки шрифтов. Они такд именуются шрифтовыми CSS стеками. В эти линейки кроме стандартных шрифтов Windows/Mac OS X допустимо добавить и схожие шрифты из базового набора Mac OS 9 (в которой нет в принципе «безопасных» шрифтов) и типичных распространенных шрифтов Unix-подобных систем.

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

Далее дана альтернативная таблица шрифтов, не вошедших в список «безопасных», но допускают применение и на макетах.

А если без кириллицы?

Для текстов с латинским алфавитом таблицы, данные ранее, имеют немного иной вид.

Для шрифтов типа Arial, Courier New и Times New Roman при подготовке линеек оптимальнее указать сперва шрифт для Unix/Linux, после — для Mac OS. Это связанно с небольшой некорректностью набора Linux-шрифтов X11 core fonts set.

Шрифты, не входящие в список «безопасных», допускают использование на макетах, но целесообразно определять шрифтовыми CSS стеками на базе данной таблицы.

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

** в этой линейке шрифт Garuda оптимально расположить перед Palatino (см. выше).

Итоги:

• Полностью безопасных шрифтов нет. Условно безопасными допустимо именовать представленные ниже шрифты:

1. Arial
2. Arial Black
3. Comic Sans MS
4. Courier New
5. Georgia
6. Impact
7. Times New Roman
8. Trebuchet MS
9. Verdana

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