Выбор шрифта для сайта

Как выбрать шрифт для Web-сайта

Выбор шрифтов — ответственный момент. Конечно выбором шрифта для элементов дизайна сайта, должен заниматься дизайнер, но выбор шрифта для контента обязательно должен согласовывать с верстальщиком.

Немного терминологии:

• Вообще понятие шрифта я так и буду называть шрифтом.
• Font-family, т.е. название шрифта я буду называть фонтом.

Начнём с Photoshop’а

В Adobe Photoshop в настройке шрифтов есть опция Anti-aliasing (Сглаживание). Среди элементов дизайна часто попадаются графические надписи, что весьма логично. Но если надписи планируется вставлять в web-страницу как текст, а не как картинку, то следует отключать Anti-aliasing. По-умолчанию, в Windows сглаживание шрифтов включено и установлена опция Standart. Если размер шрифта больше 18px (у некоторых шрифтов от 17px), например, это могут быть заголовки, то Anti-aliasing можно в photoshop’е включить. Рекомендую ставить Sharp — это сглаживание, больше всего похоже на стандартное сглаживание в OS.

В браузерах Safari и Internet Explorer 7, сглаживание шрифтов работает по умолчанию, причём для всех шрифтов и маленьких и больших. Во всех остальных браузерах, как я уже сказал сглаживание шрифта начинается с размера 17-18px. Значит у большинства браузеров мелкий текст будет отображаться без сглаживания.

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

Выбор шрифта

Выбор зависит от следующих факторов:

1. гарнитура (засечки)
2. высота строчных букв
3. расстояние между буквами
4. ширина букв
5. неперфорированное расстояние (внутри буквы)

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

Пример со шрифтом Trebuchet MS.

Логично, что чем более оптимально соотношение перечисленных параметров, тем читабельней текст.

Теперь посмотрим на основные шрифты используемые в Web-дизайне:

Что из этого мы можем увидеть?

• Tahoma очень компактный шрифт с буквами средней ширины, хорош для каких-то технических вещей.
• Шрифт Verdana очень подходит для текста и имеет хорошую читаемость за счёт ширины букв и расстояния между буквами.
• Arial имеет свои преимущества в читабельности за счёт высоты букв, но минус, за счёт излишней компактности.
• Trebuchet MS отличный шрифт, отличающийся хорошо сбалансированными параметрами. (моя рекомендация)
• Bitstream Vera Sans я добавил лишь для того чтобы вы посмотрели на кошмар выдаваемый этим шрифтом, а он является основным Linux шрифтом. Lucida Sans — основной Mac шрифт, тоже не блещет аккуратностью. Но беспокоиться не о чем, поскольку в MacOS и во всех современных Unix и Linux дистрибутивах anti-aliasing включён по-умолчанию, что весьма улучшает вид шрифта. Но всё равно не нужно забывать о соответствии: Bitstream Vera Sans больше похож на Verdana и Trebuchet MS, А Lucida Sans — на Arial. Не забудьте прописать это в CSS до sans-serif.
• Не добавил Helvetica — идентичный Arial шрифт в MacOS, с некоторыми нюансами. Просто его у меня нет.

Стандартные и наиболее оптимальные размеры шрифта для отображения текста на web-сайтах — 11-16, в зависимости от фонта. Если текст написанный Verdana или Tahoma, с размером 11px читать ещё удобно, то Arial уже рябит в глазах. Всё зависит от восприятия. Чтобы выбрать правильно шрифт, напишите текст всеми возможными шрифтами и сравните чисто визуально, поиграйтесь размерами и расстояниями между букв и слов (чтобы там Лебедев не говорил).

Хочу так же отметить шрифты:

• Calibri — MS Office шрифт, очень красивый на мой взгляд, но предназначенный для отображения с ClearType сглаживанием, и не очень мелким размером
• Chianti WGL4 BT, Corbel (anti-aliased), Zurich WGL4 BT — приятно читается когда сглажен и размер от 14 px
• Encyclopaedia (anti-aliased) — отличный шрифт, если сглажен, то похож на Trebuchet MS только пошире и расстояния между буквами побольше
• Franklin Gothic Medium 13px очень похож на Arial 12px — можно использовать как альтернативу
• Hunky Sans (anti-aliased) — отличный и читаемый шрифт со сглаживанием
• MS Reference Sans Serif — немного обработанный шрифт Verdana
• MS Sans Serif — тоже не плохой шрифт, что-то среднее между Arial и Verdana
• PragmaticaCTT — похож на Trebuchet MS с некоторыми коллизиями.
• Segoe UI (anti-aliased) — стандартный Vista шрифт, не идеал, но можно использовать (только сглаженный)
• Vanta Light (anti-aliased) — отличнейший шрифт. Очень хорошо читается даже в маленьком размере.

Так же уделите внимание высоте строки. Зачастую “стена” текста менее читабельна нежели слегка увеличенное расстояние между строками.

Источник