San Francisco Pro

С 0 до Middle+Другие курсы

Начертания

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thin

Толковый шрифт

Скачать

Thin Italic

Толковый шрифт

Скачать

Extra-light

Толковый шрифт

Скачать

Extra-light Italic

Толковый шрифт

Скачать

Light

Толковый шрифт

Скачать

Light Italic

Толковый шрифт

Скачать

Regular

Толковый шрифт

Скачать

Regular Italic

Толковый шрифт

Скачать

Medium

Толковый шрифт

Скачать

Medium Italic

Толковый шрифт

Скачать

Semi-bold

Толковый шрифт

Скачать

Semi-bold Italic

Толковый шрифт

Скачать

Bold

Толковый шрифт

Скачать

Bold Italic

Толковый шрифт

Скачать

Extra-bold

Толковый шрифт

Скачать

Extra-bold Italic

Толковый шрифт

Скачать

Black

Толковый шрифт

Скачать

Black Italic

Толковый шрифт

Скачать

О шрифте

San Francisco — шрифтовая гарнитура типа новый гротеск, созданная компанией Apple. Была впервые представлена для разработчиков 18 ноября 2014 года. Сперва использовался как системный шрифт Apple Watch, а позднее заменил и Helvetica Neue в MacOS и iOS, начиная с OS X El Capitan и iOS 9. San Francisco также стал системным шрифтом для tvOS, начиная с 4-го поколения Apple TV. Это первый новый шрифт, разработанный в Apple за последние почти 20 лет.

Автор

Apple

,

Лицензионные условия

Бесплатно для личного использования

Разрешения

Персональное использование

Ограничения

Ограничение ответственности; Отсутствие гарантий

Пожаловаться на лицензию

Рекомендуем для сочетания

Runa

Для коммерции

,

начертаний:

1

Автор:

Elena Voynova

Perfograma

Для коммерции

,

начертаний:

1

Автор:

Fontfabric

KTF Jermilov

Для учебы

,

начертаний:

2

Автор:

Oles Gergun, Yevgen Anfalov

Glitch

Для коммерции

,

начертаний:

1

Автор:

NaN-xyz

Смотрите также

Designosaur

Для коммерции

,

начертаний:

2

Автор:

Sergiy Tkachenko

Fira Sans Condensed Light

Для коммерции

,

начертаний:

11

Автор:

Carrois Corporate

Myra 4F Caps

Для коммерции

,

начертаний:

3

Автор:

Sergiy Tkachenko

Steclo

Для коммерции

,

начертаний:

2

Автор:

Pepper Type

Полезное для дизайнеров

Лучшие ресурсы

Статьи по дизайну

Бесплатные курсы

Практические уроки с арт-директором

Вакансии

Секрет нового шрифта San Francisco от Apple

Helvetica (слева), San Francisco (справа)

Шрифт San Francisco уже использовался в Apple Watch, и он уже стал стандартным шрифтом техники Apple: Apple Watch, iPhone, iPad and Mac.

Apple Watch

Apple использовали Helvetica в качестве системного шрифта для iOS с появления первого iPhone. А на Mac OS X они поменяли шрифт с Lucida Grande на Helvetica с момента выхода 10.10 Yosemite. Почему Apple решила похоронить Helvetica — самый известный и любимый шрифт в мире?

В маленьких формах Helvetica слаба

Говорят, что Helvetica не подходит для текстов в малом кегле. Когда системный шрифт в Mac OS X Yosemite поменяли на Helvetica, многие дизайнеры заявляли, что такой шрифт здесь совсем не уместен.

«Helvetica отстой» Erik Spiekermann

Когда вы печатаете текст в маленьком кегле, становится видна низкая разборчивость Helvetica. Helvetica размывает такой текст. Некоторые тексты смешиваются, и их сложно разобрать. Многие говорят, что Apple создала шрифты San Francisco, чтобы сделать тексты в маленьком кегле в Apple Watch более читаемыми.

Буквы смешиваются в текстах маленького кегля

Но сегодня разрешение экранов девайсов больше, чем у печатной продукции, а тексты в айфонах не всегда такие маленькие, как в Apple Watch. Почему же Apple поменяли системные шрифты не только в Apple Watch, но и в iOS и Mac OS X.

San Francisco — это не один шрифт

У шрифтов San Francisco есть много особенностей, делающих его весьма читаемым. На самом деле шрифты San Francisco для Apple Watch и для iOS/Mac — это два шрифта с небольшими отличиями.

Семейство шрифтов под названием «SF» используется для iOS/Mac, а «SF Compact» для Apple Watch. Вы можете заметить разницу в округлых буквах ‘o’, ‘e’. У «SF compact» более плоские вертикальные линии, чем у SF.

