Категории: CSSУроки программирования

Основы отзывчивой (responsive) типографии в веб-дизайне

Адаптивный или отзывчивый веб-дизайн – это не только столбцы, сетки, картинки и иконки. Все это не будет иметь смысла без текстового контента. Как однажды сказал Билл Гейтс: «Контент – это король». Поэтому, адаптивная типография – это тот важный фактор, который не должен упускать из виду каждый веб-дизайнер и веб-разработчик.

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

Основы типографии

Хорошая типография – это правильный выбор шрифта. Правильное сочетание шрифта, цвета текста, размера шрифта гарантирует, что контент будет выглядеть в самом высоком качестве.

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

Тип шрифта (гарнитура, typeface)

Также известен, как семейство шрифтов (font family). Это коллекция дизайна символов, в котором собран полный набор букв, цифр, символов, специальных символов, а также их вес («жирность», weight).

Пример в CSS: font-family: "Open Sans", Arial, sans-serif;

Шрифт

Это фактический компьютерный файл, который содержит информацию об используемых символах, такую как шрифт, вес, ширина, стиль и т.д. Такие файлы имеют расширение .eot, .woff, .ttf.

Базисная линия (baseline)

Это нижняя горизонтальная линия, по которой проходят самые высокие буквы.

Отслеживание (tracking)

Также известен как межбуквенный интервал (letter spacing). Это последовательное увеличение или уменьшение расстояния между буквами.

Кернинг

Процесс корректировки пространства между отдельными символами в глифах различной ширины.

Направляющая (leading)

Также известна как высота строки (line height) в CSS. Это межстрочный интервал (интерлиньяж) текста, подсчет которого ведется от базовой линии шрифта.

На что следует обратить внимание в веб-типографии

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

Тип (type)
Цвет (color)
Текстура (texture)
Образ (image)

Все это оказывает большое влияние на конечный результат и влияет на выразительность вашего месседжа.

Существует четыре фактора, которые могут помочь вам создать презентабельную веб-типографику.

Выбирайте шрифт, который соответствует вашей теме

Большинство сайтов в настоящее время используют одни и те же шрифты. Даже сегодня очень популярны Arial и Helvetica. Тем не менее, было бы больше смысла, если бы вы могли согласовать шрифты с вашим сообщением.

Например, если на вашем сайте размещен контент для детей, тогда было бы уместно использовать шрифты вроде DK Crayon Crumble или Little Miss Priss в заголовках.

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

Используйте веб-шрифты

Практически все современные браузеры поддерживают веб-шрифты, которые подключены с помощью команды @import или стандартного тега ссылки (<link>).

Пример использования тега @import:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Пример тега ссылки:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Это означает, что вы можете использовать любой шрифт, доступный на сайте шрифтов, например, на Google Font и Typekit.

Преимущества использования веб-шрифтов:

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

Используйте правильные сочетания цветов

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

Если вы используете много цветов и в случайном порядке, это сделает ваш текст нечитабельным и принесет боль в глаза посетителю. Но как выбрать правильные цветовые комбинации? Хотя нет общего правила, есть некоторые рекомендации.

Используйте правильные контрасты для различия между текстом и фоном. Текст и фон не должны сливаться.
Используйте плоские UI цвета, если это возможно. Эти цвета светлые и имеют отличные комбинации, которые не причиняют глазу вреда. На сайте flatuicolors.com представлены хорошие пример Flat UI.

Используйте текст вместо картинок

Как все мы знаем, картинки замедляют работу веб-страниц. Если позволяет ситуация, используйте текст, а не картинки.

Основные правила отзывчивой типографии в веб-дизайне

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

1. Используйте rem вместо пикселей

Использование пикселей очень популярно. Но, пиксели – это фиксированная величина. Это означает, что когда вы изменяете размер окна в браузере, трудно определить эффективный размер текста.

Лучшим вариантом является использование rem. Rem, также известный как «root em», всегда равен размеру шрифта корневого HTML-элемента, и что более интересно, так это то, что он поддерживается всеми современными браузерами.

html{
  font-size: 16px;   // 1rem = 16px
}
h1{
  font-size: 1.9rem // 19px
}
h2{
  font-size: 1.8rem // 18px
}

В данном примере мы определили базовый размер шрифта в 16 пикселей, который является ссылкой на размер шрифта других элементов. Размеры h1 и h2 будут меняться при изменении размера области просмотра.

Для более старых версий Internet Explorer мы можем сначала указать размер шрифта в пикселях, а затем в rem единицах.

html{
  font-size: 16px;   // 1rem = 16px
}
h1{
  font-size: 19px; font-size: 1.9rem;
}
h2{
  font-size: 18px; font-size: 1.8rem;
}

2. Экспериментируйте со значением rem для разных размеров

Теперь, когда вы знаете, как использовать rem, вам нужно поэкспериментировать на экранах разных размеров с помощью запросов @media.

@media (max-width: 640px) {
  h1 {font-size:1.7rem;}
  h2{font-size: 1.6rem;}
}
@media (min-width: 480) {
  h1 {font-size:1.9rem;}
  h2{font-size: 1.8rem;}
}

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

3. Контролируйте размер

Самый идеальный показатель для длины строки – это примерно от 45 до 75 символов в строке. Для адаптивного веб-дизайна размер не так просто контролировать, особенно на маленьких устройствах. Если вы не можете контролировать размер, вы не можете контролировать разборчивость вашего текста.

Заключительная мысль

Адаптивный дизайн становится все более и более продвинутым. Картинки, макет и сетки — это важно. Однако мы не должны забывать, что контент или текст – это то, что читают не только люди, но и поисковые системы.

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