Тайната зад новия шрифт San Francisco на Apple. Използване на системни интерфейсни шрифтове в уеб дизайна

Helvetica (вляво), Сан Франциско (вдясно)

Шрифтът San Francisco вече се използва в Apple Watch и се превърна в шрифт по подразбиране за устройства на Apple: Apple Watch, iPhone, iPad и 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 sucks“ от Ерик Шпикерман

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

Буквите са смесени в текстове с малък размер

Но днес разделителната способност на екрана на устройството е по-голяма от тази на печатните материали и текстовете на iPhone не винаги са толкова малки, колкото на Apple Watches. Защо 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 са разделени на две подсемейства: „Текст“ и „Дисплей“. Това са точно това, което Apple нарича "оптични размери". „Текст“ е за текстове в по-малък размер, а „Показване“ за текстове в по-голям.

Семейство от Сан Франциско

Както споменах по-горе, когато използвате гротескни (безсерифни) шрифтове като Helvetica, две съседни букви се „сливат“ и букви като „a“, „c“, „s“ изглеждат подобни в малък размер.

Шрифтове "Дисплей" и "Текст"

Подфамилията „Текст“ има повече полета от подфамилията „Дисплей“. И отворите на тези текстови шрифтове също са по-широки, така че малкият размер на точката е по-четлив.

Шрифтовете San Francisco са динамични

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

Дизайнерите и специалистите вече не трябва да се озадачават кой шрифт да изберат. Например, просто добавете системния шрифт към UILabel и устройството ще избере подходящия шрифт за вас.

Това, което ме изумява при шрифтовете на Сан Франциско, е как се показват двоеточията. По принцип двоеточието се поставя директно над линията на шрифта, така че не е вертикално центрирано, ако е между числа. А в шрифтовете на San Francisco двоеточията се подравняват автоматично.

Вертикално центрирано дебело черво

San Francisco е шрифт за дигиталната ера

Както можете да видите, шрифтовете на San Francisco са внимателно обмислени, за да бъдат лесни за четене във всякакъв размер и на всяко устройство.

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

От друга страна, San Francisco е модерен шрифт. Той динамично променя стиловете според контекста. Това е нещо като "роден" шрифт, сякаш специално създаден за предстоящата дигитална ера.

San Francisco е шрифт от Apple, който за първи път беше представен на публиката в края на 2014 г. До този момент компанията използва шрифта " ", който според Apple е имал слаби странис оглед на лошата четливост на малкия текст.

Сега цялата линия продукти на Apple уверено се държи. собствен шрифт"Сан Франциско", който можете да изтеглите безплатно под тази статия. Семейството "Сан Франциско" е разделено на две подфамилии, това са "Текст" и "Дисплей". Разликата е в по-голямото разстояние между буквите при първия вариант. Тази характеристика дава на подфамилията най-добрата четливост на малки размери на шрифта и именно този тип се използва на малки устройства от компания като iWatch.

Без съмнение има поддръжка за кирилица (руски), както и за английски.

Безплатно изтегляне на шрифта "San Francisco"

Архивът, който можете да изтеглите в края на статията, съдържа 21 стила (почти половината за всяко подсемейство) в три различни формата.

подсемейство " Текст" - то: Удебелен, Удебелен курсив, тежък, плътен курсив, Курсив, светлина, Светъл курсив, Среден, Среден курсив, Редовен, Полудебели Полудебел курсив.

От своя страна подсем дисплей' са очертанията: черен, Удебелен, тежък, светлина, Среден, Редовен, Полудебел, тънъки ултра лек.

Забележкаче шрифтът е лицензиран от Apple, което означава, че имате право да го използвате в разработката софтуеркъм продукти на Apple, както и в екранни снимки на подобни продукти.

Запомнете това и успех в творческите начинания!

Apple използва набора от шрифтове Helvetica като системен шрифт за iOS от пускането на първия iPhone. Те също замениха Lucida Grande в Mac OS X, започвайки с версия 10.10 Yosemite. Така че защо сега Apple реши да се отърве от най-обичания шрифт в света?

iOS 9 вече е официално достъпен за всички, а ново семейство шрифтове, наречено San Francisco, неусетно замени Helvetica Neue.

Helvetica (вляво) и Сан Франциско (вдясно)

До този момент те вече са били използвани в Apple Watch. Сега San Francisco се превърна в единен стандартен шрифт за всички платформени продукти: Apple Watch, iPhone, iPad и Mac.

