Меню
Бесплатно
Регистрация
Главная  /  Прошивка  /  Шрифт сан франциско. Использование шрифтов системного интерфейса в веб-дизайне

Шрифт сан франциско. Использование шрифтов системного интерфейса в веб-дизайне

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

Работа с менеджером шрифтов

Для начала разберемся, как вообще использовать различные шрифты в iOS 13 на примере Почты. Начните писать в ней новое письмо, и над клавиатурой вы обнаружите значок Aa (возможно, для его показа придется сначала нажать на стрелочку <). Нажав на него и выбрав пункт «Шрифт по умолчанию», вы получите доступ к паре сотен предустановленных шрифтов:

Установка сторонних шрифтов из App Store

Программ для установки сторонних шрифтов в магазине приложений пока маловато, и одна из бесплатных - это Font Diner . После установки запустите его, нажмите на кнопку Activate сверху справа, после чего согласитесь на установку кастомных шрифтов:


Просмотр установленных шрифтов

Разумеется, Apple сделала возможность просматривать и удалять установленные шрифты. Для этого перейдите в Настройки > Основные > Шрифты:

Использование сторонних шрифтов

Забавно, хотя в приложении Почта менеджер шрифтов есть, использовать сторонние шрифты там нельзя. А вот в пакете iWork - можно, и мы разберем эту возможность на примере Pages. Зайдите в нем в нужный документ, после чего нажмите на значок кисти вверху и во всплывающем меню выберите нужный шрифт.

You can create beautiful websites with great typography using the @font-face kit of SF UI Text font. Webfont and @font-face supported all up-to-date browsers can use comfortably.

Using this font on your website is your own legal responsibility. You can check the license information of the font.


You must be logged in to use CDN.

@font-face kit
@font-face { font-family: "SF UI Text Regular"; font-style: normal; font-weight: normal; src: local("SF UI Text Regular"), url("SFUIText-Regular.woff") format("woff"); } @font-face { font-family: "SF UI Text Italic"; font-style: normal; font-weight: normal; src: local("SF UI Text Italic"), url("SFUIText-RegularItalic.woff") format("woff"); } @font-face { font-family: "SF UI Text Light"; font-style: normal; font-weight: normal; src: local("SF UI Text Light"), url("SFUIText-Light.woff") format("woff"); } @font-face { font-family: "SF UI Text Light Italic"; font-style: normal; font-weight: normal; src: local("SF UI Text Light Italic"), url("SFUIText-LightItalic.woff") format("woff"); } @font-face { font-family: "SF UI Text Medium"; font-style: normal; font-weight: normal; src: local("SF UI Text Medium"), url("SFUIText-Medium.woff") format("woff"); } @font-face { font-family: "SF UI Text Medium Italic"; font-style: normal; font-weight: normal; src: local("SF UI Text Medium Italic"), url("SFUIText-MediumItalic.woff") format("woff"); } @font-face { font-family: "SF UI Text Semibold"; font-style: normal; font-weight: normal; src: local("SF UI Text Semibold"), url("SFUIText-Semibold.woff") format("woff"); } @font-face { font-family: "SF UI Text Semibold Italic"; font-style: normal; font-weight: normal; src: local("SF UI Text Semibold Italic"), url("SFUIText-SemiboldItalic.woff") format("woff"); } @font-face { font-family: "SF UI Text Bold"; font-style: normal; font-weight: normal; src: local("SF UI Text Bold"), url("SFUIText-Bold.woff") format("woff"); } @font-face { font-family: "SF UI Text Bold Italic"; font-style: normal; font-weight: normal; src: local("SF UI Text Bold Italic"), url("SFUIText-BoldItalic.woff") format("woff"); } @font-face { font-family: "SF UI Text Heavy"; font-style: normal; font-weight: normal; src: local("SF UI Text Heavy"), url("SFUIText-Heavy.woff") format("woff"); } @font-face { font-family: "SF UI Text Heavy Italic"; font-style: normal; font-weight: normal; src: local("SF UI Text Heavy Italic"), url("SFUIText-HeavyItalic.woff") format("woff"); }
sample html

Fuga doloribus occaecati pariatur.

Rem sint sit a fugiat quae.

Porro eum non incidunt unde ipsa incidunt.

Quia recusandae vel est voluptatem numquam.

Sed labore ea non eaque qui cumque.

Itaque dignissimos nam nisi.

Nostrum aut quibusdam assumenda.

Quo quo tenetur maxime fugit doloribus aut.

Error omnis rerum sint ut dignissimos quia.

Ducimus sapiente velit eos ex cupiditate.

Sed incidunt minima natus nulla.

Inventore cupiditate amet enim est consequatur.

Preview
License

