Начертание SF Pro Display Medium появляется в макете дизайнера или в CSS-свойстве font-family, когда разработчик пытается воспроизвести типографику интерфейсов Apple на веб-странице или в приложении для другой платформы. Это одно из начертаний системного шрифта San Francisco, который Apple использует в iOS, macOS, watchOS и tvOS, и его средняя насыщенность (weight 500) чаще всего применяется для заголовков, кнопок и акцентных элементов.
Разберёмся, что представляет собой это начертание, чем оно отличается от Regular и Semibold, где его можно легально получить и как корректно подключить в проектах, не нарушая лицензионное соглашение Apple.
Что такое SF Pro Display Medium
SF Pro — это семейство гротескных шрифтов, разработанное Apple и впервые представленное вместе с Apple Watch. Семейство разделено на два оптических размера: SF Pro Text для мелких кеглей и SF Pro Display для крупных. Display-версия имеет более плотный трекинг и иные пропорции, рассчитанные на заголовки и крупные надписи.
Начертание Medium соответствует весу 500 по шкале CSS и находится между Regular (400) и Semibold (600). В интерфейсах Apple его можно встретить в заголовках разделов настроек, названиях кнопок и других элементах, где требуется визуальный акцент без излишней «тяжести».
- 📱 Оптический размер: Display — для крупных кеглей, ориентировочно от 20 pt и выше по рекомендациям Apple.
- 🔤 Вес: Medium (500) — средняя насыщенность между обычным и полужирным.
- 🖥️ Платформы: iOS, iPadOS, macOS, watchOS, tvOS — шрифт встроен в систему.
- 📄 Лицензия: ограниченная, распространяется через Apple Developer для использования в макетах и приложениях для платформ Apple.
Отличия Display от Text и Medium от других весов
Главная путаница при работе с SF Pro возникает из-за двух оптических версий. SF Pro Text имеет более широкие апертуры и увеличенное межбуквенное расстояние, что улучшает читаемость мелкого текста. SF Pro Display, напротив, плотнее и компактнее — в крупных размерах это выглядит аккуратнее.
По насыщенности Medium занимает промежуточное положение: он заметно тяжелее Regular, но не так «кричит», как Semibold или Bold. Дизайнеры часто выбирают его для второстепенных заголовков и интерактивных элементов.
| Начертание | Вес (CSS) | Типичное применение |
|---|---|---|
| Regular | 400 | Основной текст, описания |
| Medium | 500 | Заголовки карточек, кнопки, подписи |
| Semibold | 600 | Заголовки экранов, важные акценты |
| Bold | 700 | Ключевые заголовки, навигация |
Где скачать SF Pro Display Medium легально
Единственный официальный источник — сайт Apple Developer, где шрифт доступен в разделе ресурсов для дизайнеров. Скачивание с сторонних «шрифтовых» сайтов почти всегда означает пиратскую копию с непредсказуемым качеством: вырезанными символами кириллицы, битыми метриками или отсутствующими начертаниями.
⚠️ Внимание: лицензия Apple разрешает использовать SF Pro для создания макетов и в приложениях для платформ Apple. Встраивание шрифта в веб-сайты для произвольных посетителей или использование в продуктах для других платформ лицензией не покрывается — перед коммерческим применением сверьтесь с актуальным текстом соглашения.
На устройствах Apple шрифт уже встроен в систему, поэтому в приложениях под iOS его не нужно подключать вовсе — достаточно указать системный шрифт средствами фреймворка, например через UIFont.systemFont(ofSize:weight:) с параметром .medium.
Использование в Figma и других редакторах
В Figma на macOS шрифт обычно доступен сразу, поскольку установлен в системе. На Windows ситуация сложнее: системной версии там нет, и дизайнеры используют либо установленный пакет с Apple Developer, либо близкие альтернативы.
После установки файлов шрифта в систему начертание появится в списке как SF Pro Display с выбором веса Medium. Если шрифт не отображается, проверьте, что установлены именно файлы формата .ttf или .otf для всех нужных начертаний, и перезапустите редактор.
Подключение шрифта в вебе: что нужно знать
На сайтах, открываемых на устройствах Apple, системный шрифт подключается без загрузки файлов — через специальное значение -apple-system в свойстве font-family. Вес Medium задаётся свойством font-weight: 500.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 500;
Такой подход означает, что посетители с iPhone и Mac увидят родной SF Pro, а пользователи Windows и Android — системный шрифт своей платформы. Это стандартная практика «нативной» типографики, которую применяют многие крупные сервисы.
⚠️ Внимание: размещать файлы SF Pro на собственном сервере и подключать их через @font-face для всех посетителей — рискованный с точки зрения лицензии сценарий. Если нужен единый вид на всех платформах, безопаснее взять свободный шрифт-аналог с открытой лицензией.
Типичные проблемы и их решения
Самая частая жалоба — шрифт «есть в списке, но выглядит не так». Обычно причина в том, что в макете указано начертание, которого нет в установленном пакете, и редактор подставляет ближайшее доступное. Проверьте, какие именно веса установлены в системе.
Вторая типичная ситуация — отсутствие кириллицы в скачанной из неофициального источника версии. Официальный пакет от Apple поддерживает кириллицу, поэтому «квадраты» вместо русских букв — верный признак пиратской или урезанной копии.
☑️ Проверка корректной работы SF Pro Display Medium
Почему в CSS нет значения "SF Pro Display Medium"
В вебе шрифт задаётся не полным названием начертания, а комбинацией семейства и числового веса. Поэтому правильная запись — font-family с системным значением плюс font-weight: 500. Название "Medium" остаётся лишь человекочитаемой меткой в дизайн-инструментах.
Когда Medium — правильный выбор
Выбирайте это начертание, когда Regular выглядит слишком лёгким для элемента, а Semibold — избыточно тяжёлым. Типичные сценарии: названия карточек товаров, кнопки среднего приоритета, подписи в навигации, цифры в виджетах.
Для длинных текстов Medium не подходит — насыщенность 500 утомляет глаз при чтении больших абзацев. Основной текст оставляйте в Regular, а Medium резервируйте для акцентов. Такое разделение соответствует рекомендациям Apple по типографике в Human Interface Guidelines.
Частые вопросы
Можно ли бесплатно скачать SF Pro Display Medium?
Да, шрифт бесплатно доступен на сайте Apple Developer, но его лицензия ограничивает сферу применения — прежде всего это макеты и приложения для платформ Apple.
Чем SF Pro Display Medium отличается от SF Pro Text Medium?
Различие в оптическом размере: Display предназначен для крупных кеглей и имеет более плотные пропорции, Text — для мелкого текста с увеличенными межбуквенными расстояниями.
Есть ли у SF Pro Display Medium кириллица?
В официальной версии от Apple кириллические символы присутствуют. Если русские буквы не отображаются — скорее всего, у вас неофициальная или урезанная сборка шрифта.
Можно ли использовать SF Pro на сайте для всех посетителей?
Легальный способ — подключение через -apple-system: тогда шрифт увидят только пользователи устройств Apple. Встраивание файлов шрифта через @font-face для всех платформ лицензией не покрывается.
Какой бесплатный шрифт похож на SF Pro Display Medium?
Наиболее близкой свободной альтернативой считается Inter с весом 500. Также похожий характер имеют Roboto и системный Segoe UI на Windows.