Как выбрать шрифт для 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. Значит у большинства браузеров мелкий текст будет отображаться без сглаживания.
В данном примере, в разработке макета сайта, нам нужно использовать левый заголовок и правый текстовой блок.
Выбор шрифта
Выбор зависит от следующих факторов:
- гарнитура (засечки)
- высота строчных букв
- расстояние между буквами
- ширина букв
- неперфорированное расстояние (внутри буквы)
С засечками всё понятно, они предназначены для распечатки текста и хороши для чтения с бумаги. Поэтому первый пункт можно отбросить.
Пример со шрифтом 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) — отличнейший шрифт. Очень хорошо читается даже в маленьком размере.
Так же уделите внимание высоте строки. Зачастую “стена” текста менее читабельна нежели слегка увеличенное расстояние между строками.
