Comic Sans, Helvetica, Times: истории шрифтов и правила для сайта

4 июля 2012 года в ЦЕРНе объявили об открытии частицы, похожей на бозон Хиггса, — одно из главных научных событий десятилетия. Фабиола Джанотти, руководитель эксперимента ATLAS, показывала результаты на слайдах, набранных шрифтом Comic Sans. Споры о шрифте в соцсетях, как писали тогда журналисты, едва не затмили саму частицу.

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

Comic Sans нарисовали, потому что мультяшный пес говорил шрифтом газеты

В 1994 году Винсент Коннэр, дизайнер шрифтов в Microsoft, увидел тестовую версию программы Microsoft Bob. В ней пользователей вёл по компьютеру мультяшный пёс Ровер, и его реплики в облачках были набраны Times New Roman — газетным шрифтом. Коннэру это показалось слишком серьёзным для собаки.

Он взял комиксы, которые лежали у него в офисе, — «Возвращение Тёмного рыцаря» и «Хранители» — и начал рисовать буквы по мотивам их надписей. Рисовал мышкой, по одной букве. В Bob шрифт не успел: сроки программы уже прошли. Сначала его взяли в 3D Movie Maker, потом в пакет расширений Plus для Windows 95, а оттуда — в саму Windows 95, которую ставили на новые компьютеры, в Publisher и Internet Explorer.

Сам Bob вышел в марте 1995 года, продался тиражом около 58 000 копий и был закрыт в начале 1996-го. Шрифт для него пережил программу на тридцать лет.

У популярности появились противники. В 1999 году дизайнеры из Индианаполиса Дейв и Холли Комбс запустили кампанию Ban Comic Sans — после того как одного из них заставили оформить им экспозицию в детском музее. Их довод был простой: шрифт должен совпадать с тоном текста. В 2019 году Дейв Комбс признал, что ненависть к шрифту «вышла из-под контроля», и кампания закончилась.

С чтением история интереснее. Британская ассоциация дислексии в своём руководстве по оформлению текстов советует шрифты без засечек — «такие как Arial и Comic Sans», потому что буквы в них выглядят менее тесными. У Comic Sans мало зеркальных пар вроде b/d и p/q, а у заглавной I есть засечки, чтобы её не путали со строчной l. А в исследовании Лус Рельо и Рикардо Баэса-Йейтса 2013 года 48 человек с дислексией читали тексты двенадцатью шрифтами под камерой, следящей за взглядом. Специальный шрифт OpenDyslexic чтение не облегчил. Лучше работали обычные прямые шрифты — без засечек и моноширинные, вроде Helvetica, Arial и Courier. Хуже всего читался курсив.

Претензия к Comic Sans касается тона: детский почерк плохо смотрится в официальном письме и на научном слайде. С формой букв у него всё в порядке. Поэтому шрифт для сайта подбирают под голос компании и под удобство чтения, а мода среди дизайнеров тут дело второе.

Helvetica сначала называлась «Новый гротеск Haas»

В 1956–1957 годах Эдуард Хоффман, директор словолитни Haas в Мюнхенштайне под Базелем, поручил Максу Мидингеру нарисовать новый гротеск. За основу взяли Akzidenz-Grotesk 1890-х. Шрифт показали в 1957 году под названием Neue Haas Grotesk. В 1959 году его адаптировали для наборных машин Linotype и по предложению Хоффмана переименовали в Helvetica — по-латыни «швейцарская».

Дальше шрифт разошёлся по миру: фирменный стиль Lufthansa в 1962 году, логотип American Airlines, который Массимо Виньелли набрал Helvetica в 1967-м и который продержался до 2013 года. В 1989 году нью-йоркское метро сделало Helvetica стандартным шрифтом указателей. Apple в 2007 году сделала её системным шрифтом iOS и только в 2015-м заменила собственным San Francisco. В 2007 году, к пятидесятилетию шрифта, Гэри Хаствит снял о нём документальный фильм «Helvetica».

Нейтральный гротеск надёжен для интерфейса, кнопок и навигации. Обратная сторона нейтральности: сайт, набранный только им, легко спутать с сотней других.

Arial: шрифт, который притворяется Helvetica

В 1982 году в компании Monotype команда под руководством Робина Николаса и Патриции Сондерс нарисовала шрифт для принтеров IBM. Ширина каждого знака совпадала с Helvetica — документ можно было переключить с одного шрифта на другой, и ни одна строка не съезжала. Так появился Arial. В 1992 году Microsoft включила его в Windows 3.1 как один из четырёх основных шрифтов TrueType и назвала альтернативой Helvetica.

Сам Николас позже описывал задумку скромно:

«Его задумывали как универсальный гротеск — почти пресный».

