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

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

Вот несколько моментов, о которых важно помнить, когда имеете дело с типографикой в адаптивном дизайне!

Начните с базовых параметров

Типографика — это визуальное оформление текста, которое помогает ему быть привлекательнее, более читабельным и вписываться в контекст.

Выбирайте шрифты, которые подходят вашей теме и подчеркивают ее. К примеру, если вы создаете сайта детской тематики, используйте для заголовков шрифты типа Enchanted Land или DK Crayon Crumble, которые найдут отклик у вашей целевой аудитории. Используйте команду  @import и стандартные теги ссылок, чтобы веб-шрифт отображался во всех современных браузерах.

К примеру, код может выглядеть так:

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

 или так:

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

Каждый разработчик имеет дело с единицами измерения (px, em, rem) во время работы над CSS/SCSS кодом. Пиксели — единицы фиксированного значения, а em задают размер относительно родительского HTML-элемента.

Использование единиц rem позволит вам менять размер текста, когда меняется размер окна, в котором просматривается страница. Эти единицы поддерживают все современные браузеры. Их можно использовать, например как в этом коде:

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

Используйте команду @media чтобы определить различные размеры. Указывайте больший размер текста для экранов меньшего размера.

@media (max-width: 640px) {
h1 {
font-size:1.7rem
}
h2{
font-size: 1.6rem

Также очень важно настраивать длину линии, чтобы текст выглядел разборчиво и профессионально. Работайте в диапазоне 45-90 символов (включая пробелы).

Сделайте текст легко читабельным

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

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

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

Используйте правило @font-face чтобы задать семейство шрифтов, и подстраховаться, прописав замену, на случай если браузер не сможет отобразить первый вариант.

@font-face {
font-family: ‘open_sans’;
src: url(‘opensans-bold-webfont.eot’);
src: url(‘opensans-bold-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘opensans-bold-webfont.woff’) format(‘woff’),
url(‘opensans-bold-webfont.ttf’) format(‘truetype’),
url(‘opensans-bold-webfont.svg#OpenSans’) format(‘svg’);
font-weight: bold;
font-style: normal;
}

Уделяйте внимание цвету шрифта, чтобы контраст между текстом и фоном был достаточным. Используйте руководство по обеспечению доступности Web-контента, чтобы подобрать наилучшее значение для контраста. Чтобы подобрать лучшее сочетание читабельных элементов, используйте калькулятор modular scale.

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

Учитывайте вертикальный ритм

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

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

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

Вместо сетки строк используйте значения для межстрочных интервалов, чтобы настроить вертикальный ритм. К примеру, если интерлиньяж для основного текста на сайте — 25px, указывайте кратное ему значение для расстояния между элементами и интерлиньяж прочих текстовых элементов. Вот пример такого кода:

h1 {
line-height: 50px;
margin: 25px 0;
}
p {
line-height: 25px;
margin: 25px 0;
}

Чтобы увеличивать вертикальный ритм адаптивно, в зависимости от устройства, используйте команду @media, чтобы подгружать стили, начиная с определенного размера экрана.

К примеру, в коде ниже этой границей являются 750px:

@media screen and (min-width : 750px)

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

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

Автор статьи - SPYRE STUDIOS

Перевод — Дежурка

Смотрите также:

• 10 советов для правильного текста на сайте
• Как межбуквенное расстояние поможет читабельности прописного текста
• 10 тенденций в графическом дизайне на 2018 год