В большинстве случаев на сайтах основным контентом является — текстовая составляющая, т.е. пользователю необходимо читать, читать и ещё раз читать. По статистике в интернете почти никто не читает статью целиком, все пробегают взглядом и пытаются уловить лишь основную мысль, поскольку в статьях, как правило, полно "воды". Цель вебмастера сделать чтение для пользователя максимально комфортным. Эта статья расскажет не только о выборе шрифта, но и о том как лучше выложить контент на сайте.
Из каких критериев состоит выбор шрифта для сайта? Ниже я перечислил основные критерии и рекомендации по каждому из них.
1. Выбор семейства шрифта
Существует бесчисленное множество шрифтов, многие из них похожи друг на друга, но тем не менее у каждого из них есть свои отличительные черты. Однако далеко не во всех браузерах есть каждый из них. Ниже представлен небольшой список самых популярных шрифтов, которые есть в каждом браузере:
- Arial;
- Verdana;
- Times New Roman;
- Georgia;
- Trebuchet MS;
Если Вас устроит какой-то шрифт из этого списка, то это будет лучшим вариантом, поскольку тогда не стоит беспокоиться об его специальной подгрузке в браузер пользователя. Если все же Вы хотите какой-то редкий шрифт, то здесь можно пойти несколькими путями (но я сразу говорю, что лучше не создавать себе проблем!).
Например, можно выбрать какой-нибудь красивый шрифт на Google Font, но чтобы выбранный шрифт появился у пользователей в браузере нужно будет подключить его. В итоге шрифт будет каждый раз подгружаться с Google Font, что на, мой взгляд, плохо и на это есть ряд веских причин:
Во-первых, появляется зависимость от других сайтов (в данном случае от Google). Например, Google по каким-то причинам может медленно работать, то в этом случае Ваш сайт также затормозится. За примерами далеко ходить не надо. Я лично подгружал скрипт для работы с библиотекой AJAX (jquery) с сайта Google, но периодически он вообще не грузился и это приводило к некорректной работе всего сайта.
Решение проблемы было простым: просто скопировал весь .js файл к себе на хостинг и подгружать его с моего же сайта. Лучше всего, когда весь сайт грузится с Вашего же хостинга. Однако перенести шрифты к себе на сайт не получится, придется всегда грузить их с сайта Google.
Во-вторых, в таких браузерах, как Opera в глазах пользователя все будет выглядеть следующим образом: он заходит к Вам на сайт, контент уже появился и примерно через полсекунды - бам и шрифт поменялся. Это произойдет, как только браузер подгрузит его с Google и обработает. Для серьезных ресурсов это "мерцание" стилей у текста неприемлемо. Конечно, такая ситуация не на всех браузерах, но лично мне и одной оперы хватает, чтобы отказаться от идеи использования мало популярных шрифтов.
Вернемся к семействам шрифтов. Самым лучшим и универсальным шрифтом является Verdana. На этом сайте как раз такой шрифт. Он без загогулин, является строгим и читаемым, а именно это и надо пользователю для быстрого получения информации.
2. Выбор размера шрифта
Выбор размера шрифта является сложной задачей, поскольку некоторым нравится более мелкий шрифт, а кому более крупный. Лично я для себя сделал предпочтение размеру 14 пикселей. Этот размер является стандартом во многих областях (например, такой размер используется при написании дипломов, курсовых по ГОСТУ). На данном сайте размер шрифта 14 и больше его делать нет необходимости и меньше тоже. Помните, что самое главное то, чтобы пользователям было удобно читать контент.
ПримечаниеЗачастую один и тот же размер у разных шрифтов имеет совершенно разные размеры по высоте, а значит и визуально воспроизводится по-разному. Поэтому лучше протестировать как все смотрится, а не заморачиваться на конкретной цифре 14.
3. Выбор цвета шрифта и фона под него
Какой бы хороший не был цвет и фон — все равно читать текст на мониторе неудобно. Все что можно сделать, это лишь максимально сделать комфортным чтение. Считается, что черный текст на белом фоне очень хорошо читаем, однако если спросить мнение людей, которые работают на компьютерах, то они скажут, что белый фон очень яркий и от него устают глаза. Идеальным решением является немного сероватый фон и на нем черно-серый текст. Такой текст можно читать очень долго без напряга для глаз. Также благоприятным для глаз является синий цвет шрифта.
Очень популярным также является сочетание: черный фон и белый текст, но такое сочетании подойдет далеко не для каждого сайта. Все же большинство сайтов имеют светлые дизайны. Я нашел специальный список сочетаний цвета шрифта и фона (в порядке убывания читаемости):
- Синий на белом;
Пример - Синий на белом - Черный на желтом;
Пример - Черный на желтом - Зеленый на белом;
Пример - Зеленый на белом - Черный на белом;
Пример - Черный на белом - Красный на желтом;
Пример - Красный на желтом - Красный на белом;
Пример - Красный на белом - Зеленый на красном;
Пример - Зеленый на красном - Оранжевый на черном;
Пример - Оранжевый на черном - Черный на пурпурном;
Пример - Черный на пурпурном - Оранжевый на белом;
Пример - Оранжевый на белом - Красный на зеленом;
Пример - Красный на зеленом
Чем выше в списке сочетание цвет/фон, тем лучше его читаемость. Советую посмотреть: как сделать фон для сайта, а также коды и названия html цветов.
4. Другие мелочи
К этим мелочам я бы хотел отнести следующее:
- Текст должен быть оформлен в нижнем регистре, т.к. большой регистр вызывает раздражение;
- Выравнивание шрифта должно быть по левому краю, поскольку к этому все привыкли;
- Контент должен быть по ширине не очень сильно растянут, поскольку пользователи ленивые и если придется глазам бегать от левого до правого края монитора это будет вызывать дискомфорт и потерю мысли;
- Шрифт должен быть обычным, т.е. не курсивным, не жирным, не подчеркнутым (поберегите эти элементы для выделения главных мыслей в тексте);
Напоследок хочу ещё раз сказать о том, что выбор шрифта и его оформление является таким же важным элементом, как и выбор дизайна для сайта. Не совершайте типичных ошибок вебмастеров, которые решили выделиться и из-за этого они теряют большое количество пользователей ради которых и создаются сайты.
Читайте также:
• Стили .css в html
• Google fonts
• Как сделать выпадающие меню на CSS
• Как сделать favicon для сайта
• Как добавить счетчик на сайт
• Как сделать всплывающую подсказку для ссылок
• Как увеличивать картинки на сайте
• Как добавить социальные кнопки на сайт
• Курсивный текст в html
• Подчеркнутый текст html
• Жирный шрифт html