Шрифты, которые использует Apple
Каждая реклама 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, iPhone 4S, новый iPad — используется более резкая и четкая версия шрифта — Helvetica Neue.
Как выглядит шрифт San Francisco
В закладки
Компания Apple готовится представить новую версию операционной системы OS X – 10.11. Среди ряда улучшений особого внимания заслуживает использование нового системного шрифта. Не будем ждать официальной презентации, примерим его прямо сейчас.
Новость о том, что OS X 10.11 (а вместе с ней и мобильная версия iOS 9) получит новый системный шрифт несколько забавляет пользователей и полностью обескураживает разработчиков ПО под платформу Mac. Ведь в случае полного перехода Apple на шрифт “San Francisco” разработчиков ждет утомительный процесс по разметке интерфейса своих приложений. Что ж, видимо «политика постоянства» переменилась на политику «ненужных разработок» и вариантов два: либо мы с вами скептики, либо Apple действительно работает не над тем, чего бы хотел пользователь.
Apple и шрифты
История любви компании к шрифтам началась еще со времен ее основания. И свою склонность к каллиграфии Стив Джобс проявил при разработке логотипа. Тогда гордое имя бренда Apple Computer было написано шрифтом Motter Tektura, разработанном в 1975 году австрийским дизайнером Отмаром Моттером.
Выбор в пользу Motter Tektura пал в связи с его новаторством и «технологичным видом». В 1984 году на рынок выходит компьютер Macintosh, а столь важное событие было встречено использованием совершенно нового (в рамках компании) шрифта Apple Garamond. Оригинальный ITC Garamond был создан в 1977 году Тони Станом. Его особенностью стало высокая степень плотности (порядка 60-70% по сравнению с традиционным шрифтами).
Именно это и пришлось по душе Apple. Знаменитый лозунг компания «Think different» – «Думай иначе», как и ряд рекламных проспектов Apple исполнялся при помощи шрифта Apple Garamond. Вплоть до выхода Mac OS X 10.3 Apple Garamond поставлялся отдельно в составе дизайнерского пакета шрифтов.
В 2002 году компания принимает решение сменить декорации и в качестве основного шрифта выбирает семейство Adobe Myriad. Над ним работали сразу два дизайнера – Роберт Слимбах и Кэрол Твомбли по заказу Adobe.
Вся текстовая информация, сопутствующая выходу таких продуктов как iPod Photo, iPod 5-го поколения, iPod Nano (1-2 поколение), оформлялась с использованием собственной модификации шрифта Myriad – Podium Sans (с характерным написанием букв «M» и «Y»).
Все итерации операционной системы Mac OS X, позднее получившей имя OS X, (с 1999 по 2014 год) получали от разработчиков один и тот же системный шрифт – Lucida Grande. С выходом юбилейной OS X 10.10 Yosemite компания решила подарить пользователям и новый шрифт. Helvetica Neue уверенно вошел в жизнь маковода. Несмотря на ряд сходств, Helvetica Neue, по мнению дизайнеров Apple, является более экономным по распределению на горизонтальной строке.
Шрифт Helvetica Neue был разработан еще в дни зарождения компьютерной эры швейцарским типографом Максом Мидингером в далеком 1957 году в Базеле (Швейцария). Изначально шрифт получил имя Neau Haas Grotesk в честь древней типографической фабрики Haas’sche Schriftgiesserei. В 1960 был переименован в привычный Helvetica, что дословно переводится как «швейцарский». Компания Apple в качестве основы для системного шрифта в OS X Yosemite выбрала шрифт Helvetica Neue, разработанный в начале 1983 года.
Но не успели глаза пользователей за год привыкнуть к «новому швейцарскому», как дизайнеры знакомят нас новым начертанием букв. В недавно представленной новинке Apple Watch используется шрифт семейства San Francisco. Он кажется вам знакомым? Вы не ошиблись. Именно с San Francisco красуется на раскладке нового 12-дюймового MacBook.
Проблематика такого вынужденного перехода компании на новый шрифт заключается не только в желании компании унифицировать интерфейс всех операционных систем, созданных для разного типа устройств Apple, но и в выборе универсального шрифта. Ведь за свою более чем 50-летнюю историю Helvetica перестал быть тем элегантным, совершенным и рациональным шрифтом, который создавался швейцарскими дизайнерами.
Слабые стороны Helvetica Neue:
- расширение буквенного начертания всего семейства;
- видоизмененная толщина шрифта;
- несовершенный алгоритм закругления внутрибуквенного просвета;
- постоянные адаптации под линотипы (полиграфическое оборудование) привели к тому, что шрифт стал «слишком квадратным».
Вынужденные компромиссы, на которые шли дизайнеры во благо технологий, превратили шрифт из произведения искусства в бездушный набор схожих букв и цифр со схожими признаками. В конце-концов Apple решила вернуться к истокам и остановить свой выбор на разработанном более 30 лет назад и используемом на первых компьютерах Macintosh шрифте San Francisco. Шрифт специально разрабатывался внутри компании NeXT, одним из самых талантливых дизайнеров Сюзанной Каре. Оригинальный San Francisco разительно отличается от того, что используется сегодня в смарт-часах Apple Watch. 
Первый шрифт San Francisco от Apple San Francisco 2014 года – это совершенно новое семейство шрифтов, специально разработанное внутри компании для носимых аксессуаров. 
Правильно уплотненные буквы, одновременно остаются читабельными и в тоже время не занимают слишком много места на горизонтальной строке. При создании шрифта Apple переработала начертания всех букв и уделила немало внимания знакам пунктуации. Итак, новый шрифт San Francisco готовится и к порабощению платформ OS X и iOS. Что ж, давайте посмотрим, как он будет выглядеть?
Замена шрифта
Итак, давайте заменим стандартный шрифт Helvetica Neue на тот, который в новой версии операционной системы готовит нам Apple.
-
1. Загрузите шрифт San Francisco.
2. Откройте Finder, зажмите комбинацию клавиш Command+Shift+G и укажите следующий адрес:
-
~/Library/Fonts/
3. Нажмите Enter. 
4. Разархивировав скачанный архив, скопируйте содержимое папки в открытую директорию Fonts.
5. Выполните перезагрузку Mac.
После загрузки OS X Yosemite системный шрифт будет изменен: 
Увы, адаптация кириллицы пока оставляет желать лучшего, а вот латиница смотрится действительно аккуратно и убедительно. Чтобы вернуть системный шрифт на привычный Helvetica Neue из директории ~/Library/Fonts/ просто удалите скопированные ранее шрифты и перезагрузите Mac. —>
(1 голосов, общий рейтинг: 4.00 из 5)
�� Хочешь ещё? Читай больше в Telegram
�� Ищешь ответ на вопрос? Приходи на Форум
Компания Apple готовится представить новую версию операционной системы OS X – 10.11. Среди ряда улучшений особого внимания заслуживает использование нового системного шрифта. Не будем ждать официальной презентации, примерим его прямо сейчас. Новость о том, что OS X 10.11 (а вместе с ней и мобильная версия iOS 9) получит новый системный шрифт несколько забавляет пользователей и.
Как называется шрифт на айфоне
Apple предоставляет два семейства шрифтов, которые вы можете использовать в своих приложениях для iOS.
San Francisco (SF). San Francisco — это семейство без засечек, которое включает в себя SF Pro, SF Pro Rounded, SF Mono, SF Compact и SF Compact Rounded. SF Pro — системный шрифт в iOS, macOS и tvOS; SF Compact — системный шрифт в watchOS. Системные шрифты разработаны с учетом визуальной четкости пользовательских интерфейсов платформы, они разборчивы и нейтральн.
New York (NY). New York — это шрифт с засечками, который имеет уникальный тон, разработанный для дополнения шрифтов SF. NY работает одинаково хорошо как в контексте графического отображения (при больших размерах), так и в контексте чтения (при размерах текста).
Вы можете скачать шрифты Сан-Франциско и Нью-Йорка здесь .
Поскольку SF Pro и NY совместимы, существует множество способов использовать типографский контраст и разнообразие в интерфейсе iOS, сохраняя при этом единообразный внешний вид. Например, использование шрифтов может помочь вам создать более сильные визуальные иерархии или выделить смысловые различия в контенте.
Разработанные Apple шрифты поддерживают широкий диапазон размеров, стилей и языков, поэтому вы можете создать приятное впечатление от чтения во всем приложении. Когда вы используете стили текста с системными шрифтами, получаете поддержку динамического типа и больших размеров для настроек специальных возможностей, которые позволяют людям выбирать подходящий для них размер текста. Таблицы динамических размеров шрифтов можно загрузить в Sketch, Photoshop и Adobe XD Apple Design Resources для iOS.
Система имеет API, которое упрощают использование шрифтов SF и NY; для руководства разработчика, см withDesign метод и структуру SystemDesign из UIFontDescriptor .
SF Pro и SF Compact
Гибкость системных шрифтов помогает добиться оптимальной разборчивости при любом размере и предоставляет широту, глубину, необходимую для точного набора текста во всем приложении.
Поддержка SF Pro и SF Compact:
- Более ста языков с использованием латинского, греческого и кириллического алфавита
- Девять настроек толщины — от сверхлегкого до черного — как вертикальные так и в курсивyst
- Два оптических размера — текст и дисплей
- Переменный межбуквенный интервал, который автоматически корректируется в зависимости от размера текста
- Маленькие прописные, дробные, маленькие и большие цифры
SF Pro Rounded и SF Compact Rounded
Округлый вариант системных шрифтов может помочь согласовать стиль текста с появлением мягких и закругленных элементов пользовательского интерфейса или применить альтернативный типографский стиль.
SF Pro Rounded и SF Compact Rounded поддерживают:
-
Более ста языков с использованием латинского, греческого и кириллического алфавита
SF Mono — это моноширинный вариант Сан-Франциско, то есть шрифт, в котором все символы имеют одинаковую ширину. Используется моноширинный шрифт, когда необходимо выровнять столбцы текста, например, в среде кодирования. Xcode и Swift Playgrounds по умолчанию используют SF Mono.
ПРИМЕЧАНИЕ
SF Pro использует функцию табличной подкладки OpenType для поддержки отображения моноширинных чисел и валют.
SF Mono поддерживает:
-
Более ста языков с использованием латинского, греческого и кириллического алфавита
New York — это классический шрифт с засечками, который вы можете использовать в интерфейсе или для традиционного чтения.
-
Более ста языков с использованием латинского, греческого и кириллического алфавита
Выбор шрифтов для улучшения вашего приложения
По возможности используйте встроенные текстовые стили. Встроенные текстовые стили позволяют выразить контент визуально, сохраняя при этом оптимальную разборчивость. Эти стили, в том числе заголовок, текст, сноска и заголовки нескольких размеров, основаны на системных шрифтах и позволяют использовать преимущества ключевых типографских функций, таких как динамический тип, который автоматически настраивает каждый шрифт. Руководство разработчика см. в разделе UIFontTextStyle .
Сделайте акцент на важной информации. Используйте толщину, размер и цвет шрифта, чтобы выделить наиболее важную информацию в вашем приложении.
Приоритезируйте содержимое при реагировании на изменения размера текста. Не весь контент одинаково важен. Когда пользователь выбирает больший размер, он хочет сделать контент, который ему важен, легче для чтения. Это не значит, что каждое слово на экране должно быть больше.
Используйте правильный вариант шрифта в макетах интерфейса. Когда вы используете San Francisco для текста в стандартных элементах управления, таких как кнопки и метки, iOS автоматически применяет наиболее подходящий вариант на основе размера точки и текущих настроек доступности. В макетах интерфейса используйте следующие размеры текста, чтобы выбрать правильный размер и при необходимости отрегулировать расстояние между буквами.
-
Для SF используйте Текст для текста, который меньше 20 точек; используйте Дисплей для текста размером 20 или больше.
ПРИМЕЧАНИЕ
iOS использует San Francisco в качестве системного шрифта для букв латинского, греческого и кириллического алфавита, а также множество других шрифтов для других сценариев.
Минимизируйте количество шрифтов, которые вы используете в вашем интерфейсе. Смешивание слишком большого количества разных шрифтов может сделать ваше приложение фрагментарным и небрежным.
Убедитесь, что пользовательские шрифты разборчивы. Пользовательские шрифты поддерживаются в iOS, оданко их сложно прочитать, особенно если они имеют стилистические атрибуты, которые затрудняют различение букв при отображении в небольших размерах. Если ваше приложение не нуждается в особом шрифте,например, для целей брендинга или для создания захватывающего игрового процесса, лучше придерживаться системных шрифтов. Попробуйте использовать собственный шрифт только для отображения текста; если вы используете его для чтения или интерфейса текста, убедитесь, что он читается даже при небольших размерах.
Реализуйте специальные возможности для пользовательских шрифтов. Системные шрифты автоматически реагируют на такие специальные возможности, как полужирный текст и крупный шрифт. Реализуйте такое же поведение в приложениях, которые используют пользовательские шрифты, убедившись, что функции специальных возможностей включены и регистрируя уведомления при их изменении. См. Размер и толщина текста.
| Назад: Терминология |
Дизайн для iOS: как выбрать размер шрифта (для iOS11)
Вы читаете «Размеры шрифта в UI дизайне: полное руководство».
Статьи по теме, которым ещё предстоит выйти: Введение · iOS · Android · Веб · Принципы
Создаёте дизайн приложения для iPhone или iPad и не знаете, какие размеры шрифтов лучше использовать? Тогда ловите мой конспект, который я быстренько сварганил для тех, кто (а) пользуется San Francisco — шрифтом Apple по умолчанию (или чем-то похожим) и (б) хочет придерживаться стиля iOS.
Типографика для iPhone: гайдлайны
Здесь я кратко описал стили, ниже найдете наглядные примеры и более подробные рекомендации.
Давайте подробно разберём каждый из элементов, да с примерами. Поговорим не только про то, какой кегль где использовать, но и в целом о том, как Apple стилизует тексты.
Заголовок
В iOS 10 используются массивные заголовки, вроде слова «Inbox» на картинке ниже — кегль здесь 34pt, и это самый крупный текст, который можно встретить на iPhone.
А вот при прокрутке заголовок уменьшается до 17pt — размера по умолчанию для тех текстовых кнопок и ссылок.
Обратите внимание, что заголовок сжимается до размера текста по умолчанию, однако тут у него бòльшая жирность и располагается он сверху по центру — ясно, что это заголовок. Для начинающего дизайнера Эрика (меня, то бишь) это стало откровением, потому что я всегда думал, что заголовок обязательно должен быть крупнее, чем обычный текст (а не просто жирнее по начертанию).
Списки
Списки — основа мобильных приложений. Даже не задумываешься, какие элементы — на самом деле списки, пока не поместишь их на узкий вертикальный экран. Давайте посмотрим:
В режиме списка — например, в электронной почте — iOS подаёт имя отправителя как текст стандартного размера (17pt), а тему письма и предпросмотр — как второстепенный текст, меньший по размеру (15pt). На этом стоит заострить внимание — когда я делал свои первые шаги в дизайне, меня тянуло сделать обратное: для основного текста установить размер по умолчанию, а имя отправителя сделать ещё больше. Видите тенденцию? В iOS кегль ведёт себя совсем не так, как можно было бы наивно ожидать.
В разделе настроек сами пункты написаны текстом по умолчанию, хотя заголовки внутренних разделов (напр. «AirDrop») — мельче (ничосе!). Но несмотря на то что заголовок меньше, он толще по начертанию, то есть всё же воспринимается как заголовок.
Хитро.
У подписей («AirDrop lets you share instantly. ») размер 13pt, самый маленький среди всех наших интерфейсных примеров.
Элементы управления
Давайте-ка взглянем на некоторые элементы управления.
Сейчас всё должно казаться уже достаточно понятным. Единственное, что может вызвать удивление — это сегментированная кнопка, текст на которой размером 13pt (кажется, что маловато). Я так подозреваю, Apple посчитал, что раз уж какие-то из этих кнопок будут выполнять несколько функций, то шрифт на них по умолчанию должен быть более мелким, даже если функции всего две.
Параметры текста в поисковой строке — значения размера и жирности — стоят по умолчанию, а вот цвет текста бледный, и меняется, когда начинаешь вводить запрос.
Модальные окна
Этот небольшой попап отлично иллюстрирует то, как в Apple оформляют тексты.
- Размер заголовка: по умолчанию. Он может показаться недостаточно крупным, но мы о таком уже говорили выше. Жирное начертание компенсирует небольшой размер.
- Размер пояснительного текста: 13 pt. Я предполагал, что он будет 15 pt, как и размер основного текста в электронных письмах, но, может, они просто захотели уместить тут текст в одну строку?
- Размер текста при вводе пароля: 13 pt. Это было бы слишком мелко для ввода стандартного текста, но — как я подозреваю — здесь вы всё равно увидите только ряд чёрных точек, потому не столь важно, какого они размера.
- Размер текста для слов «OK» и «Cancel»: по умолчанию , однако так как все надеются, что вы нажмёте на «OK», Apple чуточку больше обращает ваше внимание именно на это слово, дав ему более жирное начертание.
В размерах прослеживается четкая иерархия, тут можно почерпнуть несколько приёмов стилизации текста, но не обошлось и без странных несостыковок.
Панель действий
И вот мы наконец добрались до панели действий (action bar), которая находится в нижней части экрана. Нигде больше в интерфейсе я не встречал настолько мелкого кегля — 10 pt. Я бы оставил такой мелкий шрифт на самый крайний случай.
Типографика для iPad: гайдлайны
На момент написания этой статьи (весна 2018) плотность пикселей у iPad была в целом ниже, чем у iPhone. Это значит, что элемент на iPad будет отображаться слегка больше, чем на макете или в приложении на iPhone. По этой причине большинство кеглей не разнится между айфонами и айпадами. Если вы работаете над дизайном для iPad-приложения, почитайте раздел про iPhone по тексту выше.
Как я говорил, самая большая разница здесь в заголовках. Пространства на экране айпада больше, и идеальный размер кеглей остаётся идеальным, однако в вашем распоряжении гораздо больше пространства (чем на айфонах) для того, чтобы сделать заголовки крупнее.
Итак, пока в одних приложениях до сих пор используется айфоновский стиль заголовков с размером 17pt:
В других он крупнее.
В паре-тройке нативных приложений используется самый жирный по начертанию шрифт SF — очень жирный. Я считаю, что это подлинная «iPad-версия» айфоновских жирных заголовков, однако дизайнеры Apple странным образом неконсистентны в их использовании.
Многие нативные iPad-приложения придерживаются стиля айфон-дизайна и кегля в 10 pt в нижних таб-барах. Выше пример музыкального приложения с нетипичным меню и размером текста 17 pt. Мне кажется, что лучше «переводить» дизайн на более крупный экран именно так.
В целом, работа iPad подразумевает следование стилям iPhone, работая с большим пространством — можно креативить в заголовках и шапках.
Шрифт San Francisco: гайдлайны
В iOS шрифт по умолчанию — San Francisco. Его можно скачать бесплатно здесь. Использовать этот шрифт при создании iOS-приложения не обязательно, но если вы хотите приблизить свой дизайн к интерфейсу iOS, то без него не обойтись.
Конечно же, у Apple есть свод дополнительных правил для использовании San Francisco.
Во-первых, используйте SF Pro Display с кеглем 20 или больше. SF Pro Text используйте только для основного текста и тех, что мельче.
Во-вторых, задумано, что в San Francisco у символов разная разрядка при разных размерах шрифта. Поэтому если вы хотите идеально сымитировать «стиль iOS», то, прошу, вот несколько вариантов:
- Вручную настройте разрядку символов в зависимости от выбранного размера шрифта, следуя по таблице ниже
- Берите стили текста прямо из Apple iOS UI Design Sketch (слэш Photoshop слэш XD) library
- Воспользуйтесь удобным плагином Sketch для автоматической и точной настройки расстояния между символами в SF в зависимости от размера шрифта.
Или просто не обращайте внимание на то, что Apple просит вас снизить разрядку символов на сотую пикселя. Но выбор за вами: либо вступать в игру, либо нет.
San Francisco является шрифтом по умолчанию для iPhone и iPad. Поэтому если вы им пользуетесь, лучше знать обо всех этих ограничениях. С другой стороны, вам, конечно, никто не запрещает создавать приложения iOS с использованием любого другого шрифта. Будьте осторожны: другой шрифт может оказаться крупнее или мельче, он может хуже читаться, даже если будет того же размера.