как правильно с ними работать

В статье рассказывается:  

1. Стиль текста в Figma
2. Рекомендации по выбору шрифтов в Figma
3. Работа со шрифтами в Figma
4. Добавление шрифта в десктопную версию Figma
5. Использование шрифта с иконками в Figma
6. Полезные плагины для работы со шрифтами в Figma

7. Пройди тест и узнай, какая сфера тебе подходит:
   айти, дизайн или маркетинг.

   Бесплатно от Geekbrains

   
   

Шрифты в Figma синхронизированы с Google Fonts, если вы работаете в браузерной версии приложения. Если же вам необходимо добавить новые, создать подборку для работы в команде, то лучшим решением будет установить десктопную версию и все дальнейшие действия проводить через нее, чтобы не перегружать браузер.

У работы с шрифтами в Figma есть свои особенности, например, им нельзя задать цвет, равнение и т. д. Это вызывает неудобства только при первом знакомстве с платформой, в дальнейшем вы поймете, что это не недостатки, а преимущества. О том, как правильно работать со шрифтами в Figma, как добавить новые, вы узнаете из нашего материала.

Стиль текста в Figma

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

В Figma есть возможность задавать свойства для текстовых объектов, к примеру, устанавливать размер, интерлиньяж. Предусмотрено сохранение стилей в библиотеке, где их можно найти в любой момент и поделиться с другими членами команды либо с заказчиком.

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

Стиль текста в Figma

Далее перечислены свойства, присущие текстовым стилям в Figma, и параметры, которые тут задать нельзя.

Задаваемые свойства:

• Доступные к установке в Figma шрифты, их размер, вес.
• Межстрочный интервал (интерлиньяж).
• Интервал между буквами и абзацами, структурирование текста.
• Украшение текста (зачеркивающая и подчеркивающая линии).
• Установка прописных и строчных букв, капитализация.
• Прочие опции Open Type, то есть, работа с табличными данными, капителиями и проч.

Свойства, отсутствующие в стиле текста Figma:

• Цвет шрифта.
• Выравнивание (выключка) текста по левому либо правому краю, по центру, по формату.
• Выравнивание текстового поля (верхнее, нижнее, по центру).
• Установка размера текстового поля (по горизонтали, по вертикали, фиксировано).

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

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

Рекомендации по выбору шрифтов в Figma

Чтобы установить общую систему шрифтов для всех ваших проектов в Figma, необходимо создать единый набор шрифтов с заданными стандартами размеров и интерлиньяжа. Причем тут нужно учесть всё: типографику заголовка, параметры основного текста, весь спектр установок, с учетом отображения на разных экранах. Варианты использования должны быть достаточно разнообразными, но не в таком количестве, чтобы у дизайнеров «разбегались глаза» и невозможно было быстро выбрать подходящий для использования стиль.

Какие же шрифты использовать в Figma в вашей конкретной системе? Тут следует принимать во внимание следующее:

• Показатель производительности. Есть ли какое-то ограничение производительности? Сколько шрифтов в вашем случае вы можете загрузить в Figma? Планируете ли вы использовать шрифты с других платформ (разумеется, доступные для применения)?
• Индивидуальные параметры. Имеются ли фирменные шрифты компании, которые необходимо будет применять?
• Есть ли необходимость в дополнительной системе шрифтов. Хватит вам единой системы, или нужно несколько стратегий? К примеру, при создании маркетингового сайта, большое значение может иметь узнаваемость бренда (в том числе и по шрифтам).
• Сочетание шрифтов парами. Позволит ли одно семейство шрифтов иметь достаточный типографический диапазон? Что касается сочетания, то большие тексты, например, можно выполнять декоративными шрифтами (не слишком ими злоупотребляя), а для основного текста применять разборчивые шрифты.

Работа с шрифтами в Figma

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

• Параметры основного текста.

Главное требование к типографике основного текста – хорошая читаемость. Для этого можно немного увеличить межстрочное расстояние. Слишком плотный текст воспринимается труднее. Как выбрать оптимальный интерлиньяж для основного текста? Умножьте размер шрифта на 1,5, и посмотрите, какой вид в результате получится у текста.

Топ-30 самых востребованных и высокооплачиваемых профессий 2022

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

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

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 16863

• Влияние оптических эффектов.

Цвета текста и фона тоже имеют значение при определении интерлиньяжа. Положительный и негативный тексты (то есть, темные буквы на светлом фоне и наоборот, соответственно) смотрятся и читаются неодинаково. На восприятие влияет контекст и оптические эффекты, даже если свойства стиля оставить неизменными.

Влияние оптических эффектов