SF и SF Compact

Эта разница даёт текстам в SF Compact больший марджин (отступ) между буквами, в результате получается бОльшая читаемость на маленьких девайсах типа Apple Watch.

В добавок, шрифты SF и SF Compact разделены на два подсемейства: «Text» и «Display». Это как раз то, что Apple называет «Оптическим размером» (Optical Sizes). «Text» предназначен для текстов в меньшем кегле, а «Display» для текстов в большем.

Семейство San Francisco

Как я упомянул выше, при использовании гротесковых (sans-serif) шрифтов типа Helvetica две соседние буквы «смешиваются», а буквы типа «а», «с», «s» в маленьком кегле смотрятся похоже.

Шрифты «Дисплей» и «Текст»

В подсемействе «Text» марджины больше, чем в «Display». И апертуры этих текстовых шрифтов тоже шире, чтобы маленький кегль был более разборчивым.

Шрифты San Francisco динамичны

Одна из прекраснейших особенностей San Francisco — это то, как он динамично оптимизирует начертание. Система автоматически переключает шрифт Display/Text в зависимости от кегля текста. Пороговое значение — 20pt.

Дизайнерам и специалистам больше не надо ломать голову, какой же выбрать шрифт. К примеру, просто добавьте системный шрифт в UILabel, и устройство подберёт вам подходящее начертание.

Что меня поражает в шрифтах San Francisco — это то, как отображаются двоеточия. В основном, двоеточие ставят прямо над линией шрифта, поэтому оно не выровнено по центру вертикально, если стоит между цифрами. А в шрифтах San Franсisco двоеточия выравниваются так автоматически.

Вертикально выровненное по центру двоеточие

San Francisco — шрифт цифровой эры

Как видите, шрифты San Francisco были бережно продуманы, чтобы их было легко читать в любом кегле и на любом девайсе.

Helvetica, которая была заменена на шрифты San Francisco, была создана в Швейцарии в 1957, когда ещё не было никаких цифровых устройств. Helvetica широко используется многими компаниями в качестве корпоративного шрифта даже сейчас, и нет никаких сомнений, что она будет идальше применяться в будущем как качественный классический шрифт.

С другой стороны, San Francisco — современный шрифт. Он динамично меняет начертания в соответствии с контекстом. Это что-то вроде «родного» шрифта, будто бы специально созданного для надвигающейся цифровой эры.

SF Pro Display Font БЕСПЛАТНАЯ загрузка

9006

4

-Th-Pro.inote-Disote-13

4 sf-bold-pro-text-s

4 sf-bold-pro-text-s 4 154 КБ

скачать 13

4

3Ref-ProDisplay

1 5 5

ight.woff

5

Pro-Display

2

2 -SemiboldItalic.otf

9013

2

900 emibold.ttf

134014 неизвестно

Re-Pro-Display-g

y.otf

5

5

9002 -Display-LightItalic.eot

9014-flight-slight

00014 .woff

Файл шрифта

5

5

5

5

5 SF-Pro-Display-Light. otf

9

5

5 SF-Pro-Display-Black.eot

неизв. f

9015

9 0 9014 неизвестно 9 5

SF 00014 Курсив.woff

9Неизвестно 0015

9 0 КБ

1

02 0015

