SF Pro Display Light — тонкое начертание системного шрифта San Francisco, который Apple использует в интерфейсах iOS, macOS, watchOS и tvOS. Если в макете из Figma текст выглядит «воздушным» и лёгким, а после вёрстки превращается в грубый жирный шрифт — почти наверняка причина в том, что начертание Light не установлено в системе или не подключено в CSS.
В этой статье разберём, чем SF Pro Display Light отличается от других начертаний семейства, где его легально получить, как установить на Windows и macOS и как корректно подключить в веб-проектах без нарушения лицензии Apple.
Что такое SF Pro Display Light
SF Pro — это основное семейство шрифтов Apple, пришедшее на смену Helvetica Neue. Внутри семейства есть два оптических размера: SF Pro Text для мелких кеглей и SF Pro Display для крупных заголовков. Каждый из них включает девять начертаний от Ultralight до Black, и Light находится ближе к тонкому краю шкалы — это начертание с весом, соответствующим font-weight: 300.
Начертание Light отличается уменьшенной толщиной штрихов и повышенными требованиями к качеству рендеринга. На экранах с низкой плотностью пикселей тонкие линии могут «рассыпаться» и выглядеть блёклыми, поэтому Apple сама применяет Light преимущественно в крупных размерах — заголовках, экранах приветствия, рекламных материалах.
Где легально скачать шрифт
Единственный официальный источник — раздел шрифтов на портале Apple Developer. Шрифт распространяется бесплатно, но под фирменной лицензией Apple, которая ограничивает его использование: формально разрешено применять SF Pro для разработки и дизайна продуктов под платформы Apple. Использование шрифта в проектах, не связанных с экосистемой Apple, формально выходит за рамки этой лицензии.
Порядок получения файлов выглядит так:
- 🍎 Откройте официальный сайт Apple Developer и перейдите в раздел со шрифтами (Fonts).
- 📦 Найдите пакет SF Pro и скачайте архив — он содержит все начертания, включая Display Light.
- 📄 Прочитайте лицензионное соглашение внутри архива перед использованием файлов в коммерческих проектах.
- 🚫 Избегайте сторонних сайтов с «бесплатным SF Pro» — там часто лежат пересобранные или устаревшие версии, а иногда и вредоносные файлы.
⚠️ Внимание: сайты, предлагающие скачать SF Pro в формате TTF «для любых целей», нарушают лицензию Apple. Перед использованием шрифта в коммерческом дизайне сверьтесь с актуальным текстом лицензионного соглашения в официальном архиве.
Установка на macOS
На macOS шрифт SF Pro уже встроен в систему и используется интерфейсом, поэтому отдельная установка часто не требуется. Однако полный набор начертаний для дизайн-программ может понадобиться установить вручную из скачанного пакета.
Откройте скачанный файл шрифта двойным кликом — запустится штатное приложение Шрифты (Font Book). Нажмите кнопку установки, и начертание станет доступно во всех программах: Figma, Sketch, Photoshop, текстовых редакторах. Если шрифт не появился в списке программы, перезапустите её — многие редакторы кэшируют список шрифтов при запуске.
Установка на Windows
На Windows шрифт SF Pro не предустановлен, поэтому его нужно добавить вручную. Официальный пакет Apple распространяется в формате, который современные версии Windows обычно принимают без конвертации, но при проблемах возможна конвертация в TTF с помощью проверенных инструментов — при этом помните о лицензионных ограничениях.
Установка выполняется стандартно: кликните правой кнопкой по файлу шрифта и выберите Установить или Установить для всех пользователей. Второй вариант требует прав администратора, зато делает шрифт доступным для всех учётных записей на компьютере.
☑️ Проверка после установки SF Pro Display Light
Если после установки начертание Light не отображается, а вместо него подставляется Regular, проверьте, не конфликтует ли шрифт с ранее установленной копией из неофициального источника. Удалите старые версии через Параметры → Персонализация → Шрифты и установите пакет заново.
Подключение в веб-вёрстке
В веб-проектах прямая выкладка файлов SF Pro на сервер нарушает лицензию Apple. Корректный подход — использовать системный стек шрифтов: на устройствах Apple текст отрисуется родным San Francisco, а на остальных платформах — ближайшим системным аналогом.
font-family: -apple-system, BlinkMacSystemFont,
"SF Pro Display", "Segoe UI", Roboto, sans-serif;
font-weight: 300;
Здесь ключевую роль играет font-weight: 300 — именно это значение активирует начертание Light там, где оно доступно. Если на устройстве тонкого начертания нет, браузер подберёт ближайшее доступное, и текст останется читаемым, хоть и чуть плотнее по визуальному весу.
⚠️ Внимание: не размещайте файлы SF Pro в папке проекта и не подключайте их через @font-face на публичном сайте — это прямое нарушение лицензии Apple, даже если файл скачан с официального сайта.
Сравнение начертаний семейства SF Pro
Чтобы понимать, когда уместен именно Light, полезно видеть его место среди соседних начертаний. Таблица ниже описывает типичные сценарии применения — это общие дизайн-рекомендации, а не жёсткие правила.
| Начертание | Вес (font-weight) | Типичное применение |
|---|---|---|
| Ultralight | 100 | Очень крупные декоративные заголовки |
| Thin | 200 | Акцентные надписи на промо-экранах |
| Light | 300 | Заголовки, крупный текст на экранах приветствия |
| Regular | 400 | Основной текст интерфейса |
| Medium / Semibold | 500–600 | Кнопки, подзаголовки, акценты в тексте |
Как видно из таблицы, Light — это граница между декоративными тонкими начертаниями и рабочими текстовыми. Ниже этого веса шрифт становится слишком хрупким для повседневного чтения, выше — теряет ту самую «лёгкость», ради которой его выбирают.
Типичные проблемы и их решения
Самая частая жалоба — «Light выглядит как Regular». Причины обычно три: начертание не установлено в системе, в CSS не указан правильный font-weight, либо дизайн-программа подменяет отсутствующее начертание синтетическим. Проверяйте по порядку: сначала наличие шрифта в системе, затем корректность веса в стилях, затем настройки конкретной программы.
Вторая типичная ситуация — тонкий шрифт плохо читается на экране. Здесь дело не в ошибке, а в физике отображения: на матрицах с низкой плотностью пикселей штрихи веса 300 теряют чёткость. Решение — увеличить кегль, добавить межбуквенный интервал или перейти на Regular для мелкого текста.
Почему в Figma шрифт выглядит иначе, чем на iPhone
Figma рендерит шрифты собственным движком, который отличается от системного рендеринга Apple. Кроме того, если вы работаете в браузерной версии Figma на Windows без установленного SF Pro, программа подставляет замену. Для точного совпадения установите шрифт локально и используйте десктопное приложение Figma.
Альтернативы со свободной лицензией
Если лицензионные ограничения Apple критичны для вашего проекта, существуют свободные шрифты с похожей геометрией. Они не являются точной копией, но сохраняют общий характер нейтрального гротеска и имеют тонкие начертания.
- 🅰️ Inter — свободный шрифт, изначально спроектированный как альтернатива San Francisco для интерфейсов.
- 🤖 Roboto — системный шрифт Android, включает начертание Light и распространяется под Apache License.
- 🌐 Segoe UI Variable — системный шрифт Windows с тонкими вариантами, доступен на всех современных версиях ОС.
Часто задаваемые вопросы
Можно ли использовать SF Pro Display Light на сайте коммерческой компании?
Лицензия Apple разрешает использование шрифта для разработки продуктов под платформы Apple. Размещение файлов шрифта на публичном сайте через @font-face ею не предусмотрено. Безопасный вариант — системный стек шрифтов или свободные аналоги.
Почему после установки в списке шрифтов нет именно «Display Light»?
Многие программы группируют начертания под общим именем семейства, а выбор веса происходит отдельным выпадающим списком стиля. Ищите SF Pro Display в списке шрифтов, а Light — в списке начертаний рядом.
Подойдёт ли Light для основного текста сайта?
Для длинных текстов мелким кеглем это начертание не рекомендуется: тонкие штрихи быстрее утомляют глаза и хуже читаются на экранах с низкой плотностью пикселей. Его стихия — заголовки и крупные акцентные надписи.
Чем SF Pro Display отличается от SF Pro Text?
Это два оптических размера одного семейства. Display оптимизирован для крупных кеглей — у него уже просветы и компактнее пропорции. Text спроектирован для мелкого набора и лучше читается в маленьких размерах.
Работает ли шрифт в Photoshop и Illustrator?
Да, после установки в систему SF Pro Display Light доступен во всех программах Adobe. Если шрифт не появился, перезапустите приложение — Adobe кэширует список шрифтов при старте.