Apple използва семейството Helvetica като системен шрифт за iOS от пускането на първия iPhone. Те също замениха Lucida Grande в Mac OS X, започвайки с версия 10.10 Yosemite. Така че защо сега Apple реши да се отърве от най-обичания шрифт в света?

Малкият размер е слабото място на Helvetica

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

„Helvetica е гадна“ от блога на Ерик Шпикерман.

Можете да проверите ниската четливост на Helvetica по следния начин. Въведете малък текст и го размажете. В същото време някои от неговите фрагменти са „смесени“, така че става трудно да се анализира тяхното съдържание. Твърди се, че Apple е проектирала семейството от Сан Франциско само за да направи малкия текст на Apple Watch по-четлив.

Разделителната способност на съвременните интелигентни устройства обаче надвишава резолюцията печатно издание, а текстът на iPhone не винаги е толкова малък, колкото на Apple Watch. Защо тогава Apple замени не само Apple Watch, но и iOS и Mac OS X?

Сан Франциско - Разнообразие

Шрифтовете San Francisco имат много функции, които ги правят лесни за четене. Всъщност версията San Francisco за Apple Watch и версията за iOS/Mac са два различни шрифта.

Семейството шрифтове, наречено „SF“, се използва за iOS/Mac, докато „SF Compact“ се използва за Apple Watch. Можете да видите разликата със заоблени букви като „o“ и „e“. Вертикалните линии в SF Compact са по-плоски, отколкото в SF.

Тази разлика кара текстът, въведен с SF Compact, да има повече отстъпи между знаците, което води до по-четлив текст при четене на малки устройства като Apple Watch.

В допълнение към това, всяка от фамилиите е подразделена на още две подфамилии: „Текст“ и „Дисплей“. Apple го нарича "Оптични размери". Подфамилията Text е за малки размери на текст, докато подфамилията Display е за големи размери на текст.

Семейство шрифтове San Francisco

Както бе споменато по-горе, в шрифтове sans serif (или sans serifs) като Helvetica, две съседни букви се „сливат“ и букви като „a“, „e“, „s“ стават много подобен приятеледин върху друг с малки размери на текста.

Сравнение на отстъпи между знаци в шрифтове от подсемействата Display и Text

Сравнение на шрифтове от подсемействата Display и Text на примера на един знак

В същото време подфамилията Text е замислена по такъв начин, че отстъпите между знаците в нея са увеличени в сравнение със знаците на подфамилията Display, а празнините в тях са разширени, за да се подобри четливостта при малки размери на текста.

Сан Франциско е динамичен

Едно от страхотните неща за Сан Франциско е, че слушалките са динамично оптимизирани. Дисплей и Текст се заменят взаимно според размера на показвания текст. Прагът тук е 20pt.

Дизайнерите и инженерите не трябва да се притесняват за избора на правилната опция от семейството. Ние просто добавяме системния шрифт към UILabel, например. Системата ще определи от кои слушалки се нуждаете.

Това, което е наистина впечатляващо при шрифтовете на Сан Франциско обаче, е как показват двоеточие. Обикновено в други шрифтове го виждаме точно над долния ред, така че в случаите, когато е между числата, двоеточието не е вертикално центрирано. В шрифтовете на San Francisco обаче това подравняване става автоматично.

Автоматично подравняване на двоеточие вертикално центрирано

Сан Франциско дойде при нас от дигиталната ера

Както можете да видите, шрифтовете на San Francisco са проектирани и проектирани да бъдат лесно четими от текст с всякакъв размер и на всяко устройство.

Helvetica, която те заменят, е създадена в Швейцария през 1957 г., когато все още не е имало цифрови устройства. Той обаче все още се използва от много компании като корпоративен шрифт и без съмнение ще продължи да се използва като добър класически шрифт в бъдеще.

San Francisco, от друга страна, е модерен шрифт. Шрифтът му се променя динамично, в зависимост от контекста. Може да се нарече един вид "роден шрифт" на дигиталната ера.

Сега, може би за първи път от първия Macintosh, има смисъл да се интересувате от използването на системни шрифтове за интерфейса. Те са интересна и свежа алтернатива на уеб типографията - и не изискват хостинг нито на вашия сървър, нито на трета страна. Как могат да се използват системни шрифтове на сайта и какви проблеми могат да възникнат тук?

AT последните годиниима много интересни системни шрифтове за интерфейса. Google пусна Робото(и продължава да развива шрифта с редовни актуализации), Apple пусна San Francisco, а дизайнерът Eric Spiekerman създаде шрифта Fira Sans за Mozilla. И това не е всичко, не забравяйте за Microsoft. Именно те започнаха тази тенденция, като пуснаха Windows телефонс дизайнерския език на Metro, силно обвързан с типографията като цяло и Segoe в частност.