Пропорции у Arial от Helvetica, а детали — свои. По ним шрифты и различают.

Ещё одна проверка — набрать «Il1». В Arial заглавная I и строчная l выглядят практически одинаково, как и в Helvetica. В тексте статьи это не мешает, а в промокоде, логине или номере заказа человек ошибётся. Для таких мест берут шрифт, где три знака различаются с первого взгляда.

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

Times New Roman заказала газета, которая потом от нее отказалась

В начале 1930-х лондонская газета The Times попросила Стэнли Морисона, консультанта компании Monotype, дать советы по обновлению оформления. Морисон предложил заменить тонкий шрифт XIX века на более плотный и вместе с Виктором Лардентом, художником из рекламного отдела газеты, сделал новый на основе старого шрифта Plantin — с более контрастными штрихами. 3 октября 1932 года The Times вышла, набранная Times New Roman.

Сама газета ушла от него первой: в 1972 году она перешла на Times Europa, рассчитанный на более быстрые машины и дешёвую бумагу. А весь остальной мир получил Times New Roman вместе с Windows: шрифт входит в систему со времён Windows 3.1.

История продолжается и сейчас. Государственный департамент США почти двадцать лет готовил документы в Times New Roman. С 6 февраля 2023 года он перешёл на Calibri 14-го кегля — шрифт без засечек выбрали, чтобы документы было легче читать людям со слабым зрением и дислексией. В декабре 2025 года новое руководство ведомства вернуло Times New Roman, тоже 14-го кегля.

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

Georgia назвали в честь заголовка желтой газеты

В 1990-х Microsoft заказала Мэтью Картеру два шрифта для чтения с экрана — Verdana и Georgia. Картер начал с непривычного конца: сначала нарисовал буквы пикселями, как они будут выглядеть на мониторе мелким кеглем. Уже по ним строили гладкие контуры, а Том Рикнер из Monotype вручную прописывал инструкции хинтинга, чтобы контуры превращались ровно в те же пиксели.

Georgia нарисовали в 1993 году и выпустили в 1996-м.

У Verdana высокие строчные буквы, широкие пропорции и свободные промежутки между знаками. Всё это нужно, чтобы буквы не слипались на экранах с низким разрешением. Обе гарнитуры Microsoft раздавала бесплатно в наборе Core fonts for the Web до 2002 года.

Для основного текста на сайте ищите те же черты: крупные строчные буквы и открытые формы. Такие шрифты лучше держатся на мелком кегле и на дешёвых экранах.

Петр I правил азбуку собственной рукой

До Петра все русские книги печатали церковнославянским полууставом — с титлами, знаками ударения и буквами вместо цифр. Для светских книг Пётр задумал новый шрифт. Литеры заказали в Амстердаме, в типографии Ильи Копиевича, и одновременно на Московском печатном дворе. Первая книга гражданским шрифтом — «Геометриа славенски землемерие» — вышла в марте 1708 года.

Азбуку правили ещё два года. Убрали надстрочные знаки и часть дублирующих букв, узаконили букву «Э», а вместо буквенной записи чисел ввели арабские цифры. 29 января 1710 года (9 февраля по новому стилю) Пётр утвердил новый алфавит и написал на азбуке: «Сими литеры печатать исторические и манифактурныя книги».

Для сайта эта история важнее, чем кажется: кириллица до сих пор есть не у каждого шрифта. В октябре 2026 года на Google Fonts из 1950 семейств фильтр по русскому языку («Filters» → «Language» → Russian) оставлял 286. Если в шрифте нет нужной буквы, браузер возьмёт её из другого шрифта, и слово будет выглядеть заплатанным.

Papyrus: шесть месяцев, 750 долларов и «Аватар»

В 1982 году 23-летний Крис Костелло, только что окончивший колледж, полгода рисовал алфавит каллиграфическим пером на фактурной бумаге. Он хотел показать, как могли бы выглядеть английские буквы на папирусе две тысячи лет назад. В 1983 году шрифт выпустила компания Letraset, а Костелло продал права за 750 долларов.

Дальше Papyrus появился на вывесках, меню и упаковках, а в 2009 году — в «Аватаре» Джеймса Кэмерона: им набраны субтитры, а логотип фильма сделан на основе изменённого Papyrus. В 2017 году шоу Saturday Night Live посвятило этому скетч «Papyrus» с Райаном Гослингом — о человеке, который никак не может забыть, каким шрифтом набран логотип «Аватара». Сам Костелло говорил, что не задумывал шрифт «для всего» и что им слишком злоупотребляют.

Шрифт с ярким характером работает как специя: в логотипе или одном крупном заголовке он уместен, в абзаце текста утомляет.

