← На главную

Сократи font-family: только generic, без локальных

26.06.2026 21:37 · hackernews

Вечнозелёная проблема веб-типографики: автор статьи жёстко проходится по тому, как разработчики пишут font-family. Первое правило: никогда не считай, что именной шрифт сработает. Веб-безопасных шрифтов не существует — ни один не стоит на всех платформах. Веб-шрифты (@font-face) тоже не панацея: они не загружаются из-за сети, блокировщиков рекламы (uBlock Origin это умеет), режимов экономии трафика или просто желания пользователя запретить сайтам выбирать шрифты. Автор сам с 2020 года сидит на такой настройке и утверждает, что веб стал гораздо лучше. Единственное, на что можно полагаться — родовые семейства (serif, sans-serif, monospace).

Второе правило — хватит перечислять кучу локальных шрифтов. Увидев font-family: Arial, Helvetica, 'Helvetica Neue', Liberation Sans, "Noto Sans", sans-serif, автор советует выкинуть всё до sans-serif. Arial никогда не будет лучше sans-serif, и Roboto — тоже. Браузер сам выберет шрифт не хуже вашего списка. Исключение — одно имя перед generic-семейством для стилистических причин, например, Georgia, serif, если вам нужен именно широкий глиф.

Третье правило — подумайте об использовании только generic-семейства. Веб-шрифты медленные и глючные, а пользователь мог специально настроить себе шрифты. Даже для monospace. Раньше дефолты были ужасными (спасибо Microsoft и Courier New), но сейчас браузеры подтянулись — monospace по умолчанию стал адекватным. Автор отдельно злится на Courier New и призывает выкинуть все Menlo, Monaco, Consolas. А ещё есть баг: если написать просто font-family: monospace, браузер сбросит font-size до ~81.25%. Работает костыль: font-family: monospace, monospace или явное указание размера кто использует Lightning CSS, тем придётся изворачиваться.

Четвёртое и самое резкое — не суйте system-ui и ui-* в контент. Системные шрифты заточены под мелкие элементы интерфейса, а не под чтение текста. На Windows они не тянут языки вроде CJK, пользователи Android иногда ставят откровенно нелепые UI-шрифты, и system-ui просто всё ломает. Автор называет system-ui ошибкой и считает, что его нужно удалить. А ui-serif, ui-sans-serif, ui-monospace и особенно ui-rounded — «совершенно глупая идея», потому что они существуют только на платформах Apple и не должны быть в спецификации. Он бы оставил их с префиксом -apple-, как было раньше. Итог: лучшее, что можно сделать — это font-family: sans-serif (или serif/monospace), один раз и без лишней магии.

Читать оригинал →