К примеру, в Figma можно установить шрифт и стиль специально для положительного либо отрицательного текста. Разница тут будет в том, что для темного фона применяется чуть большее расстояние между буквами.

• Оформление заголовков.

Здесь не понадобится такое же большое межстрочное и межбуквенное пространство, как в основном тексте. В заголовке вы, скорее всего, захотите уменьшить интервал между строками. Возможно, выбранный шрифт представлен в нескольких вариантах (с расчетом на корректное отображение в устройствах с дисплеями разных размеров), и разработчик уже целенаправленно уменьшил интервал, это заранее заложено, как элемент дизайна шрифта.

При установке шрифта в Figma можно порекомендовать выбирать размеры текста по принципу водопада, с переходом от большего к меньшему. Так вся система будет смотреться нагляднее и эстетичнее.

Добавление шрифтов в десктопную версию Figma

Для того чтобы подключить новый шрифт в Figma, необходимо сначала установить версию программы для десктопов. В браузерную версию шрифты тоже можно добавлять (задействовав Figma font Helper), но все-таки лучше этого не делать, потому что движок браузера дает существенную дополнительную нагрузку системе.

Добавление шрифтов в десктопную версию Figma выполняется в несколько шагов:

1. Сначала необходимо скачать подходящий шрифт на сайте Figma (впрочем, не обязательно именно здесь).
2. Далее выполнить его установку.
3. После завершения – перезагрузить систему Figma.

Добавление шрифтов в десктопную версию Figma

Как изменить, то есть добавить и установить новый шрифт в Figma? Стандартным путем. К примеру, в Windows это можно сделать двумя способами:

• Войти в директорию со скачанным файлом и дважды кликнуть мышкой по его названию. В новом окне появится начертание, вверху страницы – кнопка «Установить». Просто нажмите на нее.
• Скопировать файл. Затем через «Проводник» зайти в системную папку Windows и там положить скопированный файл в папку Fonts. Всё, теперь он доступен для работы.

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

Важно! Если хотите загрузить в Figma одновременно несколько шрифтов, то и копировать их можно все сразу, а затем отправлять в папку Fonts. А можно добавлять необходимые шрифты и по одному, поочередно.

При этом процесс установки не подразумевает обязательные изменения в системной папке. Можно поступить так:

1. Отдельно создать в компьютере папку для новых загруженных шрифтов.
2. Собрать в ней все скачанные файлы.
3. Войти в панель управления и там, в появившемся справа списке, задать способ отображения «Мелкие значки».
4. Найти в списке разделов «Fonts» и зайти туда.
5. В меню справа кликнуть «Параметры…».
6. Вы окажетесь на странице, где нужно поставить галочку для разрешения копирования в папку Fonts ярлыков файлов, предназначенных для инсталляции.
7. Сохранить внесенные изменения.
8. Открыть созданную перед этим папку для новых файлов, скопировать их ярлыки и поместить в системную папку.

Интенсив «Путь в IT» поможет:

• За 3 часа разбираться в IT лучше, чем 90% новичков.
• Понять, что действительно ждет IT-индустрию в ближайшие 10 лет.
• Узнать как по шагам c нуля выйти на доход в 200 000 ₽ в IT.

При регистрации вы получите в подарок:

«Колесо компетенций»

Тест, в котором вы оцениваете свои качества и узнаете, какая профессия в IT подходит именно вам

«Критические ошибки, которые могут разрушить карьеру»

Собрали 7 типичных ошибок, четвертую должен знать каждый!

Тест «Есть ли у вас синдром самозванца?»

Мини-тест из 11 вопросов поможет вам увидеть своего внутреннего критика

Хотите сделать первый шаг и погрузиться в мир информационных технологий? Регистрируйтесь и
смотрите интенсив:

Только до 22 декабря

Осталось 17 мест

Теперь остается перезапустить Figma. После этого все добавленные шрифты можно будет применять.

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

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

Программная и браузерная версии Figma рассчитаны на то, чтобы использовать шрифты с иконками. Как это осуществить? Порядок действий, следующий:

1. Скачать на компьютер файл с иконочным шрифтом.
2. Установить его.
3. Дать вашей версии дизайн-системы Figma возможность использовать загруженный шрифт. Десктопные версии поддерживают данную опцию на автомате (иконочных шрифтов это тоже касается). Если пользуетесь браузерным вариантом, то придется найти на официальном сайте специальное приложение, скачать его и установить у себя. Выше есть описание того, как это делается.

Теперь шрифт с иконками доступен для применения в проектах, только разработчик должен не забыть перезапустить систему после окончания установки. Если все-таки это не было сделано, то нужно закрыть Figma, а затем снова ее запустить.

