SF UI Display перестаёт отображаться корректно в макетах и на сайтах чаще всего по одной причине: шрифт просто отсутствует в системе пользователя, ведь это проприетарное семейство Apple, которое не входит в стандартную поставку Windows и не свободно распространяется. Если дизайнер сверстал макет в Figma или Sketch с этим шрифтом, а у вас его нет — текст «съедет», заменившись на системный шрифт по умолчанию с другими метриками.
В этой статье разберём, что представляет собой SF UI Display, чем он отличается от родственного SF UI Text, где легально взять файлы шрифта и как подключить его в проектах без нарушения лицензии.
Что такое SF UI Display
SF UI Display — это вариант гротеска San Francisco, который Apple использует как системный шрифт в iOS, macOS, watchOS и tvOS. Семейство San Francisco пришло на смену Helvetica Neue и было оптимизировано специально для экранов: у него увеличенный межбуквенный просвет, открытые формы букв и динамическая подстройка отображения в зависимости от кегля.
Ключевая особенность семейства — разделение на два оптических размера. SF UI Display предназначен для крупных начертаний — заголовков, крупных надписей, плакатной типографики. SF UI Text, напротив, рассчитан на мелкий наборный текст: у него шире пропорции и больше апертуры, чтобы буквы не «слипались» в маленьком кегле. Операционные системы Apple переключаются между этими вариантами автоматически — ручного выбора в интерфейсе системы обычно нет.
Где используется шрифт
Увидеть SF UI Display можно буквально на каждом экране iPhone и Mac: заголовки настроек, названия приложений, надписи на кнопках в крупном кегле. Кроме того, шрифт активно применяется дизайнерами за пределами экосистемы Apple:
- 🎨 макеты интерфейсов под iOS в Figma, Sketch, Adobe XD;
- 🖥️ презентации и лендинги, стилизованные под «яблочную» эстетику;
- 📱 прототипы мобильных приложений, где важна точная ширина строк;
- 🖼️ баннеры и графика для App Store и маркетинговых материалов.
Именно из-за дизайнеров шрифт чаще всего и «приезжает» на Windows-машины: коллега присылает макет, а в нём текст набран SF UI Display, которого в системе нет.
Лицензия: что можно, а что нельзя
⚠️ Внимание: шрифты San Francisco распространяются Apple по ограниченной лицензии — официально их разрешено использовать только для разработки и дизайна продуктов под платформы Apple. Использование в продуктах для других платформ или публичная перепродажа файлов шрифта нарушает условия лицензии.
Файлы шрифта Apple предоставляет зарегистрированным разработчикам через портал Apple Developer в разделе ресурсов для дизайна. Скачивание с сомнительных сайтов «бесплатных шрифтов» — это не только юридический риск, но и вероятность получить переконвертированный файл с битым кернингом или вовсе вредоносным содержимым в архиве.
Как установить SF UI Display на Windows
Если у вас есть легально полученные файлы шрифта (формат .ttf или .otf), установка в Windows занимает пару минут. Действия стандартны для любого шрифта:
☑️ Установка SF UI Display на Windows
После установки откройте нужное приложение заново — многие программы (Photoshop, Word, браузеры) читают список шрифтов только при запуске. Если шрифт не появился, проверьте, не установлен ли он «для всех пользователей»: иногда установка в профиль одного пользователя конфликтует с правами доступа.
Почему шрифт не отображается: типичные причины
Даже после установки SF UI Display может не подхватываться. Вот что стоит проверить:
- 🔤 имя шрифта в файле отличается от имени в макете — например,
SFUIDisplay-BoldпротивSF UI Display; - 📦 установлен только один вес (например, Regular), а в макете используется Semibold;
- 🔄 программа запущена до установки шрифта и не обновила кэш;
- 🧩 в веб-проекте шрифт не подключён через
@font-face, а браузер пользователя его не имеет.
Для веба ситуация особая: даже если у вас шрифт установлен локально, у посетителей сайта его не будет. На устройствах Apple сайт отрисуется в San Francisco автоматически через системное имя -apple-system, без подключения файлов шрифта вообще. Это стандартная практика, и именно так Apple рекомендует работать с системным шрифтом в вебе.
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
Чем заменить SF UI Display
Если лицензионные ограничения мешают использовать оригинал, существуют визуально близкие свободные альтернативы. Полностью идентичной замены нет — метрики и отрисовка букв отличаются, — но для многих задач этого достаточно.
| Шрифт | Лицензия | Сходство с SF |
|---|---|---|
| Inter | SIL Open Font License | Очень высокое, создавался с оглядкой на San Francisco |
| Roboto | Apache License | Среднее, другой характер форм |
| Helvetica Neue | Коммерческая | Высокое по духу, но другие метрики |
| Arial / Segoe UI | Системные | Низкое, подходят как запасной вариант |
На практике Inter — самый частый выбор: он бесплатен, имеет множество начертаний и переменную версию, а в макетах визуально почти неотличим от San Francisco на типичных кеглях интерфейсного текста.
Почему Apple сделала два оптических размера
В мелком кегле тонкие штрихи и узкие просветы букв визуально «слипаются», текст теряет читаемость. SF UI Text компенсирует это более широкими формами и увеличенными внутрибуквенными просветами. SF UI Display, наоборот, имеет более плотный и элегантный рисунок, который хорошо смотрится в заголовках. Порог переключения система определяет автоматически по размеру кегля.
⚠️ Внимание: не переименовывайте файлы шрифтов вручную, чтобы «подогнать» имя под макет. Внутреннее имя шрифта хранится в самом файле, и система читает именно его, а не название файла — переименование результата не даст, а запутать менеджеры шрифтов может.
Проверка корректного отображения
Чтобы убедиться, что шрифт работает как задумано, сравните один и тот же текст в разных начертаниях: у SF UI Display характерная форма строчной «a» двухэтажного типа и специфические цифры с одинаковой шириной. Если вместо них вы видите типичные формы Arial — подмена произошла.
В браузере проверить фактически применённый шрифт можно через инструменты разработчика: выделите текст, откройте панель инспектора и найдите секцию с информацией об отрисованных шрифтах. Там будет указано, какой именно файл или системный шрифт использован для рендеринга.
Частые вопросы
SF UI Display и San Francisco — это одно и то же?
По сути да: San Francisco — название семейства, а SF UI Display и SF UI Text — его оптические варианты для разных размеров текста. В интерфейсах Apple шрифт отображается просто как системный, без явного названия.
Можно ли бесплатно скачать SF UI Display?
Файлы доступны зарегистрированным разработчикам Apple в разделе дизайн-ресурсов, но лицензия ограничивает использование продуктами для платформ Apple. Для свободного коммерческого применения лучше взять Inter — он распространяется без таких ограничений.
Почему в Figma шрифт отображается, а у коллеги — нет?
Figma использует локально установленные шрифты. Если у вас SF UI Display установлен в системе, макет отрисуется корректно, а у коллеги без шрифта текст заменится стандартным. Решение — установить шрифт всем участникам или использовать общедоступную альтернативу.
Нужно ли подключать SF UI Display на сайт через @font-face?
Нет, и по лицензии это проблематично. Правильный подход — указать в CSS -apple-system первым в стеке шрифтов: устройства Apple применят San Francisco сами, остальные получат следующий шрифт из списка.
Чем отличается SF Pro от SF UI Display?
SF Pro — актуальное название семейства, которое Apple использует в своих ресурсах для разработчиков; оно включает те же оптические варианты Text и Display. Название SF UI встречается в более ранних материалах и макетах.