Доброго времени суток, дорогие мои подписчики, а также гости блога. Тема текущей статьи очень популярная. Она волнует многих владельцев сервисов и веб-дизайнеров. Это шрифты для сайта и обсуждение их правильного выбора.
Поэтому сегодня я постараюсь ответить на все ваши возможные вопросы, касающиеся данной тематики, и расскажу, какие существуют стандартные шрифты и какие из них являются часто используемыми, что такое безопасные шрифты, как влияют на посещаемость сайта стилевые характеристики начертаний символов и какие инструменты предлагают css и html.
Помимо этого, я поведаю вам о сервисе Google Fonts и перечислю его положительные стороны. Ну что ж, не буду вас больше задерживать. Давайте займемся делом!
Все об особенностях, разнообразии и проблемах
На самом деле существует множество стандартных начертаний текста. О большинстве из них можно узнать, просмотрев список предложенных текстовых стилей в большинстве редакторах (как, например, в Microsoft Word).
Каждый из них среди перечня имеет хотя бы один аналог, что в некотором роде увеличивает спектр действий веб-разработчика, а также позволяет создавать практически идентичное отображение контента на разных персональных компьютерах пользователей при помощи их перечисления следующим образом:
font-family: Arial, Helvetica, sans-serif;
Стоит отметить, что существуют стандартные и привычные нам виды отображения знаков, которые в большинстве случаев удовлетворяют все требования. Однако на сегодняшний день в запасах каждого дизайнера хранятся особые веб-шрифты и декоративные начертания, и даже уникальные виды.
И тут возникает логический вопрос: «А зачем весь этот перечисленный набор нужен, если есть удовлетворяющий практически все условия стандарт?». В вопросе и кроется ответ, ведь ключевое слово «практически».
Основная причина – это однообразность. Все известные нам начертания уже давным-давно приелись. Их можно найти на страницах любого сайта. Именно поэтому специалистами разрабатываются новые декоративные шрифты, которые будут выделять веб-ресурс из кучи похожих.
По этой же причине уникальные шрифты стали выпускаться и использоваться компаниями, как неотъемлемая составляющая бренда. В связи с этим их количество сильно возросло, а значит и выбрать есть из чего. К тому же множество шрифтов выложены в общий доступ в сеть и их можно скачать бесплатно.
Но тут есть и обратная сторона медали. Так как долгое время данная индустрия подгонялась под джорджии-верданы и мониторы 96 DPI, то многие старые операционные системы просто-напросто не умеют работать с декоративными типами. И как следствие на своих экранах вы можете наблюдать странные значки вместо символов или контент, написанный стилем по умолчанию.
И вот подошло время разобрать, что такое безопасные шрифты. Это такие шрифты, которые отображаются на всех экранах и при этом выглядят везде идентично (или практически идентично). К ним относятся:
- Arial;
- Helvetica;
- Comic Sant MS;
- Monaco;
- Georgia;
- Impact;
- Times New Roman;
- Lucida Console;
- Times;
- Verdana и т.д.
Как вы могли заметить, все перечисленные выше начертания уже вам знакомы и являются также стандартными. К тому же они поддерживают русские буквы, а в общем кириллицу, что является большим плюсом.
Решаем проблему «А-а-а, что же выбрать!»
Так как пользователи Интернета получают интересующую их информацию в основном через текстовый контент, а оценивают сайт по внешнему виду (что собственно и влияет на их решение просматривать содержание сервиса дальше или нет) веб-дизайнерам стоит уделить особое внимание шрифту и его стилевым характеристикам.
Именно поэтому необходимо соблюсти несколько важных требований, о которых мы сейчас и поговорим. Они помогут вам определить, какой все-таки шрифт будет лучшим.
Из крайности в крайность
Не стоит злоупотреблять возможностями css и уменьшать или увеличивать символы до непонятных размеров. Стоит понимать, что в первую очередь юзеру должно быть комфортно и легко читать информацию. Если буквы будут слишком маленькими, то посетителю сайта придется прикладывать усилия для разбора написанного.
А это не только увеличивает время получения информации, а еще и негативно сказывается на зрении. В некоторых случаях после 3-7 минут просмотра такого текста пользователи жалуются на боль в глазах и покидают веб-ресурс. Уверен, вам такой расклад событий не подходит.
Рассмотрим другой вариант: большие символы. Если вы переборщите с размером букв, то прочтение текстового контента юзером также замедлится, так как пробелы между символами и словами увеличатся пропорционально. К тому же общее восприятие информации усложнится.
Поэтому стоит придерживаться первого правила: размер основного шрифта должен быть не меньше 10 пикселей и не больше 16 пикселей.
Намешаем кучу красок
Текст с выделенными заголовками, ключевыми словами и хорошо различимыми абзацами намного легче воспринимается читателями, а значит и становится фаворитом. Однако тут также стоит знать меру. Может общий вид и будет красивым, если вы выделите разными цветами абзацы и заголовки, подсветите ключевые слова и добавите теней к ссылкам (ну или что-то в таком духе).
Однако это может оказаться совершенно нечитабельным и будет вызывать один лишь дискомфорт. О результатах просмотра такого ресурса вы сами можете догадаться.
Поэтому стоит придерживаться контрастности при сочетании цветов и при этом не делать одновременно фон и цвет шрифта яркими. В качестве примера я приведу шесть наиболее популярных «рекламных» палитр:
- Желтый и черный;
- Белый и синий;
- Синий и белый;
- Белый и зеленый;
- Белый и красный (обычно выделенный жирным начертанием);
- Белый и черный.
Вспомним о безопасности
Мы уже говорили с вами о безопасных шрифтах. Так вот старайтесь не использовать пользовательские или нестандартные начертания, ведь они запросто могут не отобразиться у юзеров.
Для этого стоит применять выше перечисленные стандартные и возможно видоизменять их при помощи каскадных таблиц стилей. К тому же не злоупотребляйте количеством. Ведь каждый файл со шрифтом будет подгружаться в полной версии к сайту, а все это занимает время.
Оптимальное решение для всех приведенных правил – это выбор 2-4 параметров (размеров букв, цветов в палитре, шрифтов) для одного сервиса.
Что же нам предлагают html и css?
Помимо файлов с установкой особых видов отображения текста существуют и специальные инструменты, встроенные в веб-языки. Все они касаются названия font.
Так, в css существует правило @font- face, которое позволяет задать множество настроек тексту. И есть дополнительные свойства:
font-family, -style, -variant, -weight и -size.
Обо всем этом подробно можно прочитать в других статьях моего блога.
Html же предлагает тег <font>, который позволяет выполнить некий ограниченный функционал редактирования отображения знаков.
О, Google! Приди на помощь!
Известная корпорация Гугл позволяет разработчикам онлайн выбрать подходящие им стили представления текстового контента из Google Fonts и подключить к своим проектам. Найти их можно по ссылке [urlspan]https://fonts.google.com/[/urlspan].
В чем же плюсы такого подхода?
В первую очередь вы сможете выбрать для себя любой лицензионный шрифт, подходящий именно под ваш проект. К тому же система сама генерирует код вставки выбранного элемента. Вам останется только нажать Ctrl+C и Ctrl+V. И самое главное! Данные начертания будут одинаково отображаться в любом браузере и на любом компьютере.
На этом статья подошла к концу. Делитесь ссылкой на нее с друзьями и подписывайтесь на обновления блога. Пока-пока!
С уважением, Роман Чуешов