Важно! Когда к реализации проекта привлекается несколько разработчиков, может оказаться, что у кого-то из них нет в распоряжении иконочного шрифта. Тогда внешний результат отобразится некорректно. Поэтому нужно заранее позаботиться о том, чтобы у каждого исполнителя были иконочные шрифты.

Полезные плагины для работы с шрифтами в Figma

Подключать дополнительные шрифты в Figma можно с помощью специальных плагинов, которых на сегодняшний день насчитывается свыше 400. Далее описаны самые эффективные из них (по мнению разработчиков).

Полезные плагины для работы с шрифтами в Figma

Аdd number to text

В данном плагине предусмотрены расширения для форматирования контента. Это позволяет редактировать шрифты в системе Figma, задавать фильтр для создания списков, указывать характеристики продукта. Работать с плагином просто:

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

Откроется окно, а вам останется лишь вносить в него нужные изменения, задействовав специальную символику.

Change Text

Ищет и заменяет слова. Во всплывающем окне открывается два поля, в одно нужно вписать слово, подлежащее замене, а во второе – новый вариант. Затем запускаете программу, и она автоматически меняет все найденные заданные слова – на другие. Если надо выполнить корректировку в нескольких полях, то плагин запускается в действие по каждому в отдельности.

Content Buddy

Тоже плагин для выполнения замен в тексте, но он работает даже с целыми предложениями. Как запустить? Кликнуть правой кнопкой мыши по слою с нужным текстом, зайти в контекстное меню и нажать там по плагину (снова с помощью ПКМ).

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

Text Counts

Считает число букв и число пробелов в тексте. Просто выделяете нужный кусок текста и подключаете программу.

Выполняет топографическую чистку текста, может заменять некоторые символы. То есть, если в тексте вдруг ошибочно стоит два тире подряд, то плагин найдет и исправит эту ошибку. Как-то специально настраивать Typograf не нужно, он может работать и в фоновом режиме. Выделите предназначенный для сайта текст, который хотите проверить, обратитесь к плагину и запустите его.

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

Продвижение блога — Генератор
продаж

Рейтинг:
5

( голосов
1 )

Поделиться статьей

Руководство по размерам шрифта в дизайне интерфейсов

• 
  UI/UX
• 14 мин на чтение
• 
  14139

Чаще всего начинающие дизайнеры интерфейса задают мне следующий вопрос: Какой размер шрифта я должен использовать для своего проекта? Иногда они спрашивают о веб-сайте, иногда об Android-приложении, иногда о проекте на iPhone / iPad. Material Design дает хорошие рекомендации, но они на 50 страниц. iOS … ну, у них нет хороших рекомендаций! А по веб-дизайну все еще хуже. Может быть, внезапно появится какая-нибудь статья, которая рассказывает вам, какие размеры шрифта использовать на основе темной магии с золотым сечением. Да ладно, люди.

Три разных платформы, три разных набора проблем и два противоположных языка дизайна?

Вы когда-нибудь хотели, чтобы кто-то скомпилировал все правила в одном месте?

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

1. Платформы: рекомендации для различных типов платформ, а именно:
   • iPhone
   • iPad
   • Material Design — Mobile
   • Material Design — Web
   • Web — Mobile
   • Web — Desktop
2. Принципы: более общие правила при выборе размеров шрифтов
3. Ресурсы: список полезных сайтов по типографике

Примечание по терминологии

Распространение HD экранов вызвало абсолютный хаос в терминологии дизайна. «Пиксель» теперь означает примерно 3 разных вещи. Если не указано иное, я всегда буду «говорить @ 1x», т. е. я буду говорить о размерах шрифтов, используя число, которое вы указали в поле «Размер шрифта» в Sketch / Figma и т. д. В iOS это называется «pt» (читается: «point», означает «точка»). В Android это называется «sp» (читается: «sip», означает «масштабируемый пиксель»). В Интернете это называется «px» (читается: … погодите, вы ведь знаете это, верно?)

Давайте начнем.

iPhone

Проектируете приложения для iPhone и не уверенны, какие размеры шрифта использовать? Вот краткое резюме размеров шрифтов, предполагающее, что (а) вы используете шрифт Apple по умолчанию San Francisco (или аналогичный) и (b) вы хотите соответствовать стилю iOS:

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

Заголовки

В iOS 10 есть несколько больших по размеру, но коротких заголовков, таких как «Inbox» ниже — в размере 34pt. Это самый большой текст, который вы увидите на iPhone.

Но при скроллинге, заголовки уменьшаются до 17pt — размер по умолчанию для текстовых действий.

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

Вид списка

