Типографика — iOS — Human Interface Guidelines

Human Interface Guidelines

Human Interface Guidelines

Privacy

Типографика

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
  • Два оптических размера — текст и дисплей
  • Переменный межбуквенный интервал, который автоматически корректируется в зависимости от размера текста
  • Маленькие прописные, дробные, маленькие и большие цифры

Для руководства разработчика см. cвойство по умолчаниюструктуры SystemDesign.

SF Pro Rounded и SF Compact Rounded

Округлый вариант системных шрифтов может помочь согласовать стиль текста с появлением мягких и закругленных элементов пользовательского интерфейса или применить альтернативный типографский стиль.

SF Pro Rounded и SF Compact Rounded поддерживают:

  • Более ста языков с использованием латинского, греческого и кириллического алфавита
  • Девять настроек толщины — от сверхлегких до черных
  • Переменный межбуквенный интервал, который автоматически корректируется в зависимости от размера текста
  • Маленькие прописные, дробные, маленькие и большие цифры

Для руководства разработчика, см свойства закругления в SystemDesign structure.

SF Mono

SF Mono — это моноширинный вариант Сан-Франциско, то есть шрифт, в котором все символы имеют одинаковую ширину. Используется моноширинный шрифт, когда необходимо выровнять столбцы текста, например, в среде кодирования. Xcode и Swift Playgrounds по умолчанию используют SF Mono.

ПРИМЕЧАНИЕ

SF Pro использует функцию табличной подкладки OpenType для поддержки отображения моноширинных чисел и валют.

SF Mono поддерживает:

  • Более ста языков с использованием латинского, греческого и кириллического алфавита
  • Шесть настроек толщины — от легкой до сильной — как в обычном варианте, так и курсивом
  • Моноширинный интервал по всем толщинам (то есть изменение толщины шрифта не приводит к переформатированию текста)

Для руководства разработчика, см моноширинные свойства в SystemDesign structure.

New York

New York — это классический шрифт с засечками, который вы можете использовать в интерфейсе или для традиционного чтения.

NY поддерживает:

  • Более ста языков с использованием латинского, греческого и кириллического алфавита
  • Шесть настроек толщины — от обычного до черного — как в обычном варианте, так и курсивом
  • Четыре оптических размера — маленький, средний, большой и очень большой
  • Переменный межбуквенный интервал, который автоматически корректируется в зависимости от размера текста

Для руководства разработчика, см serif property в SystemDesign structure.

Выбор шрифтов для улучшения вашего приложения

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

Сделайте акцент на важной информации. Используйте толщину, размер и цвет шрифта, чтобы выделить наиболее важную информацию в вашем приложении.

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

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

  • Для SF используйте Текст для текста, который меньше 20 точек; используйте Дисплей для текста размером 20 или больше.
  • Для New York используйте Маленький для текста, который меньше 20 пунктов, Средний для текста от 20 до 35 пунктов, Большой для текста от 36 до 53 пунктов и Очень большой для текста размером 54 или более точек.

ПРИМЕЧАНИЕ

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

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

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

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

Назад: Терминология
Далее: Видео

История Apple в шрифтах | AppleInsider.

ru

Известно, что Apple всегда очень скрупулезно относится к дизайну даже самых мельчайших деталей своих устройств. Поэтому вряд ли можно назвать сенсационной новостью тот факт, что Apple за все время своего существования постоянно меняет шрифты не только внутри операционных систем, но и даже в сфере маркетинга, то есть при оформлении своей рекламной кампании. Но какими же именно средствами оформления текста пользовалась компания в разные периоды своей истории? Именно это мы сейчас и узнаем. Итак, приступим!


Начнем мы, пожалуй, с самой главной детали любой компании — логотипа. Вряд ли есть кто-то в наше время, кто не знает белого надкусанного яблока, но раньше все было по-другому. Самый первый Macintosh был выпущен компанией под логотипом «Apple computer Inc.» — надписью, выполненной белыми буквами на красном фоне (конечно же, не без яблочка рядом).

Так вот, именно эта надпись — использование шрифта под названием «Motter Tektura», получившего свое название в честь австрийского дизайнера Моттера, который его и придумал в 1975 году. Чтобы вам было понятно, как именно он выглядит, посмотрите на эмблему Reebok, на само оформление надписи, так как она написана именно шрифтом Motter Tektura.