Правила читаемого текста на сайте

Почти всё ниже можно проверить на своём сайте без дизайнера: нужны браузер Chrome и клавиша F12.

Размер: 16 пикселей — нижняя граница

Браузеры по умолчанию показывают текст размером 16 пикселей. Для основного текста берут 16–18 пикселей. Меньше — только для подписей, но не для абзацев.

Интервал: полтора кегля

Для абзацев — 1,4–1,6 от размера шрифта. Стандарт доступности WCAG на уровне AAA называет ориентир — полтора интервала, а на уровне AA требует, чтобы текст не ломался, если пользователь сам поставит такой интервал. Заголовкам нужен интервал плотнее, около 1,1.

Строка: 66 знаков

Роберт Брингхерст в книге «The Elements of Typographic Style» (первое издание вышло в 1992 году) называет удобной длину от 45 до 75 знаков, а идеальной — 66, с пробелами. Для текста в несколько колонок — 40–50. На сайте длину ограничивают максимальной шириной блока, удобнее всего в единицах ch. Проверить свою строку просто: скопируйте одну строку абзаца с сайта в Word и откройте «Рецензирование» → «Статистика» — там будет число знаков с пробелами.

Шрифтов: два-три

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

Выравнивание и начертания

Абзацы выравнивают по левому краю. При выравнивании по ширине браузер растягивает пробелы, и в строках появляются дыры — переносов, как в книге, на сайте обычно нет. WCAG на уровне AAA прямо просит не выравнивать текст по обоим краям.

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

Контраст: 4,5: 1 и расчет вместо глаза

WCAG уровня AA требует для обычного текста контраст не меньше 4,5: 1, для крупного (от 24 пикселей или от 18,66 пикселя жирным) — 3: 1.

Лицензия и где хранить файлы

Шрифты Google Fonts можно бесплатно использовать на коммерческих сайтах. Большинство из них распространяется по лицензии SIL Open Font License: она запрещает продавать файл шрифта сам по себе и выпускать изменённую версию под тем же названием. У платных шрифтов лицензию для сайта покупают отдельно, условия у каждой словолитни свои.

Файлы шрифтов лучше держать на своём сервере. Так сайт не зависит от стороннего сервиса, а адреса посетителей никуда не уходят. В 2022 году суд Мюнхена обязал владельца сайта выплатить посетителю 100 евро: шрифты грузились с серверов Google, и его IP-адрес передавался туда без согласия.

Скорость: WOFF2 и font-display

Формат WOFF2 стал рекомендацией W3C в 2018 году и в среднем на 30% легче предыдущего WOFF. Из шрифта можно вырезать лишние алфавиты и оставить латиницу и кириллицу. Строка font-display: swap показывает текст сразу системным шрифтом и подменяет его, когда загрузится нужный, — посетитель не смотрит на пустую страницу. Переменный шрифт кладёт весь диапазон насыщенности — от тонкого до жирного — в один файл.

«Елочки», тире и неразрывные пробелы

В русском тексте основные кавычки — «ёлочки», внутренние — «лапки». Тире отбивают пробелами. Неразрывный пробел ставят после коротких слов («в», «с», «и») и между числом и единицей («10 000 ₽», «2018 год»), чтобы они не разрывались на конце строки.

Как это устроено на сайте Vantegra

На нашем сайте три шрифта, у каждого своя роль.

Основной текст набран Manrope размером 17 пикселей с интервалом 1,6, а ширина абзаца ограничена 68 знаками. Все три шрифта распространяются по лицензии OFL, лежат на нашем сервере в WOFF2 и вместе весят меньше 130 КБ. Контраст основного текста с фоном — 16,9: 1, у серых подписей — 5,4: 1.

Одна деталь, которую мы заметили при наборе: у Tenor Sans точки над заглавной Ё почти касаются буквы и на мелком кегле сливаются с ней. Поэтому в заголовках мы пишем «Е», а в основном тексте «ё» остаётся. Кавычки, тире и неразрывные пробелы расставляет типограф — библиотека Typograf Дениса Селезнёва — при каждой сборке сайта.

Шпаргалка: читаемый текст за десять минут

Шрифт как часть сайта

Шрифт выбирают в начале работы над дизайном, вместе с сеткой и цветами. Когда мы делаем сайты, подбираем шрифты с полной кириллицей, считаем размер и длину строки для телефонов и больших экранов, подключаем файлы со своего сервера и типограф. Лендинг — от 60 000 ₽ и от 2 недель, корпоративный сайт — от 150 000 ₽ и от 6 недель.

Если хочется разобраться, во что ещё верят при работе над сайтами, — прочитайте «Десять мифов о сайтах, в которые верят даже маркетологи».