Аналог шрифта san francisco для windows

Обновлено: 06.07.2024

Если у проекта небольшой бюджет и в нём не предусмотрены отдельные деньги на покупку лицензии на шрифт, это уже давно не значит, что выбирать придётся только из Arial, Times New Roman и Roboto. Если мы говорим о проекте, активно использующем кириллицу, то выбор всё равно есть — из нескольких десятков, а то и сотен шрифтов. Какие есть варианты легально использовать шрифты и не платить за них «здесь и сейчас»?

Бесплатные шрифты
Шрифты, встроенные в операционную систему (Windows или macOS)
Шрифты, которые входят в подписку на Adobe Creative Cloud
Шрифты, которые можно использовать в конструкторах сайтов (Tilda или Readymag — в них очень большой выбор кириллических шрифтов, например, в Тильде доступна часть библиотеки Rentafont)
Неочевидный вариант — если проект без бюджета, но очень интересный, а хочется использовать именно этот конкретный шрифт, то всегда можно написать авторам — шрифтовые дизайнеры и студии часто идут навстречу.

Но совет «Используйте бесплатные шрифты» сам по себе не слишком полезен. Поэтому в этом материале мы сделали две важные вещи.
Во-первых, в двух словах описали, что можно и что нельзя делать с бесплатными, системными или адобовскими шрифтами. А во-вторых, составили списки тех шрифтов, в которых кириллица точно есть и выглядит хорошо или хотя бы приемлемо — как минимум, не хуже, чем в Roboto, Times New Roman или Raleway.

Показываем эти шрифты на примере волшебной фразы, в которой сразу видны все сложные буквы и их опасные сочетания.

Помочь сориентироваться в тонкостях рисунка кириллических шрифтов поможет вот эта статья.

А теперь переходим к категориям и спискам шрифтов. Внутри каждой «юридической» категории шрифты разделены на группы по форме, а ссылка ведёт на официальную страницу шрифта.

Бесплатные шрифты

Основные бесплатные лицензии — SIL Open Font License, Apache, Creative Commons.

Что можно делать: использовать шрифт в любых коммерческих проектах любым способом.

Что нельзя делать: продавать бесплатные шрифты, распространять модифицированные версии под оригинальным именем.

Подводный камень: не у всех бесплатных шрифтов именно эти лицензии, так что лучше всего всё-таки прочитать текст лицензионного соглашения.

Сейчас, возможно, впервые со времен самого первого Макинтоша имеет смысл заинтересоваться использованием системных шрифтов для интерфейса. Они являются интересной и свежей альтернативой веб-типографике — и они не требуют хостинга ни на вашем сервере, ни на стороннем. Как можно использовать системные шрифты на сайте и какие здесь могут возникнуть проблемы?

В последние годы появилось много интересных системных шрифтов для интерфейса. Google выпустил Roboto (и продолжает развивать этот шрифт, регулярно выпуская обновления), Apple выпустили San Francisco, а дизайнер Эрик Спикерман создал для Mozilla шрифт Fira Sans. И это не все, не стоит забывать о Майкрософт. Именно они начали этот тренд, выпустив Windows Phone с дизайнерским языком Metro, сильно привязанным к типографике в целом и к шрифту Segoe в частности.

Последнее поколение шрифтов системного интерфейса на различных системах. (увеличенная версия)

Неудивительно, что идея использовать эти шрифты в вебе набирает популярность. Возможно, вы хотите сильнее акцентировать разницу между содержанием и пользовательским интерфейсом, может, хотите добиться, чтобы сайт выглядел как приложение или просто хотите использовать красивые шрифты без каких-либо задержек.

Но их использование не так просто, как хотелось бы. CSS поддерживает эти шрифты немного психоделично.

Примечание: “шрифт системного интерфейса” это шрифт, используемый для рендеринга интерфейса операционной системы — не надо путать его с системными шрифтами, то есть шрифтами установленными в системе пользователя.

Два подхода

На данный момент есть два способа использования шрифта системного интерфейса в типографике.

Первый способ

Он заключается в использовании краткой “магической” декларации CSS:

Некоторые из значений для краткого задания свойств шрифта существуют достаточно давно ( caption , icon , menu , message-box , small-caption , status-bar ), но я не замечал их широкого распространения.

Вот список этих значений:

