Какой шрифт используется в ios. Как подобрать шрифты для iOS-приложения

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

Фирменный стиль

Для всех рекламных материалов на сайте Apple.com, даже для надписи, которая нанесена блестящими буквами на коробку от вашего нового «айГаджета», Applе использует один из вариантов шрифта Myriad, так называемый Myriad Pro SemiBold. Myriad, шрифт без засечек, изначально был придуман в 1992 году компанией Adobe. Сегодня этот шрифт используется не только Apple, но и Google (например, последние три буквы в слове «Gmail»), LinkedIn, Rolls-Royce и Walmart. Сама «яблочная» компания начала использовать Myriad в 2002 году.

До 2002 года Apple практически повсеместно использовала измененный вариант шрифта Garamond. Этот вариант получил название Apple Garamond и, возможно, лучше всего этот шрифт все помнят благодаря знаменитой рекламной кампании Apple под названием «Think Different». Он также использовался для всех знаков, табличек и меток в здании кампуса Apple в Купертино (теперь все надписи переделаны под шрифт Myriad). Garamond был введен наряду с оригинальным Mac в 1984 году. А вот до 1984 года Apple использовала шрифт Motter Tektura, который применялся для всех своих продуктов. Motter Tektura также много лет использовался в создании логотипа компании Reebok.

Но в маркетинговых материалах текст слишком мал, чтобы использовать для него Myriad, поэтому в них используется шрифт Helvetica Nueu.

Клавиатуры

Для всех своих физических клавиатур Apple использует шрифт VAG Rounded. Если вы читаете эту статью на iMac или на любой модели MacBook, посмотрите вниз на клавиши и вы увидите VAG Rounded. Первоначально шрифт был разработан специально для использования компанией Volkswagen и признавался именно за его отчетливые и закругленные концы. VAG Rounded дебютировал на клавиатурах Apple в 1999 году и произошло это на клавиатуре оригинального ноутбука iBook. После этого Apple начала применять такой шрифт для клавиатуры на всех своих ноутбуках, а вот клавиатуры Mac присоединились к использованию VAG Rounded только в 2007 году.

Перед использованием шрифта VAG Rounded на клавиатурах Apple использовался вариант Univers, а если быть точнее — Univers 57. Те пользователи, кто давно знаком с компьютерами Apple, скорее всего, помнят этот шрифт за его стройный и наклонный вид.

Пользовательские интерфейсы

Во всех версиях Mac OS X для создания элементов пользовательского интерфейса Apple использовала шрифт Lucida Grande. Семейство шрифтов Lucida появилось еще в 1985 году и в настоящее время используется в качестве основного шрифта для текстовых документов и на многих веб-сайтах. Такая распространенность обусловлена легкой читаемостью текста. Кстати, этот шрифт для своего логотипа использует социальная сеть Facebook.

А вот на своих iOS-устройствах для всех элементов пользовательского интерфейса, в том числе для названия приложений, меню и виртуальной клавиатуры, Apple использует шрифт Helvetica. А для iOS-устройств с дисплеем Retina, а именно — iPhone 4, новый iPad — используется более резкая и четкая версия шрифта — Helvetica Neue.

По материалам www.applegazette.com

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

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

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

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

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

Два подхода

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

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

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

Font: menu;

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

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

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

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

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

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

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

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

Font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

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

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

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.
• В менее популярных операционных системах и более сложных конфигурациях правильный выбор корректного шрифта еще более затруднен.

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

Font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

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

• -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. (

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

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

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

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

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

Малые размеры - слабое место Helvetica

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

“Helvetica sucks” из блога Erik Spiekermann.

В малой читабельности Helvetica вы можете убедиться следующим образом. Наберите текст малого размера и «размойте» его. Некоторые его фрагменты при этом «смешаются» так, что разобрать их содержимое станет сложно. Говорят, Apple разработала семейство San Francisco как раз для того, чтобы сделать текст малого размера в Apple Watch более разборчивым.

Однако разрешение современных умных устройств превышает разрешение печатного издания, и тексты в iPhone далеко не всегда также малы как в Apple Watch. Почему тогда Apple произвела замену не только в Apple Watch, но и в iOS and Mac OS X?

San Francisco - разнообразен

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

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

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

В добавок к этому, каждое из семейств подразделяются еще на два подсемейства: “Text” и “Display”. В Apple это называют “Optical Sizes”. Подсемейство Text предназначены для текстов малого размера, тогда как Display - для больших размеров.

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

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

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

Сравнение шрифтов подсемейств Display и Text на примере отдельного символа

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

San Francisco динамичен

Одна из замечательных особенностей San Francisco заключается в том, что гарнитура оптимизируется динамически. Display и Text заменяют друг друга в соответствии с размером отображаемого текста. В качестве порога здесь определен размер 20pt.

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

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

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

San Francisco пришел к нам из цифровой эпохи

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

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

San Francisco же, напротив, является шрифтом современным. Его гарнитура меняется динамически, в соответствии с контекстом. Его можно назвать своего рода «родным шрифтом» цифровой эпохи.

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 — современный шрифт. Он динамично меняет начертания в соответствии с контекстом. Это что-то вроде «родного» шрифта, будто бы специально созданного для надвигающейся цифровой эры.