Я много раз видела одну и ту же сцену на защите макета. Заказчик открывает страницу, молчит пару секунд и говорит: «Как-то несолидно». Начинаем разбирать — цвета нормальные, фотографии свои, сетка ровная. А несолидно всё равно. В девяти случаях из десяти виноват шрифт: слишком мелкий, слишком тесный, слишком нарядный или просто не тот. Типографика — единственный элемент дизайна, с которым человек взаимодействует буквально всё время, пока читает. И именно она молча сообщает, серьёзная перед ним контора или страничка на коленке.
Первое впечатление длится 50 миллисекунд
Есть классическое исследование Гитты Линдгаард и коллег (Behaviour & Information Technology, 2006) с говорящим названием: «Внимание, веб-дизайнеры: у вас есть 50 миллисекунд, чтобы произвести хорошее первое впечатление». Людям показывали главные страницы сайтов на 50 и на 500 миллисекунд — оценки визуальной привлекательности совпадали. То есть решение «нравится / не нравится» принимается раньше, чем человек успевает прочитать хоть слово.
За эти 50 миллисекунд глаз считывает не смысл текста, а его фактуру: плотность, ритм, контраст, форму букв. Дальше срабатывает эффект ореола — первое впечатление красит собой всё остальное, включая оценку надёжности и удобства. Поэтому шрифт работает как рукопожатие: содержание вы оцените потом, а вывод о человеке сделаете сразу.
Шрифт — это голос текста. Можно написать безупречный текст и прочитать его так, что никто не поверит ни единому слову.
У гарнитур есть довольно устойчивые ассоциации. Антиквы (шрифты с засечками) читаются как традиция, основательность, авторитет — недаром их так любят банки, юристы и издания с историей. Гротески (без засечек) звучат современно и ясно, поэтому живут в интерфейсах и продуктовых сайтах. Рукописные добавляют человечности и неформальности, акцидентные кричат и театральничают. Ошибка не в том, чтобы выбрать «не тот» тип, а в том, чтобы выбрать его случайно.
Шесть цифр, на которых держится читаемость
Прежде чем спорить о характере шрифта, стоит закрыть базу. Ниже — параметры, которые я проверяю в любом макете первыми, ещё до разговора о вкусе.
Размер и воздух
Основной текст — от 16 пикселей. Это не эстетическая прихоть, а порог, ниже которого чтение становится работой: людям с неидеальным зрением приходится щуриться или зумить, а с телефона так читает почти каждый второй. Межстрочный интервал внутри абзаца — примерно полтора кегля. Между абзацами интервал должен быть заметно больше строчного, иначе текст превращается в серую плиту, в которой глаз теряет место возврата. Но и перебор вреден: слишком воздушный текст рассыпается на несвязанные строки и заставляет бесконечно скроллить.
Длина строки
Роберт Брингхёрст в «Основах стиля в типографике» называет комфортным коридором 45–75 знаков в строке, а чаще всего цитируют цифру 66. Логика простая: слишком длинная строка мешает глазу найти начало следующей, слишком короткая рвёт фразу на куски. На мобильном коридор сужается до 30–40 знаков — просто потому, что там физически меньше места. Практический вывод: у текстового блока должна быть максимальная ширина. Текст, растянутый на всю ширину широкого монитора, не читают.
Контраст
Минимум по WCAG — 4.5:1 для основного текста и 3:1 для крупного (от 18 pt или полужирного от 14 pt). Светло-серый по белому выглядит на макете стильно, а на реальном экране в солнечный день — как выключенный. Проверяйте контраст инструментом, а не глазом, и обязательно с учётом прозрачности: полупрозрачный серый поверх фото почти всегда проваливается.
Ошибки, которые я вижу чаще всего
Первая — четыре гарнитуры на одном экране. Обычно это следы истории: заголовки от прошлого подрядчика, кнопки из шаблона, текст из вордовского файла. Смотрится как записка, собранная из вырезанных букв.
Вторая — декоративный шрифт в основном тексте. Он был выбран для логотипа, потом «раз уж он фирменный», и вот уже абзац из акцидентной гарнитуры, где не отличить «i» от «l» и «rn» от «m».
Третья — игнорирование межбуквенных расстояний в крупном наборе. Заголовок в 60 пикселей с дефолтным трекингом почти всегда выглядит рыхло; крупный набор нужно слегка сжимать, мелкий — наоборот, отпускать.
Четвёртая — узкие и конденсированные шрифты в заголовках ради экономии места. Экономия мнимая: узкое начертание читается заметно медленнее обычного.
Пятая — погоня за «идеальным шрифтом» вместо шрифта, который соответствует бренду. Идеального нет, есть уместный.
Как собрать пару шрифтов
Правило первое и почти единственное: не больше двух гарнитур. Всё разнообразие берётся начертаниями — light, regular, medium, bold, курсив. У приличного семейства их от четырёх до десяти с лишним, этого хватит на любую иерархию.
Правило второе: пара строится на разнице, а не на сходстве. Антиква в заголовках плюс гротеск в тексте — рабочая классика, и наоборот тоже работает. А вот два похожих гротеска рядом выглядят не как приём, а как недосмотр: читатель чувствует несостыковку, но не понимает, в чём она. Если два шрифта слишком похожи — берите один.
Правило третье: у пары должно быть что-то общее в скелете — близкая высота строчных, схожая ширина знаков, одинаковое настроение. Контраст в характере, единство в пропорциях.
И проверка, которую я советую всем: наберите парой не «Съешь ещё этих мягких булок», а реальный текст своего сайта — заголовок, подзаголовок, абзац, подпись под фото, кнопку. Половина красивых пар разваливается именно на мелочах вроде цены со скидкой или дисклеймера в подвале.
Хорошая типографика незаметна: её не хвалят, на неё не жалуются, её просто читают. Плохую тоже не осознают — но закрывают вкладку и уходят к тем, кто выглядит серьёзнее. Откройте свой сайт с телефона, посмотрите на него ровно секунду и честно ответьте: этому тексту хочется верить?
Пока нет комментариев