Имя файла	Размер файла	Тип	Опции
sf-pro-text-heavy. woff 1 90 КБ	4 900 14 неизвестно
SF -Pro-Display-LightItalic.ttf	247 КБ	Файл шрифта	загрузить
SF-Pro-Display-Black.woff	123 КБ	неизвестно 15
SF-Pro-Display-UltralightItalic.otf	153 КБ	Файл шрифта	загрузить
SF-Pro-Display-Bold.ttf	42014 Файл шрифта	скачать
SF-Pro-Display-UltralightItalic.woff	79 КБ	неизвестно
sf-pro-text-regular.eot	142 КБ
SF-Pro-Дисплей- ThinItalic.eot	125 КБ	неизвестно
SF-Pro-Display-Medium.eot	204 КБ	неизвестно		3	SF-Pro-Text-SemiboldItalic.eot	140 КБ	неизвестно
SF-Pro-Text-SemiboldItalic. ttf	271 КБ	Файл шрифта	загрузить
SF	200 КБ	неизвестно
SF-Pro-Display-Black.ttf	417 КБ	Файл шрифта	загрузить
Файл шрифта	скачать
SF-Pro-Text-SemiboldItalic.woff	88 КБ	неизвестно
SF-Pro-Text-Regular.otf 5 30014 15	Файл шрифта	скачать
SF-Pro-Display-RegularItalic.otf	145 КБ	Файл шрифта	загрузить
sf-pro-text-regular.woff 905 9015 3701 4 неизвестно
кф -pro-text-light.ttf	156 КБ	Файл шрифта	загрузить
5
СФ-Про -Display-SemiboldItalic.eot	127 КБ	неизвестный
SF-Pro-Text-BoldItalic. ttf	272 КБ	файл шрифта	SF-Pro-Display-Heavy.eot	205 КБ Неизвестно otf	322 КБ	Файл шрифта	загрузить
SF-Pro-Text-MediumItalic.eot	140 КБ	неизвестно
2091e-Display-Light. КБ	неизвестно
SF-Pro-Display-Ultralight.eot	195 КБ	неизвестно
SF-Pro-Text-RegularItalic.eot	136 КБ
SF-Pro-Display- Полужирный.eot	205 КБ	неизвестно
sf-pro-text-bold.svg	137 КБ	неизвестно	3	SF-Pro-Text-MediumItalic.otf	176 КБ	Файл шрифта	загрузить
SF-Pro-Text-MediumItalic.ttf	270 КБ	Файл шрифта	загрузить
404 КБ	Файл шрифта	загрузить
SF-Pro-Text-HeavyItalic. eot	140 КБ	неизвестно
SF-Pro-wDisplay-Bold-Pro-w 14 131 КБ	неизвестно
SF-Pro-Display-BoldItalic.woff	78 КБ	неизвестно
sf-pro-text-semibold.eot	900 КБ неизвестно 0014
SF-Pro-дисплей -Средний.woff 9Скачать 3	SF-Pro-Display-UltralightItalic.ttf	247 КБ	Файл шрифта	загрузить
SF-Pro-Display-BlackItalic.eot	128 КБ	неизвестно
133 КБ	неизвестно
sf-pro-text-medium.woff	43 КБ	неизвестно
3		154 КБ	Файл шрифта	загрузить
SF-Pro-Display-ThinItalic.ttf	248 КБ	Файл шрифта	загрузить
SF-Pro-Text-BoldItalic. woff 9 6 0 04 9 9 0 0 4 9 0015	неизвестно
SF-Pro-Display-ThinItalic.woff	80 КБ	неизвестно
SF-Pro-Display-Medium.ttf 5	Файл шрифта	скачать
sf-pro-text-heavy.eot	154 КБ	unknown
SF-Pro- Display-Thin.otf	310 КБ	Файл шрифта	загрузить
SF-Pro-Display-UltralightItalic.eot	125 КБ	неизвестно	2	1 5 5
sf-pro-text-heavy.ttf	154 КБ	Файл шрифта	загрузить
SF-Pro-Display-HeavyItalic.ttf	247 КБ	Файл шрифта	загрузить
156 КБ	Файл шрифта	загрузить
SF-Pro-Text-LightItalic.otf	174 КБ	Файл шрифта	загрузить	14 SF-Pro-Display-Ultralight. ttf	425 KB	Файл шрифта	загрузить
SF-Pro-Display-RegularItalic.woff	72 KB	unknown		32
text-semibold.svg	137 КБ	неизвестно
SF-Pro-Display-BoldItalic.eot	131 КБ	неизвестно		SF
425 КБ	Файл шрифта	загрузить
sf-pro-text-light.eot	156 КБ	неизвестно
sf-pro-text-semibold.woff 9 0 315KB	неизвестно
SF-Pro-Display-BlackItalic.woff	72 КБ	неизвестно
SF-Pro-Display-Heavy.woff
SF-Pro -Text-RegularItalic.ttf	261 КБ	Файл шрифта	загрузить
sf-pro-text-regular. svg	123 КБ	неизвестно 15
SF-Pro-Text-HeavyItalic .woff	87 КБ	неизвестно
SF-Pro-Display-RegularItalic.eot	124 КБ	неизвестно	4 013	SF-Pro-Display-Medium.otf	328 КБ	Файл шрифта	загрузить
SF-Pro-Display-RegularItalic.ttf	235 КБ	Файл шрифта	загрузить
SF 5	292 КБ	Файл шрифта	загрузить
SF-Pro-Text-MediumItalic.woff	88 КБ	неизвестно
328 КБ	Файл шрифта 155 КБ 0014 156 КБ	Файл шрифта	загрузить
SF-Pro-Display-LightItalic.woff	80 КБ	неизвестно
SF-	SF-900.BoldItalic 46 КБ	Файл шрифта	скачать
SF-Pro-Display-SemiboldItalic. ttf	246 КБ	Файл шрифта	загрузить
SF-Pro-Display-ThinItalic.otf	4 Файл шрифта	скачать
SF-Pro-Text-RegularItalic.woff	78 КБ	неизвестно
SF-Pro-Display-Regular.woff	неизвестно
SF- Pro-Text-RegularItalic.otf	165 КБ	Файл шрифта	загрузить
SF-Pro-Display-HeavyItalic.eot	127 КБ
SF-Pro-Дисплей- BlackItalic.ttf	237 КБ	Файл шрифта	загрузить
SF-Pro-Text-HeavyItalic.otf	174 КБ	Файл шрифта загрузить 013	SF-Pro-Display-Ultralight.otf		197 КБ	неизвестно	–
126 КБ	неизвестно
SF-Pro-Display-BoldItalic. otf	156 КБ	Файл шрифта	загрузить
44 КБ	неизвестно
SF-Pro-Text-Heavy.otf	334 КБ	Файл шрифта	загрузить
5 390.1f900.Semibold 8 КБ	Файл шрифта	скачать 9	неизвестно		Файл шрифта	скачать
SF-Pro-Display-Ultralight.woff	131 КБ	неизвестно
SF-Pro-Дисплей- черный.otf	312 КБ	Файл шрифта	загрузить
SF-Pro-Display-MediumItalic.ttf	243 КБ	5				0013	sf-pro-text-bold.ttf	154 КБ	Файл шрифта	загрузить
SF-Pro-Display-HeavyItalic.otf	156 КБ	Файл шрифта		311 КБ	Файл шрифта	загрузить
sf-pro-text-light.svg	137 КБ	неизвестно
201 КБ	335 КБ	Файл шрифта	загрузить
SF-Pro-Text-HeavyItalic.ttf	272 КБ	Файл шрифта	загрузить
2091e 901e-Bold. КБ	неизвестно
SF-Pro-Display-BlackItalic.otf	143 КБ	Файл шрифта	загрузить
SF-Pro-Display-Semibold.woff	13bold	034 133 0015
SF-Pro-Text-Medium.otf	335 КБ	Файл шрифта	загрузить
SF-Pro-Display-MediumItalic.woff	901 80 КБ 15
SF- Pro-Text-BoldItalic.otf	175 КБ	Файл шрифта	загрузить
SF-Pro-Display-Thin. woff	133 КБ
SF-Pro-Text- SemiboldItalic.otf	176 КБ	Файл шрифта	загрузить
SF-Pro-Display-HeavyItalic.woff	79 КБ	неизвестно	013	sf-pro-text-regular.ttf	142 КБ	Файл шрифта	загрузить
SF-Pro-Text-LightItalic.eot	144 КБ	неизвестно
86 КБ	334 КБ	Файл шрифта	скачать
SF-Pro-Display-Light.ttf	422 КБ	Файл шрифта	загрузить
sf-pro-text-bold.eot	неизвестно
SF-Pro-Display-Bold.otf	327 КБ	Файл шрифта	загрузить
sf-pro-text-bold.woff 1 5 9 0015

