какой шрифт используется в приложениях
15 шрифтов для печати, сайтов, логотипов и приложений
Каждую пятницу в соцсетях Skillbox мы рассказываем про шрифты. А наши дизайнеры рисуют для этого красивые картинки. Собрали для вас подборку.
Если вы новичок в типографике, советуем сначала прочитать, что это такое, зачем она нужна и какие бывают шрифты.
Roboto
Создатель: Кристиан Робертсон, дизайнер интерфейсов из Google.
Тип использования: распространяется свободно с лицензией Apache.
Шрифт разработали внутри компании Google в 2011 году для операционной системы Android. Теперь его используют в других сервисах компании, например, YouTube. Roboto применяют и другие компании, — это фирменный шрифт Skillbox.
У шрифта есть 16 разных начертаний, и он поддерживает символы Unicode. Roboto можно увидеть более чем на 21 млн сайтов.
Montserrat
Создатель: Хульета Улановски, дизайнер из Аргентины и одна из основательниц студии ZkySky.
Тип использования: открытая лицензия.
Oswald
Создатель: американский дизайнер Вернон Адамс.
Тип использования: открытая лицензия.
Oswald — это переработанная версия классического шрифта без засечек Alternate Gothic. Автор старался, чтобы шрифтовые элементы лучше соответствовали пиксельной сетке цифровых экранов. Шрифт много раз обновляли. Сначала сам Адамс улучшал его по просьбам пользователей. Добавил разные начертания, поддержку многих латинских языков. В 2016 году, после смерти Вернона Адамса, дизайнеры Калапи Гаджар и Алексей Ваняшин доработали Oswald: добавили языки, которые используют кириллицу.
Создатель: польский дизайнер Лукаш Дзедзич.
Тип использования: открытая лицензия.
Lato — семейство шрифтов без засечек. Автор начал разрабатывать набор корпоративных шрифтов для компании. Но позже компания, для которой он это делал, отказалась от этой идеи. Поэтому в 2010 году Лукаш запустил шрифт при поддержке Google.
Шрифт поддерживает 100 языков, основанных на латинице, 50 — на кириллице и греческий алфавит.
Futura
Создатель: немецкий дизайнер Пауль Реннер.
Тип использования: платная лицензия от компании Linotype.
Futura — гротескный шрифт без засечек, который Пауль Реннер разработал для компании Bauersche Giesserei в 1927 году. Шрифт основан на принципах немецкой школы дизайна Bauhaus, поэтому в нем много геометрических форм, его основная черта — функциональность. После создания шрифт неоднократно дорабатывался, появлялись новые начертания. Например, для летних Олимпийских игр 1980 года была создана его кириллическая версия — Futura Medium.
Frutiger
Создатель: швейцарский дизайнер Адриан Фрутигер.
В 1968 году дизайнер получил заказ на разработку новой навигации для парижского аэропорта Шарль де Голль. Так в 1976 году появился Frutiger, который впоследствии часто менялся. В 2009 году на его основе появился новый шрифт Neue Frutiger.
Шрифт используется на обложках национальных паспортов Швейцарии.
Gotham Pro
Создатели: дизайнеры американской компании Tobias Frere-Jones.
Тип использования: открытая лицензия
Gotham — семейство геометрических гротескных шрифтов без засечек, которые дизайнеры компании Tobias Frere-Jones разрабатывали по заказу журнала «GQ». Нужно было разработать изданию более строгий стиль. Дизайнеры искали вдохновение везде, но решить задачу им помог стиль уличных вывесок Нью-Йорка XX века.
Gotham часто используют для оформления афиш и постеров к фильмам.
Playfair Display
Создатель: голландский дизайнер Claus Eggers Sørensen.
Тип использования: открытая лицензия, но можно использовать только вместе с какой-нибудь программой.
Playfair Display — это шрифт с засечками, который хорошо подходит для оформления заголовков. Такой дизайн получился, потому что создатель вдохновился Европой конца XVIII века: работами британского типографа Джона Баскервиля и шрифтом Scotch Roman.
Bebas Neue
Создатель: японский дизайнер Рёичи Цунекава.
Тип использования: бесплатно, открытая лицензия даже для коммерческих целей.
Bebas Neue — это семейство шрифтов с открытым исходным кодом, изначально разработанное автором как один шрифт. В 2005 году дизайнер создал проект Dharma Type, чтобы представлять в нем свои шрифты разных направлений и стилей, которые он разрабатывает «для всех дизайнеров мира».
Bebas Neue подходит для оформления плакатов, заголовков и рекламных баннеров.
Helvetica
Создатель: швейцарский типограф Макс Мидингер.
Тип использования: шрифт платный, лицензию продает компания Linotype.
Helvetica — неогротескный шрифт без засечек, разработанный Максом Мидингером по заказу Эдуарда Хоффмана, директора швейцарской компании Haas’sche Schriftgiesserei в 1957 году. Цель — создать что-то лучшее, чем гарнитура Akzidenz Grotesk, которую активно продавали немецкие конкуренты.
Мидингер взял за основу уже существующий шрифт Haas Grotesk. После редизайна у него получился Die Neue Haas Grotesk, который позже стали называть Helvetica.
Helvetica — популярный шрифт для оформления логотипов.
Мобильная типографика
При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — Web Design is 95% Typography (автор Oliver Reichenstein).
Для начала рассмотрим основные моменты веб-типографики с примерами на мобильных устройствах.
Размер
Одна из самых часто встречающихся проблем чтения сайтов на мобильных устройствах — это слишком маленький размер шрифта. Приходится постоянное масштабировать сайт, чтобы прочитать мелкий текст, а это очень раздражает пользователя. Даже если у сайта есть мобильная версия или адаптивный дизайн, проблема плохой читаемости из-за мелкого шрифта встречается нередко.
В целом, размер шрифта на страницах может полностью менять внешний вид и привлекательность сайта. Modular Scale Calculator — калькулятор от Тима Брауна (Tim Brown), который поможет подобрать размеры шрифтов для сайта, в том числе в «золотой пропорции» (1:1.618).
Пример сайта с соотношением размеров шрифтов 16/24/72: 
Контраст
Любой текст на сайте должен контрастировать с фоном, как при просмотре на десктопе, так и на мобильном устройстве. Этим, вроде бы простым и очевидным, правилом часто пренебрегают, поэтому случается видеть красный текст на фиолетовом фоне или желтый на голубом.
Кстати, есть даже сервис, который проверяет контрастность цветов на сайте — checkmycolours.com. Ниже представлены несколько сайтов с хорошим контрастом контента.
Отступы
У разных устройств разные размеры экранов, а также различное соотношение сторон дисплея. Необходимо это помнить при верстке сайта, текст удобно читать при достаточных отступах от краев и правильном межстрочном интервале. Особенно это касается чтения текста на мобильном устройстве. Примеры:
Выбор шрифта
Выбрать шрифты, которые будут корректно отображаться на любом устройстве и любой ОС, — задача не простая. Очень важно учитывать, как шрифт будет рендериться на различных девайсах, например:
Эту проблему помогут решить специальные веб-сервисы: Web Font Specimen, Typecast app и Typekit’s font browser. Иногда целесообразно использовать разные шрифты для разных размеров экранов. Такое практикует, например, сайт A List Apart.
Кроме того, не стоит использовать нестандартные шрифты в неподходящих местах. Вот так, например, выглядит League Script, читать невозможно:
Адаптивный дизайн
Все вышеописанное необходимо учитывать и при разработке адаптивного дизайна, при этом особое внимание стоит уделить изменению размеров шрифтов, отступам и длине строк. И конечно тестированию получившейся верстки.
Изменение размера шрифта
На большинстве сайтов используются px или em для того, чтобы задать размер шрифта. Em предпочтительнее, потому что позволяет пользователю менять размер шрифта в браузере. Но есть и недостаток — размер в em зависит от font-size родительского элемента. Поэтому лучше использовать rem: размер шрифта будет зависеть от корневого элемента — html:
Пример с media queries:
Отступы и длина строк
Согласно исследованию Baymard Institute, оптимальная длина строки для удобного чтения — от 50 до 75 символов. Непросто добиться автоматического соответствия этому правилу на любом устройстве. Например, размер шрифта девайса по-умолчанию — 16 px, а мы хотим использовать 20 px. Получается, что наш шрифт должен быть размером 1.25 rem. Блок текста делаем шириной 675 px, тогда в строке будет помещаться 60 символов:
Таким образом можно прописать контейнеры для экранов с любыми размерами. Для лучшей читаемости на больших экранах можно еще разместить контент в две колонки:
При ширине более 1140 пикселей текст будет разбит на два столбца.
Шрифты для сайтов и приложений: форматы и лицензии
В этой статье Magora Systems не будет писать о кеглях, цветах, контрастности и сочетаемости. Компания рассказывает о правилах, ограничениях и лицензиях на использование шрифтов в web, десктопных и мобильных приложениях.
Сайты и веб-приложения
Шрифты состоят из глифов – векторных форм каждой буквы или символа.
Веб-шрифты поставляются в 4 форматах: EOT, TTF, WOFF и WOFF2. Ни один из них не поддерживается всеми браузерами, поэтому в проект добавляют сразу несколько файлов.
Найти их в инете – не проблема. Например, шрифты Google Fonts – полностью бесплатны. Adobe TypeKit тоже предлагает платные и бесплатные опции для сайтов. Подключаются к проекту они копи-пастом 1 строчки кода.
Мобильные приложения
Здесь все не так просто. В мобильных операционках есть системные шрифты. Они используются для любого текста по умолчанию.
До 9 версии системным шрифтом iOS была Helvetica Neue, а затем ее сменил San Francisco (начертание Display – для заголовков, Text – для основного текста).
Дефолтный шрифт Android – Roboto, если его нет в каком-то языке – заменяется на Noto Sans.
Получается, что можно:
Важно проверить лицензию – некоторые шрифты бесплатны для веба, но не для мобильных или десктопных приложений. Подробнее об ограничениях – здесь.
При выборе обращают внимание на разборчивость, кегль, длину строки, межстрочные и межбуквенные расстояния… Но это уже тема для отдельной статьи.
Купить лицензионные шрифты для использования в приложениях можно, например, на type.today.
Кастомные шрифты
Пока стартапы обходятся open source решениями, крупные компании увлекаются кастомными шрифтами. Корпорации заказывают их своим или сторонним дизайнерам, умеющим разрабатывать типографику, и получают в собственность. Большие бренды хотят индивидуальности, но еще больше – сэкономить сотни тысяч долларов, которые раньше уходили на покупку лицензиии. А все потому, что для веба стоимость пропорциональна трафику, чем больше пользователей – тем дороже. Поэтому компании IBM, General Electric, Intel, Coca Cola уже сделали свои шрифты.
Недавно и команда Netflix разработала простенький Netflix Sans именно для того, чтобы сократить расходы.
Резюмируем
Стартапам – смело использовать системные или бесплатные веб-шрифты. Google Fonts в помощь. Тем более, уникальная палитра, фотографии, иллюстрации, анимации обычно запоминаются сильнее, чем типографика.
Кастомный шрифт – круто, но пригодится только известным брендам и популярным платформам. Разработка обойдется недешево, но в долгосрочной перспективе сэкономит кучу денег тем, у кого много трафика. А если у вас 342 пользователя – вложитесь лучше в маркетинг.
Дизайн для Android: как выбрать размер шрифта
Вы читаете «Размеры шрифта в UI дизайне: Полное руководство ».
Другие статьи по теме: Введение · Андроид · Веб · iOS · Принципы
Разрабатываете приложение по принципу материального дизайна и хотите узнать какой (примерно) размер шрифта выбрать? Отлично. Вы обратились по адресу.
Все советы насчет размера шрифтов, приведённые ниже, в первую очередь относятся к Roboto. Другие шрифты в таком же размере, могут оказаться больше или меньше. В этом разделе я буду пользоваться единицей «sp» — читается как «сипс» и расшифровывается как «масштабируемые пиксели» (англ. scalable pixels). Но всё, что вам, как дизайнерам, нужно знать — какое именно число нужно ввести в поле размеров шрифта (Информация о px, pt, sp, and dp будет в другой статье).
Рекомендации по типографике на Android
Здесь я быстренько покажу, какие основные стили существуют. Наглядные примеры и более подробные инструкции будут ниже.
А теперь давайте пройдёмся от элемента к элементу с (а) наглядными примерами и (б) заметками о том, как ловко Google управляется со стилизацией шрифтов. Без шуток. Надеюсь, прочитав этот раздел, вы подумаете: «Тот, кто разработал гайдлайны для размеров шрифта в материальном дизайне — гениальный человек», — я, во всяком случае, именно так и думаю.
Заголовок
Размер заголовков в мобильных приложениях в материальном дизайне — 20sp.
Основной текст
Размер основного текста в материальном дизайне — 14sp. Этот показатель следует воспринимать как норму, а всё остальное, по сути, — её вариация.
Заметьте, шрифт здесь немного тоньше — благодаря этому появляется место для увеличения размера. Этот принцип часто используется в стилях материального дизайна.
Пункты списка
Во многих простых списках размер каждого из пунктов будет 16sp
На самом деле, такой размер для списков в материальном дизайне стоит по умолчанию
Для меня это стало неожиданностью — ведь создаётся ощущение, будто перед нами не список простых пунктов, а основной текст. Зачем же делать его больше? Вот что я думаю: значимость слова здесь гораздо выше, чем в основном тексте. По этой причине, список должен быть крупнее.
Обратите также внимание, что более крупные названия пунктов списка позволяют создать чёткий контраст между ним и второстепенным описанием, меньшим по размеру и более тонким по начертанию.
Однако более плотные списки, подобно тем, что находятся на сайд-барах, имеют размер 14sp и — для компенсации — на одно значение жирнее по начертанию (это слегка напоминает пример с более крупным размером шрифта макета, который компенсируется более тонким начертанием).
Элементы управления
Теперь давайте взглянем на кнопки и поля для ввода текста.
Вот единственное, что может здесь удивить, на мой взгляд: кегль вводимого текста равен 16sp. Почему он не совпадает с тем, что стоит по умолчанию для основного текста? Потому что значимость каждого слова здесь выше, чем у основного текста по умолчанию, и, если не брать в счёт кнопку (размер текста в которой все же 14sp), то видеть в поле текст средней или большой жирности весьма странно.
Подробнее читайте в «Рекомендациях по типографике в материальном дизайне» ( Material Design typography guidelines ) от Google.
Рекомендации по типографике на ПК
И хотя все примеры, которые я приводил выше, взяты из мобильных приложений, размеры шрифта в приложениях для планшетов и ПК не сильно отличаются. Здесь я вкратце изложил, какие изменения произошли в типографике в связи с этим переходом, опять же, согласно Google:
Если вы создаёте приложение для экранов покрупнее, используя материальный дизайн, то, возможно, стоит обратиться к статье по шрифтам в вебе, которая выйдет чуть позже.
Руководство по проектированию улучшенной типографики мобильных приложений
Благодаря стремительному развитию Интернета в последнее десятилетие типографика в интерфейсах прошла основные этапы трансформации в цифровой мир. Но дизайн мобильных приложений – это все еще новая сфера.
В этой статье я не буду говорить об общих концепциях типографики, которые можно использовать как в печатной, так и в цифровой среде. Вместо этого я сосредоточусь на нюансах и хитростях, которые можно использовать в типографике дизайна мобильных приложений.
Поскольку разработка приложений очень тесно связана с функциями операционной системы, я часто буду ссылаться на отдельные рекомендации из руководства Material Design для Android и Human Interface Guidelines для iOS.
Минимальный размер шрифта
Не секрет, что мобильные приложения часто используются в дороге. Добавьте к этим ограничения, связанные с размером экрана, солнечными бликами, различными нарушениями зрения у пользователей, не всегда лучшее качество экрана смартфонов, и вы получите первое основное правило, определяющее минимальный размер основного текста.
Apple в своем руководстве Human Interface Guidelines рекомендует установить минимальный размер основного текста 17pt.
Google в руководстве Material Design рекомендует установить минимальный размер основного текста 16sp (равным 16pt в iOS).
Необходимо учитывать, что рекомендации от систем даются относительно шрифтов по умолчанию. В настоящее время это шрифт Roboto для Android и шрифты San Francisco и New York для iOS. Минимальный размер шрифта для других гарнитур может варьироваться в зависимости от их характеристик. Например, для шрифтов с очень тонкими штрихами требуется больший размер основного текста.
Кроме того, стандарты WCAG 2.0 рекомендуют использовать минимальный размер шрифта 18pt и 14pt для полужирного текста.
Исключением могут быть различные подписи меньшего размера. Но имейте в виду, что, если пользователь не может их прочитать, это не должно сильно влиять на понятность интерфейса.
Рекомендации
Не используйте размер шрифта менее 16pt для основного текста в дизайне приложения. Подходящим размером основного текста будет диапазон от 16pt до 18pt.
🤓 Совет
Чтобы сделать типографику iOS-приложения более доступной, вы можете применить динамические размеры шрифта. Использование этой технологии в вашем приложении позволит пользователям, которые в системных настройках установили увеличенный или уменьшенный размер шрифта, видеть интерфейс приложения в соответствии с этими настройками.
Размер заголовка
В последние годы в цифровой типографике стало очень популярным использовать большие заголовки. Они контрастируют на фоне основного текста и становятся якорными элементами на странице.
Но нужно быть очень осторожным при использовании больших заголовков в мобильных приложениях. Часто использование в мобильных приложениях заголовков большого размера приводит к тому, что заголовок растягивается на 3–4 строки с 1 или 2 словами в строке. Такие заголовки выглядят неаккуратно и их трудно читать.
Рекомендации
Выберите размер заголовка, контрастирующий с основным текстом и умещающийся в среднем на 2–3 строки.
🤓 Совет
В некоторых случаях вы можете использовать составные заголовки (eyebrow headline), чтобы сократить название.
Контраст
Также из особенностей использования мобильных приложений очень важными параметрами являются фон и контрастность текста.
Рекомендации
🤓 Совет
Используйте плагин Stark (или другие аналогичные плагины) для Sketch, Adobe XD и Figma или инструменты онлайн-тестирования контрастности, чтобы проверить контраст текста.
Системные шрифты
В настоящее время для iOS можно использовать два системных шрифта: San Francisco и New York. А шрифт Roboto является системным шрифтом для Android.
Системные шрифты сделают дизайн вашего приложения более совместимым с операционной системой. Но использование только системных шрифтов не позволит вашему приложению получить уникальный вид.
Рекомендации
Самый простой и наиболее распространенный способ добавить акценты и сохранить уникальный вид типографики мобильного приложения – использовать системный шрифт для основного текста и различных элементов управления, а для заголовков использовать шрифт, отличный от шрифта по умолчанию. Такое сочетание всегда будет смотреться интересно и свежо.
Вы можете использовать один из сервисов, представленных ниже, чтобы выбрать интересные пары шрифтов.
🤓 Совет
Обратите внимание, что системные шрифты Apple можно использовать только в продуктах экосистемы Apple (iOS, macOS и т. д.). Шрифт Google Roboto можно использовать в любой операционной системе. Помните об этом при разработке одного приложения для обеих платформ.
Коммерческие шрифты
Рано или поздно многие дизайнеры обнаруживают, что системные или бесплатные шрифты не могут удовлетворить их потребности в конкретном проекте. И тогда перед ними стоит задача выбрать коммерческий шрифт. Обычно именно с выбором коммерческого шрифта связаны основные трудности.
Разница в цене между лицензией на использование шрифта в приложении и десктоп-, веб-лицензией станет для вас неприятным сюрпризом (особенно, если вы раньше не покупали подобную лицензию). Например, десктоп-лицензия на один стиль шрифта FF DIN стоит 95 долларов, а для приложения – 950 долларов 😱 (цена с сайта myfonts.com)
Рекомендации
Если вы решили интегрировать кастомный шрифт в дизайн приложения, вам необходимо учесть следующее:
🤓 Совет
Ищите шрифты для вашего приложения прямо на сайтах Type Foundries. Так вы сможете сэкономить на лицензии и найти более интересные стили.
Ниже в качестве примера я привожу несколько ссылок на мои любимые ресурсы.
Бесплатные шрифты
В настоящее время появляется все больше и больше хороших бесплатных шрифтов, не уступающих по качеству коммерческим. Если вы избирательно подходите к выбору бесплатного шрифта, вы можете уберечь проект от лишних расходов, не жертвуя качеством или уникальностью дизайна.
Рекомендации
При выборе бесплатного шрифта нужно учитывать те же нюансы, что и при покупке коммерческого. 👆
Ниже в качестве примера я привожу несколько ссылок на мои любимые сайты бесплатных шрифтов.
Базовая линия
Часто можно наблюдать типичную ситуацию. Из-за разницы в рендеринге текста в инструментах дизайна и мобильных операционных системах поля между текстовыми блоками и другими элементами интерфейса могут визуально отличаться.
Чтобы этого не произошло, вы можете учитывать все поля относительно базовой линии. Такой подход позволит максимально совместить макеты и реализацию в приложении.
* В настоящее время Android не поддерживает методы полной поддержки интервалов относительно базовых линий.
Рекомендации
Скорее всего, использование базовой линии для всех текстовых элементов вашего интерфейса будет трудным и дорогостоящим в разработке. Поэтому я рекомендую использовать этот подход только для элементов, где особенно важна точность.
Пробелы и поля
Мобильные устройства имеют очень ограниченный размер экрана, поэтому вам нужно разместить как можно больше текста на одном видимом экране.
Для этого не нужно жертвовать пробелами, уменьшая поля между текстовыми блоками. Это нарушит иерархию между различными стилями текста и блоками, и затруднит чтение текста.
Рекомендации
Составьте макет так, чтобы часть содержимого находилась над сгибом, тем самым поощряя скроллинг и показывая пользователю, что доступно больше контента.
«Учите правила как профессионал, чтобы нарушать их, как художник» Пабло Пикассо
Спасибо за прочтение!
Я что-нибудь упустил? Пишите, если у вас есть вопросы 😉