SF UI Display Bold — это жирное начертание системного шрифта San Francisco, который Apple использует в iOS, macOS, watchOS и tvOS начиная с 2015 года. Если вы нашли этот файл в макете от дизайнера, увидели его название в Figma или ищете, где скачать начертание для верстки интерфейса, важно сразу понять два момента: шрифт распространяется только через официальный портал Apple Developer, а его лицензия ограничивает применение макетами приложений для платформ Apple.
Ниже разберем, чем SF UI Display отличается от SF UI Text, как легально получить файл, установить его на Windows и macOS и какие бесплатные альтернативы подойдут, если лицензия Apple не покрывает вашу задачу.
Что такое SF UI Display Bold и откуда он взялся
Шрифт San Francisco был представлен Apple в 2015 году и впервые появился на Apple Watch, а затем заменил Helvetica Neue в качестве системного шрифта на всех платформах компании. Семейство изначально разрабатывалось с прицелом на читаемость на небольших экранах: у него увеличенный межбуквенный просвет на мелких кеглях и крупные внутрибуквенные просветы.
Начертание Bold — это жирный вариант с насыщенным весом, применяемый для заголовков, кнопок и акцентных элементов интерфейса. В дизайн-макетах его часто указывают под именами SF UI Display Bold, SFUIDisplay-Bold или SF Pro Display Bold — речь почти всегда идет об одном и том же шрифте, просто название менялось по мере обновления семейства.
- 🍎 SF UI / SF Pro — актуальные названия одного семейства San Francisco
- 📱 Display — оптический размер для крупных кеглей (заголовки, от ~20 pt и выше)
- 📝 Text — оптический размер для основного текста и мелких кеглей
- ⚖️ Bold — жирное начертание, один из девяти весов семейства
Чем Display отличается от Text
Одна из частых ошибок начинающих дизайнеров — использовать SF Display Bold для мелкого текста или, наоборот, SF Text для огромных заголовков. Это два оптических размера одного шрифта, и они отличаются не только названием.
У Display-версии более плотный трекинг и чуть более выраженные пропорции, рассчитанные на крупный размер. У Text-версии увеличены межбуквенные расстояния и апертуры, чтобы мелкий текст не сливался. В iOS система переключает их автоматически, но в дизайн-инструментах выбор остается за вами.
| Параметр | SF UI Display Bold | SF UI Text Bold |
|---|---|---|
| Назначение | Заголовки, крупные элементы | Основной текст, подписи |
| Трекинг | Плотнее | Шире |
| Апертуры | Уже | Шире для читаемости |
| Типичное применение | Экранные заголовки, кнопки | Параграфы, списки, лейблы |
Лицензия: где можно и нельзя использовать шрифт
Ключевое ограничение, о котором многие забывают: San Francisco не является свободным шрифтом. Apple предоставляет его бесплатно, но лицензионное соглашение разрешает использование исключительно для создания макетов и дизайна приложений, предназначенных для платформ Apple — iOS, macOS, watchOS, tvOS.
Практически это означает: макет интерфейса приложения для iPhone в Figma — можно. Логотип компании, сайт, полиграфия, приложение под Android — формально нарушение лицензии. На практике за верстку лендингов этим шрифтом вряд ли кто-то предъявит претензии, но для коммерческих проектов разумнее выбрать легальную альтернативу.
⚠️ Внимание: файлы SF UI Display, скачанные со сторонних «шрифтовых» сайтов, часто распространяются с нарушением лицензии Apple и могут содержать модифицированные или устаревшие версии. Единственный надежный источник — официальный раздел Fonts на портале Apple Developer.
Как легально скачать и установить SF UI Display Bold
Официальный путь один: зайти на портал Apple Developer в раздел шрифтов и скачать пакет SF Pro (ранее — SF UI). Учетная запись разработчика для скачивания, как правило, не требует платной подписки — достаточно бесплатного Apple ID, но актуальные условия стоит проверить на странице загрузки, так как Apple периодически меняет порядок доступа.
После распаковки архива вы получите набор файлов в формате .otf или .ttf, среди которых будет нужное начертание SF-Pro-Display-Bold. Дальше процесс зависит от вашей системы.
☑️ Установка SF UI Display Bold
На macOS шрифт устанавливается через приложение «Шрифты» (Font Book) или простым двойным кликом по файлу. Учтите, что в новых версиях macOS San Francisco уже встроен в систему, но системные копии могут не отображаться в сторонних редакторах — ручная установка решает этот вопрос.
На Windows достаточно клика правой кнопкой мыши по файлу и пункта Установить или Установить для всех пользователей. После установки перезапустите дизайн-инструменты: Figma, Photoshop и Illustrator подхватывают новые шрифты только после перезапуска.
Что делать, если шрифт не отображается в макете
Типичная ситуация: коллега прислал макет, а у вас вместо текста — предупреждение об отсутствующем шрифте SFUIDisplay-Bold. Причина почти всегда в рассинхроне названий: в макете использована старая версия семейства (SF UI), а у вас установлена новая (SF Pro), или наоборот.
Порядок действий здесь такой. Сначала проверьте, какое именно имя указано в панели шрифтов редактора. Затем посмотрите, какие версии San Francisco установлены в системе. Если имена не совпадают, есть два выхода: установить ту же версию, что у автора макета, или массово заменить шрифт в файле на имеющийся — в Figma для этого есть функция замены через панель выбора шрифта.
⚠️ Внимание: подмена SF UI на SF Pro в чужом макете может слегка сдвинуть переносы строк из-за различий в метриках версий. После замены пройдитесь по ключевым экранам и проверьте, не «поплыла» ли верстка текстовых блоков.
Почему в макете написано SF UI, а скачивается SF Pro
Apple переименовала семейство из SF UI в SF Pro при крупном обновлении шрифта. Старые макеты и гайдлайны сохранили прежнее имя, поэтому SF UI Display Bold и SF Pro Display Bold по сути одно и то же начертание разных поколений. Для новых проектов используйте SF Pro.
Легальные альтернативы для любых проектов
Если лицензия Apple не подходит под вашу задачу — сайт, Android-приложение, брендинг — есть несколько свободных шрифтов, визуально близких к SF UI Display Bold. Ни один не является точной копией, но в интерфейсной типографике разница малозаметна.
- 🔤 Inter — самая популярная замена, созданная специально для интерфейсов, открытая лицензия SIL OFL
- 🤖 Roboto — системный шрифт Android, свободно используется везде
- 🌐 Manrope — современный гротеск с похожими пропорциями, бесплатный
- 🅷 Helvetica Neue / Arial — системные варианты, если нужна нейтральная гротесковая эстетика без загрузки файлов
Для веб-проектов Inter подключается через Google Fonts одной строкой и поддерживает кириллицу — это важный момент, потому что старые версии SF UI из неофициальных источников часто не содержат кириллических глифов, и русский текст в них отображается подстановочным шрифтом. Официальный SF Pro кириллицу поддерживает, но с лицензионными ограничениями, описанными выше.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
h1 {
font-family: 'Inter', -apple-system, sans-serif;
font-weight: 700;
}
SF UI Display Bold в разработке под iOS
Если вы разрабатываете приложение для iOS, отдельно скачивать и встраивать шрифт не нужно — San Francisco является системным. В коде достаточно запросить системный шрифт с жирным весом, и система сама выберет корректный оптический размер (Display или Text) в зависимости от кегля.
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 24, weight: .bold)
Такой подход дает дополнительные преимущества: автоматическую поддержку Dynamic Type (масштабирования текста по настройкам пользователя) и гарантию, что шрифт будет выглядеть нативно на любой версии iOS. Встраивать файлы SF Pro внутрь приложения не требуется и даже не рекомендуется — это лишний вес в сборке.
Часто задаваемые вопросы
SF UI Display Bold — это платный шрифт?
Нет, скачать его можно бесплатно с портала Apple Developer. Но «бесплатно» не значит «свободно»: лицензия ограничивает использование дизайном приложений для платформ Apple.
Можно ли использовать SF UI Display Bold на сайте?
Формально лицензия Apple этого не разрешает. Легальный способ получить San Francisco на сайте — указать -apple-system в CSS: тогда шрифт подставится системой только на устройствах Apple. Для всех остальных платформ используйте Inter или Roboto.
Поддерживает ли SF UI Display Bold кириллицу?
Актуальная официальная версия SF Pro поддерживает кириллицу. Однако старые сборки SF UI, встречающиеся на сторонних сайтах, могут содержать только латиницу — проверяйте набор глифов перед использованием.
Чем SF UI Display отличается от SF Pro Display?
Это разные поколения одного шрифта. SF UI — раннее название семейства, позже Apple переименовала его в SF Pro с обновленными глифами и расширенной поддержкой языков. Для новых проектов берите SF Pro.
Что делать, если в макете Figma шрифт отображается как missing?
Установите пакет SF Pro в систему, перезапустите Figma и убедитесь, что для веб-версии установлен Font Installer. Если в макете использовано старое имя SF UI, замените шрифт на SF Pro через панель выбора шрифта и проверьте переносы строк.