Гайдлайн по iOS на русском. Часть 44 — Визуальный дизайн: Типографика | by Ruslan Sharipov
6 min read·
May 25, 2022Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.
Apple дает вам два семейства, которые вы можете использовать в iOS приложениях.
Сан-Франциско — это семейство гарнитур без засечек, которая включает SF Pro, SF Pro скругленный, SF Mono, SF Compact и SF Compact скругленный. SF Pro — это системный шрифт в iOS, macOS и tvOS; SF Compact — системный шрифт в watchOS. Эти шрифты спроектированы в соответствии с интерфейсами платформ; эти системные шрифты разборчивы и нейтральны по характеру.
Нью-Йорк — это гарнитура с засечками, которая обеспечивает уникальный тон, разработанный в дополнение к шрифтам SF. NY работает хорошо как в контексте графики (при больших размерах), так и в контексте чтения (при размерах наборного текста).
Скачать оба семейства можно здесь.
Начиная с iOS 14, система предусматривает также что гарнитуры San Francisco и New York доступны в формате вариативных шрифтов. Этот формат объединяет различные стили шрифтов в одном файле и поддерживает интерполяцию между стилями для создания промежуточных. С помощью интерполяции шрифты могут адаптироваться ко всем размерам, при этом они выглядят будто специально разработанны для каждого размера.
Интерполяция также позволяет осуществлять оптическую калибровку, что связана с созданием различных типографских макетов для соответствия различным размерам устройств. В iOS 14 и более поздних версиях системные шрифты поддерживают динамические оптические размеры, совмещая дискретные оптические размеры шрифта, такие как “Text” и “Display” для SF Pro и SF Compact, а также “Small”, “Medium”, “Large” и “Extra large” для New York, в единый непрерывный дизайн. Такая конструкция позволяет интерполировать каждый глиф или буквенную форму для получения структуры, точно адаптированной к размеру точки.
📌 От автора: Когда ты проектируешь под iOS у тебя SF семейство подразделяется еще на два подсемейства: “Text” и “Display”. В Apple это называют “Optical Sizes”. Подсемейство Text предназначены для текстов малого размера, тогда как Display — для больших размеров.
📌 Использование вариативных шрифтов, на устройстве работающем на более ранней версии iOS, может привести к неожиданным результатам. В этом случае продолжайте использовать обычные “Text” и “Display” подсемейства.
Поскольку SF Pro и NY совместимы, существует множество способов добавить контраст в контексте типографики и разнообразие в ваши макеты iOS, сохраняя при этом неизменный внешний вид. Например, использование обоих шрифтов может помочь вам создать более прочную визуальную иерархию или выделить семантически что-либо в контенте.
Шрифты, разработанные Apple, поддерживают широкий диапазон начертаний, размеров, стилей и языков, поэтому вы можете создавать удобный опыт чтения во всем приложении. Когда вы используете текстовые стили и системные шрифты, вы также получаете поддержку динамического шрифта и поддержу для больших размеров в специальных возможностях системы, которые позволяют пользователям выбирать подходящий для них размер текста на уровне всей системы. Конкретные значения см. таблицах. Информация о размерах, включая значения трекинга, также доступна в Sketch, Photoshop и Adobe XD, которая лежит Apple Design Resources для iOS.
У системы iOS есть API, которые упрощают использование шрифтов SF и NY.
Гибкость системных шрифтов помогает вам добиться оптимальной разборчивости при любом размере и обеспечивает широту и глубину, необходимые для точного набора текста во всем вашем приложении.
Скругленный вариант системных шрифтов может помочь вам согласовать стиль текста с внешним видом мягких или скругленных элементов интерфейса или передать нужное настроение в типографике.
SF Mono — это моноширинный вариант Сан-Франциско, то есть шрифт, в котором все символы равны по ширине. Обычно вы используете моноширинный шрифт, когда хотите выровнять столбцы текста, например, в приложениях для программирования. Например, Xcode и Swift Playgrounds по умолчанию используют SF Mono.
Классическая гарнитура с засечками, которую можно использовать в интерфейсе для передачи традиционного стиля чтения текста.
Используйте встроенные текстовые стили, когда это возможно. Встроенные текстовые стили позволяют стилизовать контент визуально четкими способами, сохраняя при этом оптимальную разборчивость. Эти стили, включая заголовок, основной текст, выноску и несколько размеров заголовка, основаны на системных шрифтах и позволяют использовать ключевые типографские функции, такие как динамический шрифт, который автоматически подстраивает трекинг и интерлиньяж для каждого размера шрифта.
Подчеркните важную информацию. Используйте начертание, размер и цвет шрифта, чтобы выделить наиболее важную информацию в вашем приложении.
Расставляйте приоритеты в содержании при реагировании на изменения размера текста. Не все материалы одинаково важны. Когда кто-то выбирает больший размер в системе, он хочет облегчить чтение интересующего его контента; он не всегда хочет, чтобы каждое слово на экране было больше.
Сведите к минимуму количество шрифтов, которые вы используете в своем интерфейсе. Смешивание большого количества разных шрифтов может привести к тому, что ваше приложение будет выглядеть фрагментированным и неаккуратным.
Измените интерлиньяж (высоту строки), чтобы улучшить удобочитаемость или сэкономить место. Интерлиньяж — это пространство между строками текста. В некоторых случаях текстовые макеты работают лучше, когда вы увеличиваете или уменьшаете это пространство. При отображении текста в широких колонках или длинных отрывках текста бОльшее пространство между строками может облегчить людям слежение за строчками при переходе от одной к следующей. И наоборот, если вам нужно отобразить две строки текста в области, где высота ограничена — например, в строке списка, — уменьшение интерлиньяжа может помочь тебе уместить текст. Если вам нужно отобразить три или более строк текста, избегайте плотного интерлиньяжа даже в областях, где высота ограничена.
Убедитесь, что кастомные шрифты разборчивы. Кастомные шрифты поддерживаются в iOS, но они могут быть сложны для чтения, особенно если у них есть стилистические атрибуты, которые затрудняют распознавание букв в небольших размерах. Если у вашего приложения нет настоятельной потребности в кастомном шрифте — например, в целях брендинга или для создания погружающего игрового опыта, — обычно лучше придерживаться системных шрифтов. Рассмотрите возможность использования кастомного шрифта только для заголовков; если вы используете его для наборного текста или текста в контролах, убедитесь, что он разборчив, даже при небольших размерах.
Реализуйте специальные возможности для кастомных шрифтов. Системные шрифты автоматически реагируют на системные настройки специальных возможностей, такие как полужирный текст и более крупный шрифт. Реализуйте такое же поведение в приложениях, использующих кастомные шрифты, убедившись, что функции специальных возможностей включены.
Подкручивайте трекинг по мере необходимости в макетах. В запущенном приложении системные шрифты динамически подкрутят трекинг для каждого размера. Чтобы создать пиксель-перфект макет, который использует вариативные системные шрифты, вам может потребоваться вручную настроить трекинг.
Динамический шрифт обеспечивает дополнительную гибкость, позволяя юзерам выбирать предпочитаемый размер текста. Ниже представлены начертания, размеры и начальные значения для каждого стиля текста при разных размерах динамического шрифта.
В дополнение к стандартным размерам, система предлагает ряд бОльших размеров для юзеров с ограниченными возможностями. Ниже приведено начертание, размер, а также значения для каждого стиля текста.
Чтобы помочь вам создать аккуратные макеты, используйте значения трекинга, которые система предлагает для различных размеров SF Pro, SF Pro со скругленными формами, а также для гарнитуры Нью-Йорк.
Тренды дизайна — ОСЕНЬ 2022
5 мин
Дизайн
15 июня 2023
Наступает осень – нас ждет не только новый сезон, но и новые тренды в графическом дизайне. Давайте сегодня разберемся, какие тенденции нас ждут в предстоящую осень, и на что стоит обратить внимание при создании дизайна, чтобы быть в тренде.
Золото
Золото – один из самых популярных и актуальных цветов этой осенью. При разработке дизайна его можно использовать в самых разных формах, текстурах и вариациях – блестящая, металлическая, шелковистая, шершавая и так далее. При правильном использовании золото может придать любому дизайну стильный вид. Причем, создать как атмосферу роскоши, так и хрупкости и скромности. Если не хотите, чтобы золото в дизайне смотрелось слишком вычурно, сочетайте его с максимально минималистичными цветами и лаконичным дизайном.
Вдохновение природой
Элементы, вдохновленные природой – цветы, деревья, листья, натуральные «природные» оттенки и текстуры, зелень, камни и так далее будут в тренде этой осенью. Они будут потрясающе смотреться в сочетании с минималистичным дизайном. Развитие, чистота и природа – тенденция, которая уже давно на пике популярности и продолжает использоваться у дизайнеров и сейчас, приобретая новые стили и формы. Такой дизайн также передаст ваше бережное отношение к окружающей среде, создаст атмосферу естественности.
Элементы искусства
Абстрактные формы, мазки кистью, дизайн, вдохновленный произведениями искусства будут актуальны в дизайне в предстоящий сезон. Также дизайнеры любят использовать в своих проектах элементы из классической живописи, вдохновляясь работами известных художников. Такой дизайн будет выглядеть изысканно. А если вы хотите создать более смелый, яркий дизайн – сочетайте художественные элементы с ярким фоном и броскими цветами.
Ретрофутуризм
Ретрофутуризм уже давно в лидерах трендовых дизайнов. Этот дизайн отличается яркими цветами и смелыми сочетаниями. Плавные линии и повороты, скругленный шрифт, неоновые цвета. Такой стиль сделает любой дизайн трендовым и актуальным.
Черно-белый дизайн
В графическом дизайне снова возвращается популярность черных цветов. Несмотря на простоту и монохромность – использование только белых и черных цветов, такой дизайн можно сделать очень смелым и броским за счет шрифтов и крупных элементов. К тому же, черный и белый – главные контрастные цвета. Такой дизайн точно привлечет внимание и запомнится.
Дизайнеры Пешты всегда помогут сделать качественный и актуальный дизайн для вашей полиграфии. Обращайтесь к нам на почту [email protected] и по телефону 400-200.
Смотрите видео на эту тему на нашем канале
Предыдущая статья
Следующая статья
149 бесплатных закругленных курсивных шрифтов · 1001 шрифт
Общий
с засечками · без засечек · курсив · Letterbat · инициалы · маленькие заглавныеВес
Линия роста волос · Тонкая · Светлая · Обычная · Средняя · Жирная · Плотная · Черная · ТолстаяШирина
Моноширинные · Ультраузкая · Очень узкая · Узкая · Широкая · Очень широкая · СверхширокаяПо случаю
Свадьба · Baby Shower · День рождения · Вечеринка · ТатуировкаПраздники
Рождество · Ханука · День святого Валентина · День Святого Патрика · Пасха · Хэллоуин · …Декада
1990-е · 1980-е · 1970-е · 1960-е · 1950-е 1940-е · 1930-е · 1920-е · 1910-е · 1900-е · 1890-е · …ИМЕРАТАЦИЯ НЕОБХОДИМОСТИ
Африканский · инопланетянин · арабский · азиатский · греческий · мексиканский · рунный · русский ·…в номере
Ретро · Винтальный · Старие · Старие · Старая диску 91 ехал · Изложил · Пиксель · ИскаженныйОтношение
Причудливый · Девчачий · Романтический · Заводной · Веселый · Крутой · Хипстерский · Уличный · Высокая модаПочерк
Курсив · Письмо · Подпись · Женский · Мужской · Официальный · Неформальный · Грязный · Некрасивый · Аккуратно · Кисть · Граффити · …Тема
Знаменитое · Имя бренда · Армия · Дикий Запад · Цирк · ТВ · Фильм · Музыка · Спортивная · Университет · СпортДингбат
ИКОНSpecial
Бесплатные шрифты для коммерческого использования · Новые и свежие шрифты · Самые популярные шрифты · Алфавитные шрифты · Крупнейшие семейства шрифтов · Популярные шрифты- Главная
- Теги
- Округлые
- Курсив 9 0068
Шрифты 1–10 из 149
Quicksand
+6 by Andrew PaglinawanKenyan Coffee
+3 от Raymond LarabieСкачать
NEON CLUB MUSIC
+4 от TypoGraphicDesignЗагрузить
проекты
от FenotypeСкачать
Nunito
+13 Вернон АдамсСкачать
900 67Артуро Пробная версия
+14 от ZetafontsСкачать
Odin Rounded
+5 от Фрэнка ХеммекамаСкачать
Blogger Sans
+7 от FirstSiteGuideСкачать 90 005
Typo Round
+7 от StudioTypoЗагрузить
You’re Gone
+1 от Raymond LarabieСкачать
40 Beautiful Округлые шрифты — Vandelay Design
Правильный шрифт может улучшить или разрушить ваш дизайн. В правильной ситуации скругленный шрифт может помочь завершить внешний вид, который вам нужен. Здесь вы найдете коллекцию удивительных круглых шрифтов, которые предоставят вам множество вариантов.
Лучшие закругленные шрифты
Шрифты в этом разделе — это шрифты премиум-класса, которые помогут вывести ваш цифровой дизайн на новый уровень. Некоторые из них доступны на Envato Elements. С подпиской на Envato Elements вы можете неограниченно загружать миллионы файлов всего за 16,50 долларов в месяц. Это удивительная сделка, которая дает вам доступ к тысячам шрифтов и множеству других ценных ресурсов.
Fonseca Rounded
Fonseca Rounded, доступный на Envato Elements, представлен обычным и полужирным шрифтом с наклонными версиями каждого. Он универсален и может использоваться во многих различных проектах.
Sonorous
Sonorous (от $14) — интересный шрифт без засечек, потому что он представлен в обычном варианте, а также в двух других вариантах: грубом и текстурированном. Хотя на снимке экрана он отображается заглавными буквами, он содержит символы нижнего регистра.
Roves Sans
Если вы ищете красивый шрифт с закругленными краями и винтажным стилем, Roves Sans может стать отличным выбором. Это текстурированный шрифт с заглавными буквами, который стоит всего 10 долларов. Roves Sans идеально подходит для создания изображений в социальных сетях, брендинга, этикеток продуктов, рекламы и многого другого.
Visby Round
Visby Round выпускается в 16 вариантах от очень легкого до тяжелого, с наклонными версиями каждого. Это стильный шрифт, который можно использовать в текстовых областях или для заголовков. Цены начинаются от 40 долларов, что является отличным значением, учитывая то, что включено в пакет.
Void
Void (начиная с 15 долларов США) имеет пять начертаний от светлого до полужирного с прописными и строчными буквами.
Nubolts
Nubolts — красивый экранный шрифт, состоящий только из заглавных букв, который может быть как обычным, так и полужирным (плюс многоязычные символы), с контурными версиями каждого из них. Вы можете скачать Nubolts с подпиской на Envato Elements.
Alumatica
Этот шрифт без засечек, доступный на Envato Elements, можно использовать для самых разных целей.
Seido Round
Seido Round — полусжатый шрифт с 12 вариациями (шесть начертаний с наклонными версиями каждой). Этот шрифт доступен по подписке Envato Elements.
Studly
Studly (начиная с 15 долларов США) поставляется в 5 различных размерах, включая контурный шрифт. Вы можете наслаивать различные веса и контурный шрифт, чтобы создавать красивые результаты, когда вы смешиваете и сочетаете.
Grota Sans Rounded
Этот огромный пакет включает 40 шрифтов (широкий выбор шрифтов плюс альтернативные версии). Цена начинается от 239 долларов.
Config Rounded
Config Rounded — это огромное семейство шрифтов, включающее в общей сложности 20 шрифтов без засечек. Благодаря большому выбору начертаний, это очень универсальный шрифт, который вы, вероятно, будете часто использовать. Его можно загрузить с членством в Envato Elements.
Knicknack
Knicknack — забавный шрифт без засечек, который можно скачать на Envato Elements. Он бывает регулярным и нечетким. Это верно. Нечеткий.
Fox & Bower
Если вы ищете фантастический шрифт для заголовков, обратите внимание на Fox & Bower. Он поставляется в одном весе и со всеми заглавными буквами. Цена начинается от 16 долларов.
Thorce
Thorce — уникальный и красивый шрифт с двумя вариациями. Его можно скачать с подпиской на Envato Elements.
Aoki
Aoki — еще один идеальный вариант, если вы ищете шрифт для заголовков. Это заглавный шрифт, который бывает светлым, обычным и встроенным.
Espion Rounded
Espion Rounded идеально подходит для заголовков или большого тяжелого текста. Он доступен через Envato Elements.
Minimalist Typeface
Minimalist Typeface — это шрифт, состоящий только из заглавных букв, представленный в семи различных вариациях, включая глифы, многоязычные символы и другие активы. Цена начинается от 18 долларов.
Polly Rounded
Polly Rounded с четырьмя вариантами насыщенности — от тонкого до полужирного — отличный шрифт, которым вы будете часто пользоваться. Он включает прописные и строчные буквы, а также многоязычную поддержку. Цена начинается от 15 долларов.
Долгота
Долгота имеет пять начертаний от светлого до черного, каждый из которых выделен курсивом. Средняя, жирная и черная версии довольно тяжелые. Он также оптимизирован для более чем 30 иностранных языков. Цены начинаются всего с 5 долларов, что делает его невероятной ценностью.
Neumatic Gothic Round
Neumatic Gothic Round (начиная с $32) поставляется в 14 различных вариантах.
Anita
Anita (от 19 долларов) — один из самых уникальных шрифтов, перечисленных здесь. Хотя это не может быть правильным выбором для каждой цели, он может быть отличным шрифтом, когда он подходит для ситуации (включая брендинг). Он бывает трех разных весов.
Bouquet
Bouquet — шрифт без засечек с заглавными буквами и закругленными краями. Поскольку он не включает строчные буквы, он не подходит для больших объемов текста, но идеально подходит для заголовков и других целей с небольшим объемом текста. Цена начинается от 19 долларов.
Leo Rounded
Этот шрифт без засечек представлен в десяти вариантах насыщенности от тонкого до тяжелого и доступен по подписке на Envato Elements.
Hank Rounded
Hank Rounded (начиная с 14 долларов США) — замечательный многоцелевой шрифт с четырьмя вариантами насыщенности. Его можно использовать практически для любого проекта.
Rhythm Round
Rhythm Round — современный шрифт с тремя жирностями. Цена начинается от 7 долларов.
Бесплатные закругленные шрифты
Несмотря на то, что представленные выше гарнитуры премиум-класса имеют очень хорошую цену, могут быть случаи, когда вам нужно найти бесплатный шрифт. Имея это в виду, вот ваши лучшие варианты.
Ascend
Ascend — один из наших собственных бесплатных шрифтов. Вы можете скачать Ascend и использовать его в своих личных и коммерческих проектах. Он имеет высокие закругленные буквы и хорошо подходит для заголовков.
Arista Pro
Arista Pro — красивый шрифт с 22 вариантами насыщенности и вариации. Три из них бесплатны, а остальные нужно покупать. Бесплатные шрифты включают Artista Pro Fat, Arista Pro Alternate Hairline и иконочный шрифт.
Steelfish Rounded Bold
Steelfish Rounded — великолепный сжатый шрифт, который отлично смотрится при использовании всех заглавных букв или комбинации прописных и строчных букв. Существует пять различных начертаний, а Steelfish Rounded Bold доступен бесплатно.
Centrale Sans Rounded Light
Существует один вес этого красивого шрифта, который доступен бесплатно — Centrale Sans Rounded Light. Если вы ищете тонкий или легкий закругленный шрифт без засечек, это отличный выбор.
Foro Rounded Light
Foro Rounded доступен в 16 различных вариациях (8 начертаний, обычный и курсив). Foro Rounded Light доступен бесплатно, остальные можно приобрести. Это красивый шрифт с засечками, который имеет плавно закругленные углы.
Круглая плита Ponsi Обычная
Круглая плита Ponsi поставляется в обычном и тяжелом весе. Обычная версия доступна для бесплатной загрузки.
Estandar Rounded Regular
Estandar Rounded — это семейство шрифтов без засечек. Всего в пакет входит 12 вариаций плюс шрифт dingbat. Estandar Rounded Regular можно скачать бесплатно.
Baloo
Baloo — это тяжелый округлый шрифт (только один вес), который идеально подходит, когда вы ищете тяжелый шрифт.
Varela Round
Этот универсальный шрифт без засечек доступен бесплатно в одном весе.
Dosis
Dosis поставляется с 7 различными (свободными) весами, что дает вам множество возможностей для использования различными способами.
Solway
Solway — это шрифт с засечками пяти размеров.
Helsinki
Helsinki — шрифт с заглавными буквами, очень тяжелый и слегка закругленный.