Еще одним исторически важным шрифтом является гарнитура, придуманная Тони Стэном в 1977 году и получившая название Apple Garamond. Apple начала использовать этот шрифт вместе с выходом Macintosh в 1984 году, предварительно сжав его на 80% от оригинального размера. Именно им написаны большинство слоганов компании, например, всем известные два слова: «Think Different».

В 2002 году Apple стала использовать еще один шрифт, также известный нам благодаря другой компании. Так, Роберт Слимбах и Кэрол Тумблей спроектировали новый способ оформления текста «Myriad» специально для компании Adobe, о которой мы очень хорошо наслышаны не только благодаря её профессиональным программам, таким как PhotoShop, но и повседневным продуктам Flash Player и Reader. Именно этот шрифт компания Apple стала использовать на упаковке, немного его модифицировав.

Пятью годами позже, вместе с запуском iPhone, Apple выпускает, наверное, самый популярный среди пользователей шрифт — Helvetica. Именно он используется во всех iOS и Apple TV, а в 2013 году его специально подогнали под интерфейс iOS 7, сделав его супертонким; в 2014 же он добрался и до OS X, благодаря Yosemite. Кстати, автором является швейцарский дизайнер Макс Мидингер, который в 1957 году впервые его изобразил.

Напоследок давайте перенесемся на презентацию Apple в этом году, на которой были представлены новые iPhone 6, Apple Watch, iMac Retina и обновленный Mac mini. Но, как оказалось, это не весь список нововведений, поскольку вместе с выпуском часов вышел шрифт San Francisco, который как раз и используется в Apple Watch.

Более того, Apple планирует его использовать в Mac, которые оснащены экраном Retina, для улучшения качества картинки. Если вас заинтересует, мы можем рассказать вам о том, как установить этот шрифт на свой Mac уже сегодня.

По материалам ZillionDesigns.com

История Apple

Шрифты Apple II

Загрузить самый полный текстовый шрифт Apple II в формате TrueType. Работает на Mac OS X, Windows или любая операционная система, поддерживающая TrueType.

В новой версии, выпущенной 26 апреля 2020 г., добавлена ​​поддержка Символы блока устаревших вычислений, представленные в Unicode 13.0 и удаляет символы в областях C0 (0x00-0x1F) и C1 (0x80-0x9F).

В шрифт добавлены дополнительные символы для поддержки всех ISO-Latin-1, Windows ANSI и MacRoman, а также символы рисования прямоугольников и другие разные символы Unicode. Эти дополнительные символы были смоделированы по образцу реальных символов с акцентом на международных версии Apple II, где это возможно. MouseText закодирован в соответствующие кодовые точки Unicode, многие из которых были недавно добавлены в Unicode 13.0.

Этот шрифт содержит множество элементов в области частного использования Unicode для спецэффекты.

ISO-Latin-1 и MouseText зеркалируются по адресу 0xE000-0xE0FF. Перевернутые версии тех же символов находятся по адресу 0xE100-0xE1FF.

Визуальные представления токенов Applesoft BASIC находятся по адресу 0xE280-0xE2FF.

Sabine 10-битный текст Системные символы 0xE800-0xEBFF в Unicode латинском, греческом и кириллице, и по адресу 0xEC00-0xEFFF в их первоначальном порядке. (Эти символы имеют размер 8×8, а не 7×8.)

Другие символы разбросаны по кодовому пространству Unicode.


Скачать TrueType версия системного шрифта GS/OS, Shaston. Он поставляется в четырех вариантах для обоих Shaston 8 и Shaston 16 с разрешением 320×200 (соотношение сторон 1 на 1 пиксель) и Режимы видео 640×200 (соотношение сторон 1 на 2 пикселя).

Для поддержки всех символов ISO-Latin-1, Windows ANSI, MacRoman и Latin Extended A. Эти дополнительные символы были максимально смоделированы по образцу существующих персонажей.


Загрузить Версия TrueType системного шрифта GEOS, BSW. Он поставляется в двух вариантах, Berkelium II HGR (соотношение сторон 1 на 1 пиксель) и Berkelium II DHR (соотношение сторон 1 на 2 пикселя).

Для поддержки всех символов ISO-Latin-1, Windows ANSI и MacRoman. Эти дополнительные персонажи были смоделированы после существующих символов как можно больше.


Загрузить два шрифта TrueType состоящий исключительно из битовых шаблонов для графики Apple II с низким и высоким разрешением. Эти битовые шаблоны показывают, как графика низкого и высокого разрешения выглядит на монохромном экране. монитор вместо цветного.

