Шрифт важная составляющая сайта

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

Из каких критериев состоит выбор шрифта для сайта? Ниже я перечислил основные критерии и рекомендации по каждому из них.

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. Выбор цвета шрифта и фона под него

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

Очень популярным также является сочетание: черный фон и белый текст, но такое сочетании подойдет далеко не для каждого сайта. Все же большинство сайтов имеют светлые дизайны. Я нашел специальный список сочетаний цвета шрифта и фона (в порядке убывания читаемости):
1. Синий на белом;
2. Черный на желтом;
3. Зеленый на белом;
4. Черный на белом;
5. Зеленый на красном;
6. Красных на желтом;
7. Красный на белом;
8. Оранжевый на черном;
9. Черный на пурпурном;
10. Оранжевый на белом;
11. Красный на зеленом.

Чем выше в списке сочетание цвет/фон, тем лучше его читаемость. Советую посмотреть: как сделать фон для сайта, а также коды и названия html цветов.

4. Другие мелочи

К этим мелочам я бы хотел отнести следующее:
- Текст должен быть оформлен в нижнем регистре, т.к. большой регистр вызывает раздражение;
- Выравнивание шрифта должно быть по левому краю, поскольку к этому все привыкли;
- Контент должен быть по ширине не очень сильно растянут, поскольку пользователи ленивые и если придется глазам бегать от левого до правого края монитора это будет вызывать дискомфорт и потерю мысли;
- Шрифт должен быть обычным, т.е. не курсивным, не жирным, не подчеркнутым (поберегите эти элементы для выделения главных мыслей в тексте).

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