Списки — это хлеб и масло мобильных приложений. Вы никогда не знаете, сколько вещей на самом деле будет в списке, пока вы не начнете показывать их на вытянутом тонком экране. Давайте посмотрим на следующее.

В представлении списка — в этом конкретном примере с электронными письмами — iOS обрабатывает имя отправителя как текст обычного размера (17pt), а тему письма и предварительный просмотр — как вторичный, меньший текст (15pt). Я думаю, это стоит отметить, потому что, опять же, как дизайнер, инстинктивно хотел сделать наоборот: сделать основной текст размером по умолчанию, а имя отправителя еще больше. Заметили здесь тренд? iOS не устанавливает размеры шрифта так, как вы могли наивно ожидать.

На странице настроек сами параметры записываются в текстовом стиле по умолчанию, хотя заголовки разделов (например, «AirDrop») меньше (ничего себе!). Но заметьте, что, хотя, заголовок меньше, это более толстый шрифт, а значит вы все равно можете распознать его как заголовок. Опять же: ненавязчиво.

Примечание ниже настроек («AirDrop позволяет вам мгновенно делиться …») написано шрифтом 13pt, что является наименьшим размером во всех рассмотренных примерах интерфейса.

Элементы управления

Давайте быстро рассмотрим несколько элементов управления.

Теперь это должно казаться довольно понятным. Единственный сюрприз — сегментированная кнопка размером 13pt (кажется слишком маленькой). Мне кажется, поскольку Apple знала, что некоторые из этих кнопок имеют множество опций, поэтому они просто сделали меньший размер текста для элемента управления по умолчанию, даже если есть только два варианта.

Поиск использует размер и вес по умолчанию, хотя цвет немного светлее, до того, как вы начнете вводить текст.

Модальные окна

Это маленькое всплывающее окно является наглядным примером того, как Apple создает дизайн текста.

• Заголовок имеет размер по умолчанию. Вы можете подумать, что этого, будет недостаточно, но что мы видели раньше? Тяжелый вес шрифта, чтобы компенсировать его размер.
• Пояснительный текст — 13pt. Я бы подумал, что это будет 15pt, как основной текст электронной почты, но, возможно, они просто хотели, чтобы он уместился в одну строку?
• Ввод пароля составляет 13pt, что было бы слишком мало для обычного ввода текста, хотя, мне кажется, что вы увидите только кучу черных кружков, это не обязательно будет размер по умолчанию.
• «ОК» и «Отмена» имеют размер по умолчанию, но поскольку кнопка «ОК» надеется, что вы ее нажмете, Apple привлекает к ней немного больше внимания, сделав ее толще.

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

Панель действий

Наконец, у нас есть панель действий в нижней части экрана. Это самый маленький текст, который я мог найти во всем интерфейсе — 10pt. Я бы избегал использовать такой небольшой размер, насколько это возможно.

iPad

На момент написания этой статьи (весна 2018 года), iPad обычно имеет меньшую плотность пикселей, чем iPhone. Это означает, что элемент будет немного больше на iPad. Из-за этого подавляющее большинство размеров шрифтов остаются неизменными для iPhone и iPad. Поэтому, если вы разрабатываете приложение для iPad, начните с чтения раздела по iPhone выше.

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

Поэтому, хотя, некоторые приложения по-прежнему используют заголовки 17pt в стиле iPhone…

На iPad они больше.

В нескольких нативных приложениях используется самый полужирный вес шрифта SF — тяжелый. На мой взгляд, это настоящая «iPad-версия» полужирных заголовков на iPhone, но Apple странно непоследовательна в ее использовании.

Выше я также указываю неправильную нижнюю панель вкладок приложения «Музыка» (с текстом 17pt). В большинстве нативных приложений для iPad сохраняется размер панели вкладок 10pt в стиле iPhone, но я думаю, что это лучший «перевод» дизайна на экран большего размера.

Итак, в целом, для iPad вы будете использовать множество стилей iPhone, но у вас будет немного места для творчества в заголовках.

Примечания по шрифту SF

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

Apple хотела бы, чтобы вы соблюдали несколько дополнительных правил при использовании шрифта San Francisco

Во-первых, используйте SF Pro Display при размерах шрифта 20 или выше. Используйте SF Pro Text только для основного текста и меньше.

Во-вторых, Сан-Франциско спроектирован так, чтобы иметь различный интервал между символами при разных размерах шрифта. Поэтому, если вы хотите идеально подражать «iOS по умолчанию», у вас есть несколько вариантов:

