Гротеск: почему шрифт без засечек побеждает на экране
Вы открываете список шрифтов и выбираете наугад. Один кажется скучным, другой слишком мягким, третий вроде ничего. Разницу описать нечем, есть только ощущение. Слово при этом существует, и оно короткое. Шрифты без засечек называются гротесками, и почти всё, что уместно на слайде, живёт внутри этой группы. Переключите шрифт ниже: текст остался прежним, изменилась интонация.
Один слайд, разные гротески
Текст не меняется. Меняется только шрифт.
Набор шрифтов зависит от устройства: если шрифта нет в системе, браузер подставит ближайший, поэтому в конце каждого стека стоит запасной sans-serif. На телефоне часть вариантов может выглядеть одинаково.
Что такое гротеск и чем он отличается от антиквы
У буквы бывают засечки, короткие поперечные штрихи на концах основных линий. Шрифт с засечками называют антиквой, шрифт без них гротеском. Больше в определении ничего нет, и поэтому внутри группы помещаются и подчёркнуто нейтральный Arial, и заметно характерный Trebuchet MS.
Гротески придумали в девятнадцатом веке для вывесок, где буква обязана работать издалека и не разваливаться при грубой печати. Экран поставил ту же задачу заново. Парную группу, шрифты с засечками, мы разбираем в статье про антикву.
Разглядите букву крупно
Выберите знак и шрифт. Под виджетом написано, на что смотреть именно в этой букве.
Латинские знаки взяты специально: в системных шрифтах они есть всегда, а кириллицы в редких шрифтах может не оказаться.
Гротеск переживает плохой экран
Слово убирает вкусовщину: вы выбираете шрифт под задачу, а не по ощущению. Но главное не в словаре. У антиквы засечка и тонкая часть штриха занимают доли миллиметра. Принтер их отпечатает, проектор потеряет: от буквы остаётся рваный контур, и глаз тратит лишнее время на опознание.
Подписи под графиком, легенды, сноски и номера слайдов набирают мелко всегда. Там гротеск и отрабатывает. Отойдите от экрана на десять рядов и посмотрите, что уцелеет.
Отойдите от экрана
Бегунок это ряд в зале. Кегль у обоих образцов одинаковый.
Гротеск
Антиква
Расфокус имитирует дистанцию, а не моделирует зрение точно. Размытие на обеих карточках одинаковое, кегль тоже: разницу даёт только рисунок букв.
Один гротеск на всю презентацию
Шрифт на презентации один. Разницу между заголовком и текстом делает вес, а не второй шрифт.
Два гротеска рядом почти одинаковые, и в этом беда. Читатель не считывает их как контраст, он считывает их как небрежность, будто слайд собрали из двух чужих файлов. Вес работает иначе: заголовок 700, текст 400, разница видна с последнего ряда, а шрифт остаётся один.
На разборах в школе половина слайдов приходит с двумя гротесками, и почти всегда второй появился сам: текст скопировали из письма вместе с его шрифтом. Лечится за десять секунд командой «Заменить шрифты» в PowerPoint.
Соберите иерархию: одним шрифтом или двумя
Назначьте шрифты и двиньте вес заголовка. Вердикт под слайдом обновляется сразу.
У большинства системных гротесков всего два начертания, поэтому бегунок для них работает ступенькой. Шрифт сайта переменный и меняется плавно: на нём разницу веса видно лучше.
Прогоняйте гротеск через строку Il1 O0
Если заглавная I, строчная l и единица в шрифте неразличимы, он не пойдёт туда, где есть коды, даты и артикулы.
В Arial заглавная I и строчная l нарисованы одним и тем же вертикальным штрихом. Единице повезло больше, у неё есть флажок, но в части гротесков нет и его. В заголовке это незаметно, а в таблице с артикулами читатель спотыкается и перечитывает строку. Та же история с нулём и заглавной O: иногда их различает только ширина овала.
Проверка занимает пять секунд. Наберите Il1 O0 крупно и посмотрите, отличаются ли знаки друг от друга.
Наберите свою строку и переключите шрифт
Годится любой реальный артикул, номер договора или дата.
Вердикт считается по реальным очертаниям знаков в том шрифте, который сейчас подставило ваше устройство, а не по названию из кнопки.
Мелкий текст держится на высоте строчных
Шрифт для всей презентации выбирают по самой мелкой строке в ней, а не по заголовку: чем мельче строка, тем выше должны быть строчные буквы.
У шрифта есть высота заглавной буквы и высота строчной. Отношение второй к первой решает, насколько крупным шрифт кажется при одном и том же кегле. У Verdana и Tahoma строчные занимают ровно три четверти от высоты заглавной, их для экрана так и рисовали. У остальных гротесков отношение меньше, и подпись 11 px у них выглядит мельче, хотя кегль вы не трогали.
Отдельный шрифт для подписей завести нельзя, правило 1 никто не отменял. Поэтому решает самая мелкая строка: в заголовке прилично выглядит любой гротеск, а на легенде 11 px низкие строчные превращают текст в серую полосу. Виджет ниже меряет шрифты прямо на вашем устройстве, так что цифры будут ваши, а не книжные.
Уменьшайте кегль и смотрите, кто сдастся первым
Полоска показывает отношение строчной буквы к заглавной, измеренное в вашем браузере.
Замер идёт по буквам x и H. Если браузер подставил другой шрифт, полоска покажет свойства подставленного, и это тоже полезно знать. Где искать шрифты с кириллицей, собрано в разделе «Шрифты» базы ресурсов.
Где гротеск ломается чаще всего
- Два гротеска на одном слайде: второй обычно приезжает вместе с текстом, скопированным из письма
- Мелкая подпись антиквой: на экране она теряет засечки и тонкие штрихи первой
- Растянутый блок: текст тянут за угол, вертикальные штрихи толстеют, горизонтальные остаются прежними
- Сверхтонкое начертание в заголовке: вес 200 хорошо выглядит в макете и пропадает на проекторе
- Шрифт без кириллицы: латиницу он набирает сам, русские буквы подставляет система, и на слайде оказываются два шрифта сразу
Найдите слайд с ошибкой
В каждой тройке один слайд нарушает правило. Нажмите на него.
Почините титульный слайд
Перед вами титул, собранный второпях: заголовок одним гротеском, текст другим, подпись 9 px, а блок заголовка растянут по ширине, чтобы строка дотянулась до края. Верните все четыре индикатора в зелёное.
Готово. Один гротеск, иерархия весом, подпись читается, буквы не деформированы.
Пороги здесь те же, что в правилах: подпись от 14 px и вес заголовка от 700. Ниже 14 px мелкий текст на слайде перестают читать с середины зала.
Три правила гротеска
Гротеск отвечает за то, чтобы буквы дожили до зрителя в узнаваемом виде. За то, чтобы текст на слайде вообще заметили, отвечает контрастность текста и фона, а за порядок чтения закон близости. Выбранной гарнитуре остаётся задать размер и просветы, и об этом статья про кегль, интерлиньяж и трекинг.
Один шрифт
Гротеск на презентацию один. Иерархию делает вес: 700 против 400.
Строка Il1 O0
Знаки неразличимы, значит шрифт не для цифр, кодов и дат.
Высокие строчные
Шрифт выбирают по самой мелкой строке. На 11 px высота строчных решает всё.
Чек-лист самопроверки слайда
Отметьте то, что выполнено на вашем слайде.
Одно правило в неделю
Подпишитесь на рассылку: каждую неделю присылаем разбор одного правила дизайна и материалы, которые можно применить сразу.
Те же разборы выходят в телеграм-канале школы. Другие термины разобраны в Учебнике.