Не е изненадващо, че идеята за използване на тези шрифтове в мрежата набира популярност. Може би искате да подчертаете повече разликата между съдържанието и потребителския интерфейс, може би искате да направите сайта да изглежда като приложение или просто искате да използвате красиви шрифтовебез никакво забавяне.

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

Забележка: "системен интерфейсен шрифт" е шрифтът, използван за изобразяване на интерфейса на операционната система - не го бъркайте със системните шрифтове, т.е. шрифтовете, инсталирани в системата на потребителя.

Два подхода

На този моментИма два начина за използване на системен интерфейсен шрифт в типографията.

Първи начин

Състои се в използването на кратка „магическа“ CSS декларация:

Шрифт: меню

Втори начин

Вторият начин е да изброите имената на всички шрифтове:

Има и недостатъци:

Други възможности

Може да ви се стори интересно да комбинирате и двата горни подхода, за да постигнете най-добър резултат. Уви, това не е лесно, защото свойствата на шрифта и семейството на шрифта са взаимно изключващи се - едното винаги отменя другото. Възможно е да получите нещо чрез манипулиране на медийни заявки, но този метод е от категорията на хаковете.

Можете също да опитате да изпратите различни значения CSS от сървъра в зависимост от потребителския агент или направете същото с JavaScript (например изпращайте само семейство шрифтове: „Fira Sans“, sans-serif; за Firefox OS). Но тази опция е тромава, трудна за поддръжка и, най-важното, не решава всички проблеми.

Какво да правим сега?

В момента Medium използва втория метод:

Семейство шрифтове: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;

Избрано е, защото има по-малко големи проблеми. (Първият метод не работи на мобилни устройства, с напълно неприемливи последици; вторият метод също има проблеми, но те са по-малко и не толкова критични. Вашата оценка за тези методи може да е различна).

Можем да подобрим тази техника заедно. По-долу има блок с текст, който трябва да се показва в интерфейсния шрифт на вашата система. Ако това не работи или имате някакви мисли по този въпрос, моля, оставете коментар.

Това трябва да бъде изобразено в шрифта на потребителския интерфейс на вашата система. Бързата кафява лисица прескача мързеливото куче. Този текст трябва да се показва в шрифта на системния интерфейс.

Подробен изглед на списъка с шрифтове

В момента този метод има следните проблеми:

Поне до декември 2015 г. Firefox на Mac OS X ще използва Neue Helvetica вместо San Francisco.
Също така в Mac OS X, Neue Helvetica се показва вместо Lucida Grande във версии преди Yosemite.
В по-малко популярните операционна системаи по-сложни конфигурации правилен изборправилният шрифт е още по-труден.

Ако се интересувате от подробности, нека да разгледаме как трябва да изглежда този списък, за да работи правилно:

Семейство шрифтове: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;

Първата група съдържа свойства, отнасящи се до шрифтовете на системния интерфейс. Те са доста надеждни и няма шанс браузърът да ги обърка с други:

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

AT следващата групаизвестните шрифтове на системния интерфейс са маркирани:

Segoe UI обхваща Windows и Windows Phone.
Roboto е Android и новата Chrome OS. Той е позициониран след потребителския интерфейс на Segoe, за да позволи на разработчиците на Android да работят с Windows с инсталиран Roboto, така че Roboto да не замества потребителския интерфейс на Segoe.
Oxygen е шрифт на KDE, Ubuntu разбира се Ubuntu, а Cantarell е GNOME. Три шрифта за Linux наведнъж, но предвид изобилието от дистрибуции, те не решават проблема.
Шрифт Fira Sans Firefox OS.
Droid Sans - стари версии на Android.
Имайте предвид, че не посочваме името на шрифта San Francisco. В iOS и Mac OS X San Francisco присъства като „скрит шрифт“, а не като публичен шрифт.
И също така не посочваме Сан Франциско с помощта на .SFNSText-Regular, вътрешното име на PostScript за Сан Франциско на Mac OS X. То работи само в Chrome и е по-малко гъвкаво от BlinkMacSystemFont.

В третата група имаме шрифтовете, използвани като резервни:

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

Еволюцията на шрифтовете на системния интерфейс на Windows е по-драматична, отколкото на Mac - от еднопространствения растерен шрифт на Windows 1.0 през 1985 г. до висока резолюция Segoe UI в 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). Логично е да се предположи, че Сан Франциско ще се използва в следващите версии. (