BLoad A1024 кодирует битовые шаблоны для стандартной графики низкого разрешения в 0xE000-0xE0FF (четные адреса) и 0xE100-0xE1FF (нечетные адреса).

Графика двойного низкого разрешения кодируется в 0xE200-0xE2FF (четные адреса) и 0xE300-0xE3FF (нечетные адреса).

(На битовый шаблон влияет только то, адрес четный или нечетный. Основная и вспомогательная память влияет на цвет, но не базовый битовый шаблон! Видео Apple II странное; что еще нового?)

BLoad A8192 кодирует битовые шаблоны для стандартной графики высокого разрешения в 0xE000-0xE0FF (когда бит 6 предыдущего байта очищен) и 0xE100-0xE1FF (для случая, когда установлен бит 6 предыдущего байта). (Да, битовая комбинация зависит от второго по значимости бита. предыдущего байта. Видео Apple II странное; что еще нового?)

Hi-res графика с сигнализатором 3 выключен но 80 колоночная прошивка неактивна кодируются по адресу 0xE200-0xE2FF. (Это похоже на стандартную графику высокого разрешения, за исключением того, что бит группы цветов игнорируется, поэтому битовые комбинации не сдвигаются и единственные доступные цвета — зеленый и фиолетовый. Видео Apple II странное; что еще нового?) Двойная графика высокого разрешения кодируется по адресу 0xE300-0xE3FF.

Использование только четырех шрифтов Print Char 21, PR Number 3, BLoad A1024 и BLoad A8192, вы можете очень легко воссоздать любой экран Apple II в черном и белый (или янтарный, или зеленый).

С дополнительным пониманием именно как работает видеовыход Apple II, вы можете преобразовать битовый шаблон в соответствующее полноцветное изображение без дополнительной информации.

Одно последствие того, как работает видео Apple II, о котором я не упоминал где-либо это полупиксели удвоенных видеорежимов (80-столбцовый, двойной низкое разрешение и двойное высокое разрешение) начинаются на 7 полупикселей раньше, чем целые пиксели стандартные режимы видео. Если у вас есть физический Apple II+, IIe или IIc, вы можете убедиться в этом сами, запустив следующий код. (IIgs использует другой видеосистема, поэтому я не думаю, что она делает это, и поведение эмулятора может отличаться.)

10 PR#3:NOTRACE:HGR:HCOLOR=3
20 ДЛЯ Y=0 ДО 159:HPLOT 0,Y ДО 279,Y:СЛЕДУЮЩИЙ Y
30 ДЛЯ Y=0 ДО 23:ПЕЧАТЬ:СЛЕДУЮЩИЙ Y
40 ДЛЯ X=0 ДО 318:ПЕЧАТЬ "*";:СЛЕДУЮЩИЙ X
50 ПОЛУЧИТЬ $
БЕГ
 

Секрет шрифтов Apple New San Francisco | by Akinori Machino

iOS 9 теперь общедоступна. Это незначительное изменение, но системные шрифты iOS 9 теперь заменены новыми шрифтами Apple San Francisco, заменяющими предыдущий Helvetica Neue.

Helvetica (слева), San Francisco (справа) Шрифты

San Francisco уже использовались в Apple Watch, и теперь San Francisco является стандартным шрифтом, объединяющим платформу Apple: Apple Watch, iPhone, iPad и Mac.

Apple Watch

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

Helvetica слаба в мелком шрифте

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

«Helvetica — отстой», Эрик Шпикерманн

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

Буквы смешиваются в тексте небольшого размера.

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

Сан-Франциско — это не один шрифт

Шрифты Сан-Франциско имеют множество функций, обеспечивающих высокую разборчивость. На самом деле шрифты Сан-Франциско для Apple Watch и для iOS/Mac — это не одно и то же .

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

SF и SF Compact

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

Кроме того, шрифты SF и SF Compact разделены на два подсемейства шрифтов с именами «Текст» и «Экран». Это то, что Apple называет «оптическими размерами». Шрифты Text предназначены для небольших текстов, а шрифты Display — для больших.

San Francisco Family

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

Экранные и текстовые шрифты

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

Шрифты San Francisco являются динамическими

Одной из замечательных особенностей San Francisco является способ динамической оптимизации шрифта. Система автоматически переключит шрифты дисплея/текста в соответствии с размером текста. В частности, 20pt является границей.

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

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

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

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

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

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

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

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *