интернет магазинов, электронных каталогов, эксклюзивных сайтов.
Создание за минимально кроткое время и при ограниченном
бюджете. Поддержка, мониторинг и продвижение сайта
в поисковых системах и каталогах.
Выбираем шрифт для сайта
Главная > Статьи > Веб-дизайн > Выбираем шрифт для сайта
Выбор шрифта для сайта это всегда важный момент
Выбор шрифта для сайта это всегда важный момент. Обычно выбором шрифта для дизайна сайта занимается дизайнер, но важно чтобы он не забывал оговорить шрифт для контента с тем кто будет заниматься версткой сайта.
1. Adobe PhotoshopAdobe Photoshop в настройке шрифтов имеет опцию Anti-aliasing (Сглаживание). Часто в элементах дизайна присутствуют графические надписи, но иногда надписи необхоимо вставлять в web-страницу как текст, а не как картинку, тогда нужно отключать Anti-aliasing. В Microsoft Windows сглаживание шрифтов включено по умолчанию, а также установлена опция "Standart". Когда размер шрифта больше 18px (некоторые шрифты от 17px), это могут быть к примеру заголовки, Anti-aliasing в таком случае необходимо включить (в Adobe Photoshop). Так же в настройках сглаживания шрифта имеется Sharp-сглаживание, которое очень похоже на стандартное Windows сглаживание.
В браузерах Internet Explorer 7 и Safari, сглаживание шрифтов включено по умолчанию, для всех маленьких и больших шрифтов. В других браузерах, сглаживание начинается с 17-18px. Поэтому в остальных браузерах мелкий текст отображаеться без сглаживания.

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

Выбираем шрифт
Это зависит от нескольких вещей:
- высота строчных букв
- гарнитура (засечки)
- ширина букв
- расстояние между буквами
- неперфорированное расстояние внутри буквы
Что касаеться засечек, то они предназначены в основном для отображения при печати, поэтому это не столь важный фактор в данном случае.
Рассмотрим пример со шрифтом Trebuchet MS.

Бвыло бы правильным заключение что чем оптимальней соотношение выше перечисленных параметров тем текст будет лучше читаться.
Рассмотрим шрифты которые в основном использую в веб-дизайне. Теперь посмотрим на основные шрифты используемые в Web-дизайне:

Что из выше увиденное нам может сказать?!
- Arial слишком компактен но имеет преимущества балгодаря высоте букв
- Tahoma компактный шрифт с средне-широкими буквами, больше подойдет для технической тематики.
- Verdana подходит для текста и хорошо читается благодаря ширине букв и меж-буквенного расстояния.
- Bitstream Vera Sans Является основным Linux шрифтом, не совсем подходит для веб-дизайна .
- Lucida Sans — Mac OS шрифт, не совсем аккуратен. Но поскольку в MacOS а также в Unix и Linux дистрибутивах anti-aliasing включён по-умолчанию, благодаря это вид шрифта намного лучше. нужно забывать Рассмотрим соответствие: Bitstream Vera Sans практически соответствует шрифтам Verdana и Trebuchet MS, Lucida Sans — соответствует шрифту Arial. Это обязательно необходимо прописать в CSS до шрифта sans-serif.
- Trebuchet MS наиболее подходящий шрифт с оптимальными параметрами.
- Helvetica — аналог Arial шрифт для MacOS, имеет не значительные различия с аналогом.
Наиболее приемлимые размеры шрифта для текста на сайтах 11-16 px, но это напрямую звисит от семейства шрифтов. Например текст в Verdana или Tahoma, и размером 11px читать удобно, а вот Arial уже режет глаза. Восприятие вещь тонкая. Для того чтобы выбрать правильно шрифт, текст необходимо написать несколькими предпологаемыми шрифтами для того, чтобы сравнить визуально, можно так же попробывать изменить размер шрифта и расстояние между буквами.
Некоторые основные шрифты:
- Calibri — шрифт из MS Office, в основном предназначенный для отображения с ClearType сглаживанием, и не для мелких размеров.
- Chianti WGL4 BT, Corbel (anti-aliased), Zurich WGL4 BT — Читабелен при включенном сглажевании и размере от 14 px.
- MS Reference Sans Serif — Видоизмененный Verdana шрифт.
- Encyclopaedia (anti-aliased) — При включенном сглаживании практически идентичен Trebuchet MS но с более широкими буквами и расстоянием между ними.
- Franklin Gothic Medium 13px - аналог шрифта Arial но размером на 1px меньше.
- MS Sans Serif — Стандартный системный шрифт Windows, хорошо читабелен при разных режимах.
- Hunky Sans (anti-aliased) — Хорошо читаемый шрифт, имеет сглаживание.
- Vanta Light (anti-aliased) — Самый подходящий шрифт для тестка с большим разбросом по размерам, хорошо читабелен при самых маленьких размерах.
- PragmaticaCTT — Видоизмененный аналог шрифта Trebuchet MS.
- Segoe UI (anti-aliased) — Vista стндартный шрифт, подходит только при включенном сглаживании.
Данные шрифты не являются обязательными для использования, но мы бы в свою очередь рекомендовали их к использованию. К данным выводам мы пришли исходя из опыта и рекомендаций специалистов с многолетним опытом в области веб-дизайна.