This San Francisco Font (the “Apple Font”) is licensed to you by Apple Inc. (“Apple”) in consideration of your agreement to the following terms and the terms of the License Agreement for the Apple San Francisco Font that was presented upon the downloading of the Apple Font. If you do not agree with these terms and the terms of the License Agreement for the Apple San Francisco Font, do not use the Apple Font.

You may use the Apple Font solely for creating mock-ups of user interfaces to be used in software products running on Apple’s iOS or OS X operating systems, as applicable. The foregoing right includes the right to show the Apple Font in screen shots, images, mock-ups or other depictions, digital and/or print, of such software products running solely on iOS or OS X.

The grants set forth in this License do not permit you to, and you agree not to, install, use or run the Apple Font for the purpose of creating mock-ups of user interfaces to be used in software products running on any non-Apple operating system or to enable others to do so. You may not embed the Apple Font in any software programs or other products. Except as expressly provided for herein, you may not use the Apple Font to, create, develop, display or otherwise distribute any documentation, artwork, website content or any other work product.

You may use the Apple Font: (i) only for the purposes described in this License and the License Agreement for the Apple San Francisco Font; and (ii) only if you are a Registered Apple Developer and an eligible paid Apple Developer Program member, or as otherwise expressly permitted by Apple in writing.

San Francisco is a trademark of Apple Inc.

© 2015 Apple Inc. All rights reserved.

Legal notice

Сайт"s fonts are uploaded by our members. The license information stated by the members is usually correct but we cannot guarantee it. We give great importance to copyright and have developed some techniques to make sure that the previously mentioned issue doesn"t occur, also the system automatically displays the copyright information of the font here. If you believe that this font is in violation of copyright and isn"t legal, please let us know in order for the font to be removed or revised.

You can also check the legal and commercial status of this font;

It is the users" own legal responsibility to download and use this font.

Каждая реклама 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

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

Продукция Apple является имиджевой. Разработчики iPhone и iPad используют узнаваемый дизайн и специальный шрифт iOS, придающий стильным гаджетам особую элегантность. Пользователями «яблочных» гаджетов часто становятся предприниматели, бизнесмены, архитекторы и дизайнеры, которые с особым пиететом относятся к начертаниям текста, используемым как в самой Ай ОС, так и в установленных на планшет или смартфон приложениях.

Приложения для работы со шрифтами iOS:

  • Fonts;
  • FontBrowser;
  • Font Designer;
  • Font Dresser Free;
  • Font Maker;
  • Cool Fonts;
  • Phonto;
  • Textizer;
  • What The Font;
  • Super Txt;
  • Byte Font 2;
  • Font Gallery Preview;
  • Tapefaces.

Наиболее популярные шрифты для iPhone и iPad

Компания Apple динамично развивается, постоянно совершенствуя дизайн устройств и операционной системы. На коробках всех без исключения «яблочных» гаджетов применяется шрифт без засечек Myriad Pro Semibold, применяемый также компаниями Rolls-Royse, Walmart и даже Google. Клавиатура любого Mac обязательно содержит нанесённое на неё начертание VagRounded.

Интерфейс этих устройств использует Lucida Grande. Для iPhone и iPad до появления дисплея Retina применялся шрифт Helvetica, после – Helvetica neue. Этот вариант начертания не является эксклюзивным – он с успехом используется торговой маркой 3M, концерном BMW. Несмотря на высокую имиджевую составляющую, многие специалисты скептически относятся к практичности начертаний, применяемых в гаджетах Apple. Специалисты компании предусмотрели такой вариант развития событий, поэтому каждый пользователь «яблочного» смартфона или планшета сможет настроить «под себя» отображаемую на экране информацию.

Как добавить шрифты на iOS

Любой владелец Айфона или Айпада может зайти на и выбрать для себя любое приложение из перечисленных выше. Такой вариант позволит использовать для ежедневной работы с гаджетом какое-нибудь особенное начертание (например, Roboto Font). Приложениями для работы со шрифтами iOS часто пользуются дизайнеры, применяя их для своих проектов.

Как изменить шрифты на iOS

Пользователи устройств Apple могут не использовать сторонние приложения для решения шрифтовой проблемы с iOS – для этого достаточно воспользоваться встроенными возможностями гаджетов. К услугам владельцев брендовых планшетов и смартфонов широкие возможности по изменению начертания текста в настройках, а также опция Dynamic Type (оптическая подгонка кегля), интегрированная в iOS 7.

Dynamic Type

Стандартный шрифт iOS 7 — Helvetica neue. Изменить начертание текста для повышения читабельности можно применением многоуровневого построения, используемого для визуального сравнения характеристик применяемых шрифтов.

Специальные ползунки с семью ступенями фиксации (Settings – General – Text Size ) позволят быстро подстроить размер отображаемого в приложении текста. Для тех, кого не устраивает заданное максимальное значение шрифтовых настроек iOS, разработчики мобильной платформы внедрили опцию Settings – General – Acessibility .

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