1. Ручная настройка интервала между символами в зависимости от размера шрифта в соответствии с приведенной ниже таблицей
2. Используйте текстовые стили непосредственно из библиотеки Apple iOS UI Design Sketch (или Photoshop или XD)
3. Используйте этот удобный Sketch плагин для автоматического выбора расстояния между символами шрифта SF, в зависимости от его размера.

Или просто игнорируйте тот факт, что Apple советует вам изменять расстояние между символами до сотых пикселей. Живи свободным или умри, мужик.

San Francisco — шрифт по умолчанию для iPhone и iPad. Поэтому, если вы используете его, лучше знать об этих ограничениях. Тем не менее, вы можете проектировать приложения iOS с любым шрифтом. Будьте осторожны, другие шрифты даже в том же размере могут оказаться крупнее или меньше, или менее разборчивыми.

Material Design — Mobile

Итак, вы разрабатываете приложение в стиле Material Design и хотите узнать (примерно), какой размер шрифта использовать? Отлично. Вы пришли в нужное место.

Все размеры шрифта, перечисленные ниже, относятся к Roboto. Другие шрифты могут казаться большими или меньшими, даже с одинаковым размером. Единицы, которые я использую в этом разделе, являются «sp». Произносится как «sips», и обозначает масштабируемые пиксели. Но, как дизайнер, все, что вам нужно знать, это число, которое вы вводите в поле «размер шрифта», когда проектируете.

Теперь давайте рассмотрим элемент за элементом с (a) визуальными эффектами и (b) заметками о том, как Google ловко использует эти стили шрифтов. Без шуток, народ. Надеюсь, вы прочитаете этот раздел и подумаете: «Кто бы ни придумал размеры шрифта Material Design — это умный человек». Я так думаю.

Заголовки

Заголовки в мобильных приложениях Material Design составляют 20sp.

Основной текст

Размер основного текста в Material Design составляет 14sp. Вы должны расценивать это как нормальный размер шрифт, а все остальное в большинстве своем его вариации.

Например, в то время, как 14sp является размером текста по умолчанию, когда текст может быть довольно длинным. Однако, когда есть только небольшое модальное окно с небольшим количеством текста, это 16sp!

Обратите внимание, что этот текст немного легче, чтобы компенсировать увеличение размера шрифта. Это будет повторяющаяся тема в стилях Material Design.

Элементы списка

Многие простые списки будут показывать каждый элемент в размере 16sp.

Фактически, это размер «элемента списка» по умолчанию в Material Design.

Это было для меня неожиданностью — в конце концов, список простых предметов очень похож на основной текст. Почему он будет больше? Я думаю об этом так: важность на слово намного выше, чем у основного текста. Поэтому он должен быть больше.

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

Но более плотные списки, например, на боковых панелях, равны 14sp — и на один вес тяжелее, чтобы компенсировать (это немного похоже на более крупный размер шрифта модального окна, который легче, чтобы также компенсировать).

Элементы управления

Теперь давайте взглянем на кнопки и текст вводимых данных.

Единственным сюрпризом здесь, на мой взгляд, является то, что размер текста ввода 16sp. Почему не размер основного текста по умолчанию? Поскольку значение словабольше, чем у основного текста по умолчанию, и в отличие от кнопки (у которой естьтекст 14sp), странно делать текстовое поле со средним или полужирным шрифтом.

Для дополнительной информации ознакомьтесь с Material Design руководством по типографике от Google.

Material Design — Desktop

Несмотря на то, что все примеры, показанные выше, из мобильных приложений, размеры шрифтов немного отличаются в планшетных и десктопных приложениях. Ниже приведен краткий обзор изменений в типографике, предоставленный Google:

Если вы разрабатываете приложение Material для больших экранов, вам также стоит ознакомиться с разделом Desktop web ниже.

Mobile Web

Если вы разрабатываете веб-сайт или приложение, которое можно просматривать на мобильных устройствах, существует только одно жесткое правило:

• Используйте размер шрифта для текста ввода не менее 16px Если вводимый текст имеет меньший размер шрифта, то iOS-браузеры будут увеличиваться в левой части ввода текста, часто затеняя правую сторону и заставляя пользователя вручную уменьшать масштаб после использования текстового поля.

Вот, что еще я могу сказать о размерах мобильных веб-шрифтов:

