Зачем Apple придумали и ввели в iOS новый шрифт 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 не подходит для текстов малых размеров.
“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 же, напротив, является шрифтом современным. Его гарнитура меняется динамически, в соответствии с контекстом. Его можно назвать своего рода «родным шрифтом» цифровой эпохи.
Сочетание шрифтов: как найти идеальное
Выбор шрифтов для вашего онлайн-дизайна может быть сложным. И легко потратить много времени на разработку веб-дизайна, заменяя шрифт за шрифтом, так и не достигнув цели.
Давайте рассмотрим все, что вам нужно знать о сочетании шрифтов.
Как и во многих других частях дизайна, в типографике есть рекомендации, которые упрощают поиск идеальных сочетаний шрифтов. Мы покажем вам, как смешивать шрифты, и предложим несколько отличных комбинаций для вашего бизнеса.
1. Используйте шрифты с разными интонациями
Текст может выражать эмоции. Шрифты, которые мы используем, влияют на наши мысли. Многие шрифты — серьезные и профессиональные, а другие — приятные и неформальные. Характер шрифта раскрывает смысл текста, который он отображает. При выборе шрифтов для веб-сайта сочетание различных интонаций с типографикой создает потрясающие визуальные контрасты.
При выборе комбинации шрифтов учитывайте то, что будет представлено на веб-сайте. Счастливый шрифт подходит для фирмы по производству игрушек, но может выглядеть странно на веб-сайте юридической компании. И наоборот: серьезные шрифты с засечками могут показаться слишком тяжелыми для чего-то беззаботного.
Один из наиболее важных факторов, который следует учитывать, — шрифт, который вы будете использовать для заголовков и основного текста. Уровни заголовков обеспечивают большую свободу действий в стилизованных шрифтах, потому что они имеют более крупный масштаб. Для основного текста с меньшим размером текста требуется шрифт, на который приятно смотреть.
Не бойтесь использовать интонационно противоположные шрифты в макетах вашего сайта: иногда контраст может вызвать интерес.
2. Используйте пары шрифтов, которые отличаются, но не слишком сильно
Избегайте смешивания шрифтов в заголовках, практически идентичных тем, которые используются в основном тексте. Используйте несколько шрифтов, которые визуально различны, но дополняют друг друга.
Что произойдет, если мы объединим шрифт с каллиграфическими элементами, такими как, например, Great Vibes, и шрифт с засечками, такой как Merriweather? В результате в дизайне отсутствует баланс и создается неприятное ощущение слишком резкого контраста.
Завитки и петли Great Vibes — успокаивающие и утонченные. Northwood — это неформальный шрифт с засечками и хвостами, тогда как Merriweather — серьезный формальный шрифт, который транслирует это через форму букв с засечками. Здесь контраст слишком силен, чтобы комбинация удачно сработала.
Давайте попробуем более приятную комбинацию шрифтов. В заголовке используйте Vollkorn, немного забавный шрифт. Используйте Open Sans, более нейтральный и простой шрифт без засечек. Эта комбинация работает хорошо, потому что, несмотря на разницу в шрифтах, тонкость обоих делает их визуально совместимыми.
3. Используйте три или меньше различных шрифтов
В большинстве дизайнов вы будете применять один веб-шрифт для заголовка и другой для основного текста. Надписи от руки и более стилизованные шрифты также могут использоваться в макете для творческих целей. Независимо от того, насколько вас искушают все доступные бесплатные шрифты, вам нужно использовать всего три шрифта для одного сайта.
Многие дизайнеры используют в своих проектах суперсемейство шрифтов. Суперсемейство — это семейство шрифтов, связанное с одним или несколькими другими семействами. Это может включать в себя стилистические различия, такие как курсив, легкие и тяжелые, версии с засечками и без засечек, среди прочего. Самое приятное в супер семействах то, что они избавляют от игры в догадки относительно соответствия шрифтов, потому что они созданы для совместной работы.
Отдельные шрифты могут использоваться по-разному при использовании суперсемейств. Взгляните на эти варианты суперсемейства Roboto. Разница между Thin 100 Italic и Regular 400 не заметна.
Большинство шрифтов классифицируются в суперсемейства, что означает, что у вас есть много альтернативных шрифтов, с которыми можно экспериментировать, используя один и тот же стиль.
4. Сообщите о визуальной иерархии с помощью сочетания шрифтов
Визуализируйте структуру вашей коммуникационной иерархии, используя различные дизайны, размеры и цвета шрифтов.
Вы можете использовать типографику для передачи визуальной информации об относительной важности других частей вашего контента. Заголовки должны быть наиболее заметными, за ними следуют подзаголовки и основной текст. Используйте свои комбинации шрифтов, чтобы добавить четкое ощущение структуры вашему тексту.
5. Используйте размер шрифта, чтобы указать порядок
Большой шрифт выделяет главное, а остальные постепенно уменьшающиеся размеры шрифтов на странице создают информационную иерархию. Все буквы в верхнем регистре — отличный способ выделить важные элементы, такие как призывы к действию. Можно использовать все заглавные буквы в умеренных количествах; однако избегайте того, чтобы текст выглядел злым и враждебным.
Большинство начинающих дизайнеров интегрируют разные размеры шрифтов, чтобы установить визуальную иерархию, но есть и другие способы демонстрации визуального масштаба.
6. Экспериментируйте с разным весом шрифтов
Относительная важность показывается большим весом шрифта, в то время как меньший вес предполагает более низкую ступеньку в иерархии важности информации.
Даже пример суперсемейства Roboto демонстрирует, что с помощью всего лишь одного шрифта можно добиться многого, изменив его вес.
7. Меняйте цвет шрифта
Хотя вы, конечно же, не хотите использовать калейдоскоп контрастных цветов в своем дизайне, но изменение оттенков вашего текста может помочь выделить определенные термины. Для заголовков используются более интенсивные цвета, такие как красный и фиолетовый. Более светлая версия контрастирует с более темной версией, представляя текст, который следует прочитать в первую очередь. Убедитесь, что цвета шрифта, с которыми вы экспериментируете, не теряются на фоне.
Попробуйте no-code платформу AppMaster
AppMaster поможет создать любое веб, мобильное или серверное приложение в 10 раз быстрее и 3 раза дешевле
Начать бесплатно8. Засечки
Шрифты с засечками, которые хорошо читаются при печати, появились в конце 1700-х годов и изначально предназначались для удобочитаемости.
Засечка — это тонкая линия или штрих, добавленный к букве.
Шрифты без засечек имеют множество визуальных подсказок, которые помогают читателям следить за ними. Шрифты с засечками повышают эффективность сканирования, особенно в длинных блоках текста, например в книгах.
В начале компьютерной эпохи разрешение экрана было слишком низким для шрифтов на основе засечек, чтобы отображать их, это создавало большие проблемы. Сегодня графические дизайнеры могут использовать множество шрифтов с засечками благодаря современным дисплеям с высоким разрешением.
Всегда комбинируйте шрифт с засечками со шрифтом без засечек. Шрифты с засечками часто слишком похожи, что приводит к неприятному для глаза совпадению шрифтов. Шрифты с засечками очень адаптивны.
Ниже приведены некоторые из наиболее частых и полезных шрифтов, встречающихся в письменном тексте. Они легко читаются в различных размерах, что делает их идеальными как для основного текста, так и для заголовков.
Идея сочетания шрифтов: EB Garamond и Montserrat
Комбинируйте шрифт EB Garamond с засечками и шрифт Montserrat без них для заголовка, уменьшайте его размер для основного текста.
Шрифты с засечками в длинных блоках текста работают лучше, когда они меньше.
Идея сочетания шрифтов: Libre Baskerville и Raleway
Более четкие засечки и угловатость Libre Baskerville контрастируют с тонкими линиями Raleway.
9. Без засечек
Отсутствие лишних черточек отличает шрифт без засечек от шрифта с засечками. Шрифты без засечек можно использовать для абзацев или основного текста меньшего размера, или их можно комбинировать со шрифтами с засечками в заголовках.
Есть несколько шрифтов, о которых стоит подумать, когда дело доходит до комбинаций шрифтов. Давайте рассмотрим наиболее распространенные виды шрифтов и некоторые творческие возможности, которые вы можете использовать сегодня.
Идея сочетания шрифтов: Open Sans и Lato
Такие шрифты, как Open Sans и Helvetica, некоторые дизайнеры могут считать старомодными, но они, все равно, широко известны. Open Sans — это базовый шрифт, который хорошо работает с другими шрифтами.
Считайте, что это как ванильное мороженое: основа, на которой можно состряпать множество других вкусных штук.
Попробуйте использовать Open Sans в заголовке и Lato в основном тексте. В остальной части документа используется другой шрифт без засечек.
10. Экранные шрифты
Если вам нужно привлечь внимание людей, идеально подойдут экранные шрифты (display fonts). Обычно, они пишутся красивыми и сложными буквами — например, большими и жирными или редкими и тонкими. Используйте шрифты, специально предназначенные для первых экранов, если вы хотите, чтобы ваш дизайн выделялся и производил яркое впечатление.
Идея сочетания шрифтов: Bubblegum Sans и Open Sans
Bubblegum Sans имеет яркие формы букв, которые хорошо сочетаются с нейтральностью Open Sans.
Идея сочетания шрифтов: Poiret One и Lato
Poiret One — отличный современный шрифт, если вы хотите придать своему дизайну ноту утонченности. Его тонкие надписи в стиле ар-деко и тонкие линии делают Poiret One отличным современным шрифтом.
Этот шрифт выглядит фантастически рядом с более скромным шрифтом, например, таким как Lato. Вместе они создают очень приятный контраст.
11. Моноширинные шрифты
В моноширинном шрифте все символы имеют одинаковую ширину. Закрепленный параметр пространства по горизонтали отличает их от шрифтов разной ширины, придавая моноширинным шрифтам ощущение связности. Моноширинные шрифты давно популярны из-за их простоты и возможности адаптации даже к ранним дисплеям с низким разрешением.
Идея сочетания шрифтов: IBM Plex Mono и PT Sans
IBM Plex Mono — это современный шрифт с визуальной идентификацией, идеально подходящий для стартапов и других организаций, связанных с технологиями. Он был создан как дань уважения IBM. Шрифты без засечек, такие как этот, приятнее для глаз и дают лучшее ощущение контраста с фоном.
Идея сочетания шрифтов: Roboto Mono и Roboto
Многие дизайнеры предпочитают Roboto за его отличную читабельность. Эта комбинация шрифтов, сочетающая Roboto Mono с его обычной версией, очень комфортная для глаза.
Типографика необходима для веб-дизайна
Создать прочное присутствие в Интернете непросто. Следует учитывать несколько факторов. Подбирайте пары шрифтов для своего проекта с таким же вниманием, как и цветовую палитру картины. Выбранные вами шрифты и то, как вы их стилизуете, их удобочитаемость — все это влияет на взаимодействие пользователей с вашим веб-сайтом и их опыт. Подберите лучшие шрифты, которые отражают индивидуальность вашего проекта и предлагают посетителям самый приятный способ познакомиться с ним.
Семейство шрифтов Arial Narrow — Типография
Твиттер LinkedIn Фейсбук Электронная почта- Статья
Обзор
Monotype Drawing Office 1982. Современный шрифт без засечек, Arial содержит больше гуманистических черт, чем многие из его предшественников, и поэтому больше соответствует настроению последних десятилетий двадцатого века.
| Описание | |
|---|---|
| Имя файла | ARIALN.ttf ARIALNB.ttf ARIALNBI.ttf ARIALNI.ttf |
| Типы и веса | Arial Narrow Arial Narrow Bold Arial Narrow Bold Italic Arial Narrow Italic |
| Дизайнеры | Робин Николас, Патрисия Сондерс |
| Авторское право | © 2006 Корпорация Monotype. Все права защищены. |
| Поставщик шрифтов | Корпорация Agfa Monotype |
| Теги сценария | Н/Д |
| Кодовые страницы | 1252 Латиница 1 1250 Латиница 2: Восточная Европа 1251 Кириллица 1253 Греческий 1254 Турецкий 1257 Windows Baltic Mac Roman Набор символов Macintosh (US Roman) 869 IBM греческий 866 MS-DOS русский 865 MS-DOS Nordic 863 MS-DOS канадский французский 861 MS-DOS исландский 860 MS-DOS португальский 857 IBM турецкий 855 IBM кириллица; преимущественно русский 852 латиница 2 775 MS-DOS Baltic 737 греческий; прежний 437 G 850 WE/Latin 1 437 US |
| Фиксированный шаг | Ложь |
- Часто задаваемые вопросы о распространении шрифтов для Windows
- Лицензия на шрифты Microsoft для предприятий, веб-разработчиков, для распространения аппаратного и программного обеспечения или установки на сервер
Продукты, поставляющие этот шрифт
Этот шрифт доступен в приложениях Office.
Для получения дополнительной информации посетите эту страницу.
Примеры начертания и веса
Arial Narrow
Arial Narrow Bold
Arial Narrow Bold Italic
Arial N стрелка Курсив
Обратная связь
Просмотреть все отзывы о странице
GT America – Образец шрифта и покупка лицензии
Перейти к
Обзор семейства Редактируемые образцы Информация о шрифтеОбзор семейства
- Сжатый 9016 4 Ultra Light Italic
- Thin Italic
- Light Italic
- Regular Italic
- Средний курсив
- Жирный курсив
- Black Italic
- Condensed
- Ultra Light Italic
- Thin Italic
- Light Italic
- Regular Italic
- Medium Курсив
- Жирный курсив
- Черный курсив
- Стандартный
- Ультралегкий курсив
- Тонкий курсив
- Светлый курсив
- Обычный курсив
- Средний курсив
- Жирный курсив
- Черный курсив
- Расширенный
- Ультрасветлый курсив
- Тонкий курсив
- Светлый курсив
- Обычный курсив
- Средний курсив
- Жирный курсив
- Черный курсив 9 0013
- Расширенный
- Ультралегкий курсив
- Тонкий курсив
- Светлый курсив
- Обычный Курсив
- Средний курсив
- Жирный курсив
- Черный курсив
- Монохромный
- Ультралегкий курсив
- Тонкий курсив
- Светлый курсив
- Обычный курсив
- Средний курсив
- Жирный курсив
- Черный курсив
- SS01.
- Альтернативный g
- SS02
- Альтернативный
- SS05
- Круглые точки
- ОНУМ
- Цифры старого стиля
- КОРПУС
- Бланки с учетом регистра
- Посетите мини-сайт GT America, чтобы узнать больше об истории семейства шрифтов и концепции дизайна.
Подсемейства
Информация о шрифте 9000 3
GT America — недостающий мост между американской готикой 19-го века и европейским неогротеском 20-го века.
Языки с латинским алфавитом: афан, афар, африкаанс, албанский, эльзасский, амис, анута, арагонский, аранский, аррумынский, арренте, астурийский, атаял, аймара, азербайджанский, баскский, белорусский, бемба, бикол, бислама, боснийский, бретонский , креольский язык Кабо-Верде, каталонский, кебуано, чаморро, чавакано, чичева, чикасо, кимбрийский, кофан, корнуоллский, корсиканский, крикский, хорватский, чешский, датский, даван, дхолуо, дреху, голландский, английский, эстонский, фарерский, фиджийский, филиппинский , финский, французский, фризский, фриульский, галисийский, ганда, генуэзский, немецкий, гикуйю, гуньянди, гренландский (калааллисут), гваделупский креольский, гвичин, гаитянский креольский, гавайский, хилигайнон, хопи, венгерский, исландский, идо, игбо, Илоканский, индонезийский, ирландский, истро-румынский, итальянский, ямайский, яванский, джерриайский, кайнганский, кала-лагау-я, капампанганский, какчикельский, кашубский, киконго, киньяруанда, кирибати, кирунди, курдский, ладинский, латинский, латышский, литовский, ломбардский, Нижнесаксонский, люксембургский, масаи, махува, малайский, мальтийский, мэнский, маори, маркизский, мегленорумынский, мериам мир, мирандский, могавк, молдавский, монтанье, черногорский, муррин-патха, нагамский креольский, науатль, ндебеле, неаполитанский, ниуэанский , нунгар, норвежский, окситанский, древнеисландский, древнескандинавский, ошивамбо, палау, папьяменто, пьемонтский, польский, португальский, кекчи, кечуа, раротонганский, румынский, ретороманский, ротокас, инари-саамский, луле-саамский, северносаамский, южный саамский, самоанский, санго, сарамакский, сардинский, шотландский гэльский, сери, сейшельский креольский, шауни, шона, сицилийский, силезский, словацкий, словенский, сомалийский, верхне- и нижнесербский, северный и южный сото, испанский, срананский, сунданский, суахили, свази, шведский, тагальский, таитянский, тетум, ток-писин, токелауанский, тонганский, тшилуба, тсонга, тсвана, тумбука, турецкий, тувалуанский, цоцильский, венецианский, вепсский, выро, валлисийский, валлонский, варай-варай, варлпири, вайуу, валлийский , Вик-мунгкан, волоф, шаванте, коса, япесе, йинджибарнди, сапотек, зарма, зазаки, зулу, зуни
Кириллические языки: абазинский, адыгейский, агульский, аварский, башкирский, балкарский, белорусский, боснийский, болгарский, бурятский, чеченский, чувашский, крымскотатарский, даргинский, дунганский, эрзянский, ингушский, кабардинский, калмыцкий, карачаевский, каракалпакский, казахский, хыналугский, коми, кумыкский, киргизский, лакский, лезгинский, македонский, молдавский, монгольский, мокшанский, нанайский, ногайский, осетинский, русский, русин, рутульский, сербский, табасаранский, таджикский, татский, татарский, туркменский, тувинский, уйгурский, украинский, узбекский
Другие доступные языки: греческий, вьетнамский
Функции шрифта
Функции OpenType обеспечивают интеллектуальную типографику.
Вы можете использовать эти функции в большинстве настольных приложений, в Интернете и в мобильных приложениях. Каждый шрифт содержит различные функции. Ниже приведены наиболее важные функции шрифтов GT America:
Schönegg
1776/1848
Австрия?
0123456789
¿¡ЧТО?!
Мини-сайт шрифтов
