Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Разное

Многообразие шрифтов для сайтов: безопасные и дизайнерские шрифты, а также альтернатива от Google

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

Поэтому сегодня я постараюсь ответить на все ваши возможные вопросы, касающиеся данной тематики, и расскажу, какие существуют стандартные шрифты и какие из них являются часто используемыми, что такое безопасные шрифты, как влияют на посещаемость сайта стилевые характеристики начертаний символов и какие инструменты предлагают 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. И самое главное! Данные начертания будут одинаково отображаться в любом браузере и на любом компьютере.

На этом статья подошла к концу. Делитесь ссылкой на нее с друзьями и подписывайтесь на обновления блога. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 6 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: