Тел.: +7 (902) 268-20-24 / E-mail: info@webtend.ru

Публикации, статьи от веб-студии Webtend

Какой шрифт использовать на сайте?

Как будет читаться информация на странице и захочет ли пользователь ее читать, зависит от правильно выбранного шрифта. От слишком мелкого шрифта посетителям вашего ресурса придется напрягать глаза и сидеть впритык к монитору, от более крупного шрифта рассредотачивается внимание и придется постоянно искать текст.

Многие шрифты уже по умолчанию установлены на наших компьютерах и ноутбуках. Это такие шрифты, как: Arial, Georgia, Comic Sans MS, Times New Roman, Verdana, Tahoma и другие. Но если вы будете устанавливать нестандартный шрифт на сайт, следует помнить, что у посетителей вашего сайта может не оказаться такого шрифта, и страница будет отображаться не так, как вы задумали.

Важно учитывать такие детали шрифта: вес, засечки, кернинг (интервал между буквами), высоту выступов и линии выравнивания. Дизайнер должен обдуманно выбирать шрифт для сайта и знать, какой именно тип шрифта применить под разрабатываемый сайт.

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

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

Из каких критериев состоит выбор шрифта для сайта?

1. Выбор семейства шрифта

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

  • Arial
  • Verdana
  • Times New Roman
  • Georgia
  • Trebuchet MS

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

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

Во-первых, появляется зависимость от других сайтов (в данном случае от Google). Например, Google по каким-то причинам может медленно работать, то в этом случае Ваш сайт также затормозится. За примерами далеко ходить не надо. Я лично подгружал скрипт для работы AJAX (jquery) с сайта Google, но периодически он вообще не грузился и это приводило к некорректной работе всего сайта. Решение проблемы было простым: просто скопировал весь .js файл к себе на хостинг и подгружать его с моего хостинга. Поэтому лучше всего, когда весь сайт грузится с Вашего же хостинга. Однако перенести шрифты к себе на сайт не получится, придется всегда грузить их с сайта Google.

Во-вторых, в таких браузерах, как Opera в глазах пользователя все будет выглядеть следующим образом: он заходит к Вам на сайт, контент уже появился и примерно через полсекунды - хоп и шрифт поменялся. Это произойдет, как только браузер подгрузит его с Google и обработает. На мой взгляд, что для серьезных ресурсов это "мерцание" стилей у текста неуместно. Конечно, такая ситуация не на всех браузерах, но лично мне и одной оперы хватает, чтобы отказаться от идеи использования малопопулярных шрифтов.

Вернемся к семействам шрифтов. Самым лучшим (а точнее даже универсальным) на мой взгляд шрифтом является Verdana. На этом сайте как раз такой шрифт. Он без загогулин, является строгим и читаемым, а именно это и надо пользователю для быстрого получения информации.

2. Выбор размера шрифта

Выбор размера шрифта является сложной задачей, поскольку некоторым нравится более мелкий шрифт, а кому более крупный. Лично я для себя сделал предпочтение размеру 12-14 пикселей. Этот размер является стандартом во многих областях.

3. Выбор цвета шрифта и фона под него

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

Список сочетаний цвета шрифта и фона (в порядке убывания читаемости):

  • Черный на белом;
  • Черный на желтом;
  • Зеленый на белом;
  • Синий на белом;
  • Зеленый на красном;
  • Красных на желтом;
  • Красный на белом;
  • Оранжевый на черном;
  • Черный на пурпурном;
  • Оранжевый на белом;
  • Красный на зеленом;

Чем выше в списке сочетание цвет/фон, тем лучше его читаемость.

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

К этим мелочам я бы хотел отнести следующее:

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

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

Шрифты используемые в веб-дизайне

Arial

Компактный шрифт, имеет преимущество благодаря высоте букв.

Tahoma

Подходит больше для технической тематики, имеет средне-широкие буквы.

Verdana

Хороший вариант использования шрифта для сайта. Будет хорошо и удобно читаться, благодаря ширине букв и между буквенном расстоянии.

Trebuchet MS

Не совсем подходит для чтения, даже при 12 px. приходится напрягать глаза.

Times New Roman

Шрифт имеет хорошую читаемость, используется во всех редакторах. Но при 12 px выглядит мелко.

MS Sans Serif

Системный шрифт Windows, хорошо читается при разных режимах.

Чтобы правильно выбрать нужный шрифт для сайта, можно написать несколькими выбранными шрифтами, чтобы визуально сравнить, какой шрифт лучше смотрится и воспринимается для чтения. Еще можно попробовать изменить расстояние между буквами и размер шрифта.

Так какой все таки шрифт считается самым оптимальным?

Мое личное мнение полностью совпадает с исследованиями ученых:

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

Американские специалисты отмечают: шрифт Verdana 10-13 кегля наиболее комфортен для восприятия с экрана. Преимущества шрифта — отсутствие засечек, увеличенный межстрочный интервал, большая высота строчных букв без выносных элементов и четкие различия между знаками схожего начертания (такими как i/I/L/l/1).

Создатель шрифта Verdana — художник Мэттью Картер (Matthew Carter). Он разработал данный шрифт для компании Microsoft в 1996 году. Целью было создание шрифта, который легко читается с экрана даже при малом размере букв. Сегодня Verdana входит во все версии Windows, Office и Internet Explorer для операционных систем Windows и Macintosh.

Плюс все перечисленные выше шрифты.

 

CMS Joomla

CMS Joomla!

CMS Joomla (джумла) – один из мировых лидеров среди систем для создания сайтов и интернет-магазинов.

Предельно простая, удобная, многофункциональная, полностью русифицированная административная часть.

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

Веб-студия WebTend работает исключительно с системой управления контентом CMS Joomla!

Подробнее