Визуализация Варианты шрифтов SF — блог Джима Нильсена

Недавно я посмотрел видео Apple WWDC2022 «Познакомьтесь с расширенным семейством шрифтов San Francisco». В нем Винченцо рассказывает о дизайне новых семейств шрифтов Apple San Francisco и о том, как вы можете использовать эти новые вариации в своих проектах, чтобы обеспечить акцент, контраст и стиль.

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

В какой-то момент он показывает слайд, на котором в сетке отображается набор символов «а» в различных семействах и весах. Ось X обозначает семейство (Обычный, Сжатый, Расширенный и т. д.), а ось Y обозначает вес (Обычный, Жирный, Светлый и т. д.). Это «стилистическая карта» шрифта San Francisco. Он объясняет:

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

Что меня действительно интригует, так это визуализация, сопровождающая его презентацию.

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

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

Если меня это не устраивает, я могу перейти к просмотру списка семейств вверх или вниз:

В конечном счете, у меня в голове есть две отдельные одномерные шкалы, из которых я поочередно выбираю.

Теперь вы можете понять, почему размещение этих опций в двухмерной сетке было для меня таким интригующим: она визуализирует концепцию, которую я когда-либо постиг интуитивно — вот что делает отличный графический дизайн!

У вас есть двумерная сетка вариантов стилистического шрифта.

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

В то время как внешние края сетки представляют собой более экстремальные варианты дизайна, придающие большую выразительность и привлекающие больше внимания.

Это визуальное изображение иллюстрирует спектр выбора типа. Чем резче вы будете переходить от семейства к вариациям веса, тем больше контраста и визуального акцента проявится в ваших проектах.

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

Чем дальше вы пересекаете ячейки, тем больше совпадений будет в вашем тексте.

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