• Используйте размер шрифта основного текста около 16px. Вы хотите, чтобы текст основного текста на вашем телефоне (когда он находился на естественном расстоянии) был таким же читаемым, как текст в хорошо отпечатанной книге (которую держат на естественном — обычно чуть дальше — расстоянии)
• Для вторичного текста, несущественных меток и подписей используйте размер поменьше — например, 13px или 14px. Я не рекомендую уменьшать только на один размер шрифта, поскольку тогда слишком легко спутать его с обычным текстом. Когда текст менее важен, вы хотите его стилизовать так, чтобы четко понимать его меньшее значение.
• Золотой стандарт — просматривать свои проекты на самом устройстве. Так как ощущение дизайна мобильного приложения на экране вашего ноутбука отличается от того, когда вы смотрите его на мобильном. Как начинающий дизайнер, я был потрясен почти каждый раз, когда открывал на смартфоне страницу, созданную на компьютере. Размер шрифта, расстояние … все отличалось. Поэтому используйте Sketch Mirrorили Figma Mirror или любое другое приложение, но просмотрите свои дизайны на устройстве.
• Наконец, по любым другим вопросам, касающимся размеров шрифтов мобильного веб-сайта, см. рекомендации Material Design, которые являются ясными, последовательными и изобретательными (хотя и не краткими). Чем больше у меня опыта, тем больше я убежден, что даже несмотря на то, что у Apple есть дизайн авторитет, Google в настоящее время утерла им нос. Но не говорите снобам, что я так сказал.

Desktop Web

При выборе базового размера для десктопного веб-сайта или веб-приложения вы можете разбивать большинство проектов на один из двух типов:

1. Страницы, перегруженные текстом. Статьи, блоги, новости и т. д. Это страницы, на которых главная цель пользователя на странице — это прочитать. Взаимодействийочень мало, возможно, просто клик на несколько ссылок
2. Страницы, перегруженные взаимодействиями. Приложения, которые включают в себя наведение курсора, нажатия, поиск элемента в списке или таблице, редактирование, печатание и т. д. На странице может быть много текста, но вы читаете его как книгу.

Вам нужен пример или два? Эта статья — страница, перегруженная текстом. Лента новостей в Facebook — это страница, перегруженная взаимодействиями. У каждой есть немного разные проблемы, поэтому я разберу их отдельно. Страница «О нас» сумасшедшего веб-приложения перегружена текстом. Страница «Контакты» в ванильном бложике перегружена взаимодействиями.

Страницы, перегруженные текстом

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

• 16px— абсолютный минимум для страниц, перегруженных текстом.
• 18px— лучший размер шрифта для начала. Вы не распечатываете документ Word с одним интервалом; вы пишите для людей, сидящих в нескольких футах от своих мониторов десятилетней давности.
• 20px+— сначала может показаться неудобно большим, но всегда стоит попробовать его в дизайнерском приложении. Самый красивый перегруженный текстом сайт в Интернете — Medium. com, имеет размер текста статьи по умолчанию 21px.

Аналогично тому, что упоминал в разделе Mobile Web, здесь есть золотое правило: текст вашего веб-сайта (просматриваемый на обычном расстоянии от монитора) должен быть таким же читабельным, как хорошо сделанная книга (просматриваемая на обычном расстоянии удержания книги). Это на самом деле очень раздражающее и дурацкое упражнение, потому что вы должны закрыть один глаз и прищуриться на книгу, которую вы держите, как идиот. Но найдите приятное, уединенное место и проведите проверку на работоспособность: мой размер шрифта читабельный даже с расстояния в пару футов? Хорошо, вы поняли идею.

Страницы, перегруженные взаимодействиями

Теперь, для страниц с большим количеством взаимодействий, идеально подойдут малые размеры текста. Фактически, из-за объема данных, которые пользователь получает за раз, даже текст 18px неудобен. Посмотрите на свой (веб-) почтовый ящик, посмотрите на Twitter, посмотрите на любые приложения, которые вы используете. Для них возможность бегло просматривать текст важнее чтения. Посмотрите на приложения, которые показывают вам данные — вам будет трудно найти длинные абзацы текста 18px. Вместо этого 14px-16px является нормой. Но не будет только одного размера шрифта. Вероятно, будут меньшие размеры для менее важных вещей и более крупныеразмеры для более важных вещей (заголовки и подзаголовки, под-подзаголовки и т. д.). И все это будет смешано вместе в гигантской мешанине.

Теперь важная часть: для любой страницы с большим количеством взаимодействий размер шрифта будет УМЕНЬШАТЬСЯ от большего к меньшему, с уменьшением конкретных потребностей каждого фрагмента текста и взаимодействия между ними.

Например:

• Названия событий — 12px среднего веса. Такой шрифт отсутствует в руководстве Material Design. Тем не менее, учитывая, что они должны соответствовать 7 столбцам на экране, который имеет ширину всего 1440px, а названия многих событий довольно короткие, это идеальный выбор размера шрифта. Если взять размер шрифта меньше, то пострадает удобочитаемость текста. Если взять размер шрифта больше, то слишком часто названия событий будут обрезаны. Дизайн — это компромиссы, малыш. Если вы не можете назвать компромисс, который делаете, вы, вероятно, делаете его не в том месте.
• Время («12pm», «1pm» и т. д.) Имеет размер шрифта: 10px. Это еще один стиль, полностью отсутствующий в руководстве Material Design. Тем не менее, горизонтальное пространство на вес золота. В любом случае каждое событие будет обозначаться временем начала. Почему бы не уменьшить метки слева?
• Даты — 48px. Опять же, не нашел в руководстве Material Design. В этом случае, я не знаю, почему они не использовали 45px, что является официальным размером «Display 2». Я бы, вероятно, сделал 48px полужирным шрифтом, а здесь полужирный будет проблемой. Это привлекло бы слишком много внимания. Поэтому я бы изменил стиль в любом случае.

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

Принципы

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

Угловой размер

Как и многие другие аспекты дизайна интерфейса, что-то, что кажется случайным и субъективным (как размер шрифта), на самом деле зависит от удивительно разумного принципа: нам нравится читать абзацы, буквы которых имеют примерно одинаковый субъективный размер, а именно, что-то вроде 0,3 ° вверх от базового уровня до высоты прописных букв, в нашем поле зрения.

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

Это прекрасно в теории, но на практике невероятно сложно вычислить:

• Не все смотрят на телефон или монитор с одинакового расстояния
• Не все устройства имеют одинаковые размеры пикселей
• Не все шрифты имеют такую ​​же читабельность — даже при том же размере шрифта, плотности пикселей и расстоянии просмотра!

Поэтому, хотя вы, вероятно, никогда не будете вычислять это вручную, думаю, что есть два общих правила, которые стоит иметь в виду.

Правило 1/16″

На широком спектре расстояний просмотра вы можете задать размер основного текста по следующей формуле:

Размер шрифта (в дюймах) = 1/16″ x (количество футов между глазами пользователя и устройством)*

* Измерение базовой линии до высоты прописных букв и предполагает достаточно читабельный шрифт основного текста

Я не ожидаю, что вы возьмете линейку в следующий раз, когда сделаете приложение для Android. Однако, это может пригодиться, когда вы приобретете знания в области цифрового дизайна в среде, с которой вы никогда не работали: презентационные плакаты, телевизионные приложения, слайд-шоу для просмотра в конференц-зале и т. д.

Соотношение пиксельной плотности и расстояния просмотра

В общем, чем меньше устройство, тем меньше пикселей *.

* Под «пикселем» я подразумеваю не физические пиксели, а концепцию, попеременно относящуюся к «CSS пикселям» (веб-сайт), «независимым от плотности пикселям» (Android) или «точкам» (iOS). В настоящее время большинство флагманских устройств имеют настолько небольшие физические пиксели, что они искусственно раздувают изображение в два раза (или три раза), как большое. Каждый «пиксель» на изображении фактически занимает 4 (или 9) физических пикселей. Таким образом, «физический пиксель» становится довольно бесполезным, как термин размера. Вместо этого у нас есть три термина: один из них — пережиток прошлого, когда все экраны были с низким разрешением (CSS-единица «пиксель»), второй — новое значение для старого печатного термина («точка») и последний — совершенно новая единица, чье определение связано с мудреной, неприятной детализацией, которая отличает ее от других единиц («независимый от плотности пиксель» или «dp»).

Это означает, что более мелкие устройства имеют больше пикселей на дюйм. И этоозначает, что одинаковый размер шрифта физически меньше на телефонах, чем на планшетах, и физически меньше на планшетах, чем на настольных компьютерах (и т. д., кстати, также и для телевизоров).

Это не конец света, так как мы держим телефоны ближе к своему лицу. Но если средний телефон в два раза ближе к нашим глазам по сравнению с монитором ПК, достаточно ли уменьшить плотность пикселей на мониторе компьютера, чтобы сделать шрифт рабочего стола вдвое больше? Короткий ответ: нет. Более развернутый ответ: типичный рабочий стол ПК имеет на 33% меньше пикселей, чем обычное мобильное устройство. Это означает, что не глупо делать любой текст на мониторе ПК примерно на 33% больше, чем его мобильный эквивалент, по крайней мере, на странице, оптимизированной для чтения длинной формы (А на других страницах? Посмотрите раздел Страницы, перегруженные взаимодействиями выше).

Это все. Просто еще одно золотое правило, которое следует учитывать при разработке гибких веб-сайтов.

Для дальнейшего чтения по теме

Material Design:

• Material Design руководство по типографике от Google. Официальная страница Google по типографике, хотя, для более полной картины, вы должны просмотреть страницы по разным компонентам (кнопки, модальные окна и т. д.).
• Device Metrics от Google. Официальный ресурс Google, в котором перечисляются физические размеры, размеры в пикселях и разрешение экрана многих устройств Android и iOS.

iOS:

• iOS Design Guidelines от Ivo Mynttinen. Действительно полезная компиляция руководств по iOS. Нет, она не официальная, но по иронии судьбы, гораздо проще в использовании, чем официальное яблочное руководство «Human Interface Guidelines», указанное ниже.
• Human Interface Guidelines — Типографика

ТВ дизайн:

• Проектируем для телевидения от Molly Lafferty.
• Apple TV руководство по типографике от Apple.
• Android TV руководство по типографике от Google.
• Amazon Fire TV рекомендации по пользовательскому опыту от Amazon.

Оригинал: Skethcapp

• #ui
• #анимация интерфейса
• #размер шрифта
• #шрифты

• 
  
• 
  0
• 
  

Типы шрифтов: Различные типы шрифтов и гарнитур

Типы шрифтов: Различные типы шрифтов и гарнитур | Figmafigma

Або всего в одном дизайнерской платформе

DesignPrototygingDesign SystemsWardsloads

FigJam

Интернет-доска для команд

онлайн-белая доска для пробелов. и используйте

Плагины и виджеты

Расширение возможностей и автоматизация работы

События и прямые трансляцииПередовой опытОбразовательная программаГруппы пользователей

FrançaisDeutsch日本語

ВойтиНачать работу

Начать работу

Начать работу

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

Шрифты без засечек

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

Подробнее

Шрифты с засечками

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

Узнать больше

Моноширинные шрифты

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

Подробнее

Шрифты с засечками

В типографике некоторые шрифты имеют тупую и угловатую или закругленную линию в конце большого штриха: такие шрифты называются шрифтами с засечками.

Узнать больше

Рукописные шрифты

Рукописные шрифты основаны на рукописном тексте, поэтому они более разнообразны и гибки, чем наборные шрифты. Они могут быть повседневными или официальными.

Подробнее

Рукописные шрифты

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

Learn more

• Twitter
• YouTube
• Instagram
• Facebook

Use Cases

• UI design
• UX design
• Graphic design
• Wireframing
• Diagramming
• Brainstorming
• Templates
• Remote дизайн
• Агентства
• Figma для образования

Обзор

• Особенности дизайна
• Особенности прототипирования
• Design systems features
• Collaboration features
• Design process
• FigJam
• Pricing
• Enterprise
• Organization
• Professional
• Customers
• Security
• Integrations
• Contact

Resources

• Blog
• Лучшие практики
• Поддержка
• Разработчики
• Изучение дизайна
• Загрузки
• Что нового
• Releases
• Careers
• About us
• Agency partners
• Privacy
• Modern Slavery Statement
• Status

Compare

• Sketch
• Adobe XD
• Invision Studio
• Framer
• Design on Windows
• Miro

Рукописные шрифты | Типы шрифтов Figma

Шрифты Script | Типы шрифтов FigmaFigma

Универсальная платформа для дизайна

ДизайнПрототипыДизайн-системЗагрузки

FigJam

Онлайн-доска для команд

Онлайн-доскаПроцессы проектированияСовещания команды

ОбзорКлиентыКонтакты по продажам

Цены

Файлы и шаблоны

Бесплатные профессионально созданные файлы, которые вы можете дублировать, микшировать и использовать

Плагины и виджеты автоматизируют работу 30002

События и прямые трансляцииПередовой опытОбразовательная программаГруппы пользователей

FrançaisDeutsch日本語

ВойтиНачать работу

Начать работу

Приступая к работе

Рукописные шрифты основаны на рукописном тексте, поэтому они имеют больше вариаций и плавности, чем наборные шрифты. Они могут быть повседневными или официальными.

Исследуйте этот файл

Сочетание шрифтов Tangerine

Tangerine — это каллиграфический шрифт, вдохновленный курсивом канцелярских рук 16-го и 17-го веков.

Загрузить пару шрифтов

Пара шрифтов Sacramento Script

Шрифт Sacramento представляет собой однострочный шрифт, вдохновленный ручным шрифтом в брошюрах 50-х и 60-х годов

Загрузить пару шрифтов

Пара шрифтов Oleo Script

Oleo — это плавный шрифт, идеально подходящий для создания непринужденного эффекта надписей, подходящий для заголовков и упаковки.

Загрузить пару шрифтов

О рукописных шрифтах

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

Получить этот файл

Когда следует использовать рукописные шрифты

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