Типографика в веб-дизайне

Правила и принципы.
31 августа 2017F51009b955a7535aefbaa6ecf8672b05f163b8c9Владислав Строчков246939

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

Шрифты

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

Не так давно в распоряжении дизайнеров было всего несколько видов шрифтов которые шли в нагрузку к операционной системе. Все остальное имело формат флэша или изображения. Определенные обходные пути в этом вопросе были. Однако они доставляли немало головной боли.

Новая эра в веб-дизайне стартовала с появления правила @font-face. По сути, оно развязало дизайнерам руки, предоставив практически неограниченное поле деятельности. Тем не менее далеко не все шрифты стоит использовать в веб-дизайне. Одни из-за плохой читабельности, вторые по причине тяжеловесности.

Выравнивание

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

Хорошим вариантом для выравнивания является ориентация текста по левому краю. Такой формат уместен в 99% случаев.

Макро и микрографика

Макроуровень отвечает за общую структуру текста в пределах сайта, расположение относительно других элементов дизайна. Его цели глобальны — сделать текст целостным, гармоничным и в то же время «живым».

Микроуровень ответственен за область мельчайших деталей: интервалов, пробелов, отступов и т. д. Он формирует такое понятие как читабельность. Исключите его и текст превратиться в сплошное полотно из букв и знаков препинания.

Для обозначения шрифтов в веб-дизайне лучше использовать относительные значения «em» или %. Это позволяет сделать контент адаптивным, гибким. Пользоваться пикселями рекомендуется в отношении неадаптивных контейнеров, когда в случае изменений размера экрана в движение приходят блоки, в то время как шрифт не изменяется.

Блоки текста

Абзацы и блоки из длинных предложений усложняют восприятие информации. Гораздо удобней, когда строка включает не больше 70-ти символов, но не менее 30-ти. В зависимости от ширины строки текста варьируется межстрочный интервал. Для удобства пользователей он не должен быть меньше пробела между словами.

Начертание

Работая над типографикой, не обойтись без вариаций начертания букв. При умелом использовании эта возможность превращается в мощное акцентное оружие. Так, например, курсив придает тексту некую торжественность, жирное начертание указывает на важность информации, а свойство font-variant: small-caps придает определенной изысканности.

С засечками или без

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

Обратите внимание, что использование рубленого шрифта (Sans Serif) все же оправдано:

  • Когда читатели — дети.
  • При яркой акцентной цветовой палитре.
  • Если текст узкий или слишком маленький.

Новые комментарии