Click to order
Cart
ВАШ ЗАКАЗ:
Total: 
Отправляя свои контактные данные, вы соглашаетесь на обработку персональных данных и получение email-сообщений от Высшей школы «Среда обучения». Обратите внимание, что, если ваш счёт открыт в отличной от рубля валюте, то платёж будет конвертирован в рубли. Конвертацию в этом случае проводит либо ваш банк, либо система оплаты.
Получить консультацию
Отправьте свой вопрос или укажите номер телефона и мы вам перезвоним:
Хочу получать полезные материалы от «Среды обучения»
* Отправляя свои контактные данные, вы соглашаетесь на обработку персональных данных и получение email-сообщений от Высшей школы «Среда обучения»
ДИЗАЙН / 31 октября
Типографика в вебе
95% информации в интернете содержится в текстовом виде. Статьи, блоги, социальные сети, сайты и онлайн-магазины уделяют огромное внимание типографике, так как восприятие текста напрямую влияет на решение читателя. И неважно, какими профессиональными навыками обладает ваш главред: если текст выглядит плохо, читать его никто не будет.
Немного терминологии
Типографика
— это искусство моделирования полиграфической продукции. Свод правил оформления текста, основанный на анализе восприятия набора читателем. Знание и применение правил типографики превращает текст в инструмент построения композиции, способный передать идею не только посредством содержания, но и с помощью графического оформления.
Гарнитура
— набор типографических знаков и символов, оформленных в едином стилистическом начертании. Часто представлен в виде «семейства» шрифтов.
Шрифт
— полный набор знаков определенного стиля и размера внутри гарнитуры.

Гарнитуры можно разделить на две основные части:
Антиква — шрифты с засечками
Гротеск — шрифт без засечек
Кегль
— высота буквы от верхней до нижней засечки. Измеряется в типографских пунктах (pt). Текст, набранный 12 кеглем, равен 12 pt.
Интерлиньяж
— межстрочный интервал. Расстояние между базовыми линиями соседних строк.
Кернинг
— межбуквенное расстояние в слове. Без заданного межбуквенного интервала каждый следующий символ в строке располагается вплотную к предыдущему.
Оптимизируем типографику
Оптимизация типографики — это оптимизация читаемости, доступности, удобства использования и общего графического баланса текста. Вот несколько советов, которые помогут с процессом оптимизации.
Минимизируем количество шрифтов. При использовании более трех разных шрифтов сайт теряет структуру и выглядит непрофессионально. Внимание читателя расфокусировано, это мешает сосредоточиться на главном. Старайтесь свести количество шрифтов к минимуму. В большинстве случаев будет достаточно использовать одну гарнитуру. Но если вы решили использовать совершенно разные шрифты — например для оформления заголовка и основного текста, — следите, чтобы они сочетались между собой по размеру и стилю.
Следим за длиной строки. Выбирая ширину текста, следует ориентироваться не на дизайн, а на понятность и четкость написанного. Если строка слишком короткая, читатель будет часто менять фокус, что собьет его с ритма. Если строка, наоборот, чересчур длинная — глазам придется слишком долго фокусироваться на написанном. Оптимальная длина строки текста для сайта — 50−60 символов вместе с пробелами. Допустимо значение в 75 символов. Что касается смартфонов, типографы рекомендуют придерживаться объема 30−40 знаков в одной строке.
Выбираем гарнитуру. При выборе гарнитуры текста стоит помнить, что пользователь может заходить на ваш сайт с разных устройств. Текст должен быть читабельным в любом размере. Убедитесь, что гарнитура легко читается даже на самых маленьких экранах. Старайтесь свести на минимум использование сложных курсивных шрифтов, таких как Vivaldi. Пусть они и красивы, но часто сложночитаемы для большинства пользователей. И обращайте внимание на четкость букв, в особенности если верстаете текст на латинице. В некоторых шрифтах разные буквы могут быть очень похожи. Проще всего проверить четкость шрифта, написав буквы «I» и «L» рядом — например, в слове Illusion. Если слово читается, шрифт можно брать в работу.
Обращаем внимание на интерлиньяж. Доказано, что маленькое расстояние между строками мешает восприятию текста. Не стоит экономить место на странице: по правилам типографики интерлиньяж должен быть примерно на 30% больше, чем высота знака без верхних и нижних выносных элементов. А дополнительное расстояние между абзацами увеличивает понимание прочитанного на 20%. Грамотная работа дизайнера с белым пространством влияет на читабельность и восприятие текста.
Играем на контрастах. Не используйте одну и ту же цветовую гамму для оформления фона и цвета шрифта. Чем лучше виден текст, тем быстрее пользователи прочтут его и поймут написанное. Коэффициент контраста по отношению к фону в небольших текстах должен быть равен пропорции 4,5:1. Большие тексты (от 14 кегля полужирным шрифтом / от 18 кегля стандартным шрифтом) должны иметь коэффициент контраста по отношению к фону минимум 3:1.

После применения всех советов дайте прочитать ваш текст нескольким пользователям, желательно на разных устройствах. Проследите за тем, как быстро они его читают и как четко понимают написанное. Если со стороны «тестировщиков» будут замечания, попробуйте еще раз пройти по всем этапам верстки.
и напоследок
Выбор шрифта — это не типографика. Веб-дизайн заключается не в подборе шрифтов, а в том, как мы их используем. Это огромная разница. Любой может купить шрифты. Немногие могут различать качественные шрифты и плохой их выбор.
Подготовила Полина Весна
Share дополнительных материалов с благодарностью у: topics, habr, uxplanet, quickandlazy, baymard
ВАМ ПОНРАВИЛАСЬ ЭТА СТАТЬЯ?
ПОЛЕЗНЫЕ МАТЕРИАЛЫ
Хотите регулярно получать образовательные материалы «Среды обучения»? Подпишитесь на нашу рассылку! Отправляя свои контактные данные, вы соглашаетесь с Политикой конфиденциальности