Значение	Описание
caption	Шрифт используемый для элементов управления с заголовками ( кнопки, загловки разделов выпадающего меню и т.д.).
icon	Шрифт, используемый в названиях иконок.
menu	Шрифт используемый в меню (списки меню, пункты выпадающего меню).
message-box	Шрифт диалоговых окон.
small-caption	Маленький шрифт для заголовков.
status-bar	Шрифт строки состояния.

У этого подхода есть недостатки:

Он не дает корректный шрифт в iOS и на многих браузерах в Android.
Это краткая запись, а значит она перезаписывает все свойства шрифта, в том числе его размер.
До декабря 2015 в Firefox на Mac не использовались “умные” свойства San Francisco (автоматически переключающие San Francisco Text на San Francisco Display при размере шрифта больше 20 пикселей).

Эволюция шрифтов системного интерфейса Mac: от Chicago в 1984 году, и далее через Charcoal и Lucida Grande к San Francisco. (увеличенная версия)

Второй способ

Второй способ это перечисление названий всех шрифтов:

У него тоже есть недостатки:

Вам нужно поддерживать этот список (и его порядок). Шрифты системного интерфейса меняются не слишком часто (их бурное развитие за последние два года это исключение из правил) — но гарантировать, что этот список будет также работать в будущем, нельзя.
Этот список учитывает самые популярные браузеры и операционные системы, но он не учитывает все браузеры и ОС.
Он не работает в Firefox на Mac OS X El Capitan, там показывается Neue Helvetica вместо San Francisco (это будет исправлено в декабре 2015 года).
Это решение может повлечь конфликты именования, что привело к интересному багу с системным шрифтом в Medium. Также, например название шрифта интерфейса KDE Oxygen используется еще одним шрифтом, что может привести к сюрпризам(!). Многие разработчики устанавливают на свой компьютер Roboto или Fira Sans и эти шрифты могут быть задействованы вместо действующих системных шрифтов.
Mac OS версий с 10.0 до 10.9 использует в качестве шрифта системного интерфейса Lucida Grande, Mac OS 10.10 использует Neue Helvetica — при этом оба шрифта установлены во всех версиях Mac OS X. Так как декларация font-family работает путем последовательного запроса шрифтов по списку до нахождения первого установленного в системе, выбор Lucida Grande на некоторых платформах и Neue Helvetica на остальных невозможен. Всегда будет использован первый из них в списке.

Другие варианты

Возможно, вам покажется интересным соединить оба вышеупомянутых подхода, чтобы добиться лучшего результата. Увы, это нелегко, потому что свойства font и font-family являются взаимоисключающими — одно из них всегда переписывает другое. Возможно, что-то получиться путем манипуляции с медиа-запросами, но этот метод из разряда хаков.

Вы также можете попробовать отсылать разные значения CSS с сервера в зависимости от пользовательского агента или делать то же самое с помощью JavaScript (например, отсылать только font-family: "Fira Sans", sans-serif; для Firefox OS). Но этот вариант громоздкий, сложный в поддержке, а, главное, он не решает всех проблем.

Шрифт системного интерфейса, используемый только для интерфейса (слева) и для всего сайта (справа).(увеличенная версия) Автор интерфейса - Коул Питерс.

Что делать сейчас?

В Medium в данный момент используется второй способ:

Он был выбран потому, как в нем меньше больших проблем. (Первый способ не работает на мобильных устройствах, с совершенно неприемлемыми последствиями; со вторым способом тоже есть проблемы, но их меньше и они не столь критичны. Ваша оценка этих способов может быть другой).

Эту методику мы можем улучшить совместными усилиями. Ниже расположен блок с текстом, который должен выводиться интерфейсным шрифтом вашей системы. Если это не работает или у вас есть какие-либо мысли по этому поводу, оставьте комментарий.

This should be rendered in your system’s UI font. The quick brown fox jumps over the lazy dog. Этот текст должен выводится шрифтом системного интерфейса.

Детальный обзор списка шрифтов

На данный момент в этом способе есть следующие проблемы:

Как минимум до декабря 2015 года в Firefox на Mac OS X вместо San Francisco будет использоваться Neue Helvetica.
Также на Mac OS X вместо Lucida Grande на версиях до Yosemite выводится Neue Helvetica.
В менее популярных операционных системах и более сложных конфигурациях правильный выбор корректного шрифта еще более затруднен.

Если вы заинтересовались деталями, давайте рассмотрим как этот список должен выглядеть, чтобы правильно работать:

В первую группу отделены свойства, отсылающие к шрифтам системного интерфейса. Они достаточно надежны и нет шансов, что браузер спутает их с другими:

-apple-system охватывает San Francisco в Safari на Mac OS X и iOS, а на более старых версиях Mac OS X — Neue Helvetica и Lucida Grande. С этим значением работает автоматическая выборка между San Francisco Text и San Francisco Display в зависимости от размера шрифта.
BlinkMacSystemFont это эквивалент предыдущего значения, работающий в Chrome на Mac OS X.

В следующей группе выделены известные шрифты системного интерфейса:

Segoe UI охватывает Windows и Windows Phone.
Roboto это Android и новая Chrome OS. Он расположен после Segoe UI с учетом наличия разработчиков Android, работащих в Windows с установленным Roboto, чтобы Roboto не замещал Segoe UI.
Oxygen это шрифт KDE, Ubuntu это, разумеется, Ubuntu, а Cantarell — GNOME. Сразу три шрифта для Linux, но в условиях обилия дистрибутивов они не решают проблему.
Fira Sans шрифт Firefox OS.
Droid Sans — старые версии Android.
Отметьте, что мы не указываем название шрифта San Francisco . На iOS и Mac OS X, San Francisco присутствует как “скрытый шрифт”, а не общедоступный.
И мы также не указываем San Francisco , используя .SFNSText-Regular , внутреннее название в PostScript для San Francisco на Mac OS X. Оно работает только в Chrome и менее гибкое в сравнении с BlinkMacSystemFont .

В третьей группе у нас шрифты, используемые в качестве запасных вариантов:

Helvetica Neue используется в Mac OS X до El Capitan. Шрифт указан в самом конце списка по причине его широкой распространенности.
sans-serif традиционный запасной вариант с дефолтным шрифтом без засечек.

Эволюция шрифтов системного интерфейса в Windows более резкая, чем на Mac — от моноширинного растрового шрифта Windows 1.0 в 1985 до шрифта высокого разрешения Segoe UI in Windows 10. (увеличенная версия)

Будущее

Здесь по прежнему есть, с чем работать. Начнем с того, что методика работает только с западной типографикой. Также проблемы возникнут, если вы захотите выровнять внутренний отступ или высоту строки в соответствии с используемым интерфейсным шрифтом — в этом случае вам придеться использовать гибридный подход или опознавать шрифты после рендеринга.

Но все равно, полученные результаты хороши. Надеюсь, в будущем все это будет менее сложным. Если вы тоже заинтересованы в этом, сообщите об этом производителям браузеров.

Последние три версии Mac OS X используют три разных интерфейсных шрифта: Lucida Grande на Mac OS 10.9 (Mavericks); специальная версия Neue Helvetica на Mac OS 10.10 (Yosemite); специальная версия San Francisco на Mac OS 10.11 (El Capitan). Логично предположить, что в будущих версиях будет использоваться San Francisco. (увеличенная версия)

IMPORTANT NOTICE: Use of the Apple San Francisco Font is subject to the terms of the License Agreement for the Apple San Francisco Font (the “License”). The Apple San Francisco Font may be used solely for creating mock-ups of user interfaces to be used in

SF UI Display Black

SF UI Display Bold

SF UI Display Heavy

SF UI Display Light

SF UI Display Medium

SF UI Display Regular

SF UI Display Semibold

SF UI Display Thin

SF UI Display Ultralight

SF UI Text Bold

SF UI Text Bold Italic

SF UI Text Heavy

SF UI Text Heavy Italic

SF UI Text Italic

SF UI Text Light

SF UI Text Light Italic

SF UI Text Medium

SF UI Text Medium Italic

SF UI Text Regular

SF UI Text Semibold

SF UI Text Semibold Italic

Вы можете скачать семейство San Francisco абсолютно бесплатно, без регистрации. Изготовителем шрифта является San Francisco is a trademark of Apple Inc.. Дизайнер - Apple Inc.. Шрифт размещен автором в открытом доступе и может применяться бесплатно в любых целях. Однако, если вы собираетесь использовать данную гарнитуру в коммерческих целях, и сомневаетесь в правах на использование, - рекомендуем связаться с автором и уточнить тип лицензии.

Требуется вход

Храните любимые шрифты под рукой. Создавайте свои подборки и добавляйте в них избранные шрифты. Для этого войдите на сайт или зарегистрируйтесь. Это бесплатно.

Создайте подборку

Затем добавляйте в нее шрифты. Можно использовать и русские и английские буквы.