Динамичные шрифты: Лучшие 20 рукописных и каллиграфических шрифтов для презентации

15 лучших шрифтов с засечками в 2023 году для веб-сайтов и дизайн проектов

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

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

Давайте вместе познакомимся с коллекцией самых эстетичных шрифтов с засечками студии TypeType!

Шрифты с засечками: в чём суть?

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

Засечки — важный элемент, во многом определяющий характер шрифта

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

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

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

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

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

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

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

Лучшие шрифты с засечками на 2023 год

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

Функциональные антиквы

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

TT Norms® Pro Serif

Долгожданный шрифт в коллекции TypeType, выпущенный в 2022 году. Полноценная текстовая антиква, созданная на базе конструкций нейтрального гротеска TT Norms® Pro. 

Универсальный шрифт, в состав которого входит 24 начертания, в каждом из которых 1236 символов. 

О том, как создавалась шрифтовая пара к бестселлеру TT Norms® Pro можно прочитать в статье.

TT Norms® Pro Serif — самостоятельный шрифт, но составляет идеальную пару вместе с TT Norms® ProTT Livret Text

TT Livret — это современная антиква, состоящая из текстового, подзаголовочного и дисплейного подсемейств, объединённых в одно большое шрифтовое семейство.  

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

В составе текстового подсемейства 10 начертаний, в каждом из которых 1031 знак.

Мы рассказывали историю создания шрифта в статье.

TT Livret Text занял призовое место в номинации Cyrillic-Latin Text Typeface на международном конкурсе GRANSHAN в 2022 году

Переходные антиквы

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

TT Ramillas

Антиква с высоким контрастом и запоминающимся характером, адаптированная для современных проектов. Легко угадывается по расклешённым засечкам и отсутствию капель, подходит для индустрии моды, брендинга услуг и товаров премиум-сегмента.  

В каждом из 28 начертаний 900 знаков. 

TT Tricks

Ещё один современный шрифт, отсылающий к стилю переходных антикв. TT Tricks выделяется сквадраченными формами овалов, ассиметричными и крупными засечками. Может использоваться в крупных массивах текста, подходит для печатной индустрии. 

В шрифте 12 начертаний. Поддерживает более 70 языков.

TT Marxiana Antiqua

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

В составе гарнитуры несколько шрифтов, в том числе TT Marxiana Antiqua — шрифт с засечками, в котором мы постарались сохранить все визуальные нюансы, которые приобретали символы при печати на бумаге конца ХХ века, например, небольшую деформацию букв. 

Это шрифт с уникальным характером, который подойдёт не каждому проекту. Однако если вы искали гарнитуру с ностальгическим обликом, TT Marxiana Antiqua — идеальный выбор.

В шрифте 586 символов.  

О том, как создавалось семейство TT Marxiana, можно прочитать в большой и подробной статье.

Новостильные антиквы

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

TT Nooks 

Стильная шрифтовая гарнитура с элегантным характером, высоким контрастом и геометричными засечками. В шрифте 8 начертаний. Высококонтрастная антиква представлена в четырех шрифтах, другие четыре начертания — прямой курсив TT Nooks Script.

TT Barrels

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

Состоит из 12 начертаний, в каждом из которых 420 знаков.

Брусковые шрифты

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

TT Rationalist

Функциональный брусковый шрифт, составляющий коллекцию универсальных гарнитур вместе с бестселлерами TT Norms® и TT Commons™️. В отличие от других брусковых шрифтов, TT Rationalist обладает трапециевидными и изящными засечками, что делает характер шрифта более современным. 

В шрифте 22 начертания, в каждом из которых 950 глифов.

TT Globs

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

Состоит из 3 начертаний, в каждом из которых 625 знаков. В шрифте не представлена кириллица.

Дисплейные антиквы

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

TT Ricordi

TT Ricordi — это коллекция дисплейных антикв, включающая 6 разных по характеру гарнитур: TT Ricordi Todi, TT Ricordi Nobili, TT Ricordi Fulmini, TT Ricordi Greto, TT Ricordi Marmo, TT Ricordi Allegria.

TT Ricordi Nobili

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

В гарнитуре 709 знака.

TT Ricordi Fulmini

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

В шрифте 793 символа.

TT Ricordi Fulmini использовался в фильме «Гарри Поттер 20 лет спустя: Возвращение в Хогвартс»TT Ricks

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

В шрифте 3 начертания, в каждом 553 знака. Не поддерживает кириллицу.

Акцидентные антиквы

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

TT Geekette 

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

В шрифте 3 начертания, в каждом 450 знака.

TT Alientz

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

В антикве TT Alientz Serif 470 глифов.

Шрифт TT Alientz Serif в проектах RTFKT (01), Studio Pala (02), Svelt studio (03)

Теперь вы знаете о 15-и лучших шрифтах с засечками и можете создавать проекты любой тематики! 

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

8

Архетипы в дизайне: как подбирать шрифты, графику и фотостиль | Публикации

Агентство Linii провело дизайн-исследование и составило рекомендации по работе с дизайном для каждого из 12 главных архетипов брендов

Про использование архетипов в брендинге написано огромное количество статей. Они помогают классифицировать образы и поведенческие паттерны.

Впервые эту тему затронул психиатр Карл Густав Юнг. Впоследствии его труды переосмыслили и адаптировали для широкой аудитории, в том числе и для бизнеса. Сейчас выделяют 12 базовых архетипов брендов, активно применяемых в маркетинге и рекламе.

Команда агентства Linii в лице арт-директора Юлии Плотник и дизайнера Александры Янчуковой при консалтинге директора по стратегии Полины Васильевой провели дизайн-исследование и классифицировали каждый из 12 архетипов по нескольким категориям: шрифт, графика, палитра, фотостиль.

Родитель

Альтруист, которым движет сочувствие, щедрость и желание помогать окружающим.

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

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

Для фотостиля типичны: мягкое освещение, естественность, теплые фильтры, соприкосновения фактур, передающие тепло и мягкость.

Цвета архетипа теплые, спокойные пастельные тона либо неконтрастные черно-белые.

Славный Малый

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

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

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

Для фотостиля архетипа важна сопричастность главного героя к кампании или к привычной среде. Естественность, комфортность, простые человеческие наслаждения.

Цвета Славного Малого немного похожи на палитру Невинного: яркие и понятные цвета, как детские карандаши или баночки с краской. Здесь добавляются натуральные природные цвета, которых у Невинного быть не может, — скорее, землистые. А здесь это отсылает нас к природе и натуральности.

 

Герой

Спаситель мира и борец за справедливость. Решительно добивается цели, несмотря на препятствия, однако в глубине души боится потерпеть поражение. Гордится дисциплиной и не всегда умеет остановиться.

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

Графика Героя — это яркие и уверенные геометричные формы, динамика и брутальность.

Фотостиль отличают портреты людей, которые отсылают к супергероике. Люди и архитектура на фото могут быть сняты снизу вверх, что придает мощности, героизма и монументальности. Или просто крупный предмет по центру на чистом фоне. Цвета яркие и чистые, черно-белые или милитари.

 

Невинный

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

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

Палитра — чистые активные цвета, а также пастельные, которые скорее про невинность.

 

Исследователь

Находится в постоянном поиске того, что сделает его жизнь лучше. Ценит свободу и ищет новых впечатлений. Все узнает и пробует самостоятельно. Часто хаотично перемещается от одного дела или увлечения к другому.

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

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

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

Палитра архетипа — это цвета моря, землистые и травяные, нейтральные черно-белые.

Бунтарь

Шокирует людей, вызывает революцию, ломает общепринятые правила и избавляется от того, что не работает. Его привлекают действия, попирающие нормы этики и приличия. Не заботится о безопасности своей и окружающих.

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

Фотостиль транслируют панковский стиль: маргинальность, безрассудное поведение и высмеивание гламура.

Цветовая палитра построена на контрасте: неоновые цвета на сдержанном черно-белом паттерне, например. Или же это отсылка к уличной культуре в песчано-серых тонах.

 

Любовник

Стремится к эстетике, близости и страсти. Жаждет восхищения. Полностью отдает себя чувствам и берет за это ответственность.

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

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

Графика Любовника отсылает к гедонизму, мягким формам человеческого тела, манящим изгибам, красивым 3D-текстурам.

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

Палитра состоит из красного и близких к нему оттенков, а также бежевого, шоколадного и золотого.

Творец

Творец находится в поиске собственной личности, собственного Я. Основное отличие от других архетипов в самовыражении в творчестве.

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

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

Фотостиль Творца — яркие причудливые цвета, непривычные композиции, сочетания, нестандартные пейзажи, элементы природы, увиденные под непривычным углом. Коллаж, колорирование в фотографии, неординарные люди.

Цвета Творца могут быть любые, но преимущественно яркие.

Правитель

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

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

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

Фотостиль Правителя поддерживает атмосферу роскоши: шикарные кожаные диваны, дорогая архитектура, величественный интерьер, текстуры камня, дерева, металла. Если на фото изображены люди, то это скорее мужчины за 40 в дорогих костюмах, свидетельствующие об их cтатусе.

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

Шут

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

Типографику Шута характеризует игривость, каламбур, веселье. Она чем-то напоминает архетип Наивного. Но здесь веселье не наивное, возможен сарказм, пародия, сатира.

В графике задействованы образы цирка, фокусов, трюков, гипноза, перевоплощений и превращений.

Фотостиль Шута изобилует гипертрофированными формами, странными перспективами, гротескными образами, необычными ракурсами, искаженными пропорциями.

С точки зрения цветов Шут любит рождественские новогодние оттенки, яркие цвета конфетти.

Маг

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

Типографика Мага — это, во-первых, растительные мотивы, острые засечки, которые отсылают к антиквам старого стиля, отсылающие к средневековым книгам про магию.

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

Графика Мага тоже разделена на два типа.

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

Второй — технологический тип «светящийся», про новые технологии и часто с применением градиентов и чистого манимализма.

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

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

Если мы говорим про технологичность, то это неоновый свет а-ля стимпанк.

Цвета Мага — металлические, неоновые, темные фоны и градиенты.

Мудрец

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

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

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

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

Цвета Мудреца — это монохром, темные глубокие, яркие черно-белые или диджитальные современные.

с поддержкой динамического типа с пользовательскими шрифтами на iOS | Стивен Энтони

Обновленную версию этой статьи можно найти по адресу darjeelingsteve.com

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

Обеспечение динамической поддержки с помощью пользовательских шрифтов

В iOS 11 появился новый API — UIFontMetrics, который позволял масштабировать пользовательские шрифты так же, как и системные шрифты, в соответствии с системными настройками пользователя Dynamic Type. Однако API для этого довольно громоздкий, как показывает тот же код Apple:

Создание пользовательского экземпляра шрифта и передача его в UIFontMetrics каждый раз, когда необходимо отобразить текст, далеко от простоты использования UIFont API, который позволяет разработчикам легко использовать системный шрифт со стилями текста Dynamic Type:

 label.font = .preferredFont(forTextStyle: .body) 

Если бы только существовал способ сделать собственный шрифт приложения таким, как легко использовать с Dynamic Type в качестве API-интерфейсов системных шрифтов…

Сделать динамическую поддержку с помощью пользовательских шрифтов действительно просто

К счастью, есть альтернатива, которая обеспечивает именно это — API-интерфейс, такой же простой в использовании, как и системные API-интерфейсы, но для вашего приложения. пользовательский шрифт. Этой альтернативой является платформа Ampersand, и она дает нам следующий API для наших пользовательских шрифтов:

 label.font = .applicationFont(forTextStyle: .body) 

Довольно неплохо, я уверен, вы согласитесь. Но как это может быть так? Все, что нам нужно, это 3 простых шага:

Шаг 1 — Интегрируйте Ampersand Framework в свое приложение

Ampersand можно интегрировать как пакет Swift в Xcode, используя «Файл > Пакеты Swift > Добавить зависимость пакета…» и введя URL репозитория Ampersand (https://github.com/darjeelingsteve/Ampersand).

Шаг 2. Настройка шрифта приложения

Чтобы шрифт нашего приложения работал со всеми стилями текста Dynamic Type, мы должны указать, какой шрифт из нашей гарнитуры шрифта соответствует каждому из стилей текста системы, а также размер в пунктах, который следует использовать в системе по умолчанию. настройка размера шрифта. Нам также нужно указать, какие из шрифтов нашего шрифта соответствуют весу каждого из системных шрифтов, чтобы мы могли создавать экземпляры UIFont для нашего пользовательского шрифта с указанным размером и весом в пунктах, когда это необходимо.

Делаем это с помощью конфигурационного файла JSON, частичный пример которого выглядит так:

 { 
 "styles": [ 
 { 
 "textStyle": "UICTFontTextStyleTitle0", 
 "fontName": "Avenir-Medium" , 
 "pointSize": 30 
 }, 
 { 
 "textStyle": "UICTFontTextStyleTitle1", 
 "fontName": "Avenir-Medium", 
 "pointSize": 25 
 }, 
 … 
 ], 
 "веса" : [ 
 { 
 "fontWeight": "сверхлегкий", 
 "fontName": "Авенир-Лайт" 
 }, 
 { 
 "fontWeight": "thin", 
 "fontName": "Avenir-Light" 
 }, 
 … 
 ] 
 } 

Полный пример файла конфигурации для шрифта Avenir можно найти здесь.

Шаг 3. Зарегистрируйте шрифт приложения

После того, как мы создали наш файл конфигурации JSON, нам нужно включить его в качестве ресурса в наше приложение. Это позволяет нам создать URL-адрес файла, который мы затем можем передать функции регистрации шрифта приложения:

Этот простой однострочный вызов +[UIFont registerApplicationFontWithConfigurationAtURL:] — это все, что нам нужно для настройки шрифта нашего приложения.

Все, что осталось сделать сейчас, это использовать простой набор прикладных API-интерфейсов шрифтов, которые Ampersand поставляет в виде расширений UIFont . Если нам нужен экземпляр нашего прикладного шрифта для стиля текста заголовка, это так просто:

 let headlineFont = UIFont.applicationFont(forTextStyle: .headline) 

Если нам нужен прикладной шрифт определенного размера и вес, это тоже достаточно просто:

 let semibold = UIFont.applicationFont(ofSize: 17, weight: .semibold) 

Заключение

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

Динамический тип: Масштабирование пользовательских шрифтов

Здравствуйте, я Кевин, iOS-разработчик в Immoweb. Эта статья будет одной из серии статей о поддержке Dynamic Type.

Но прежде чем читать дальше, вы можете спросить…

Что такое динамический тип? Почему я должен поддерживать это в своем приложении?

Давайте сначала ответим на эти вопросы!

Если вы уже знаете ответы, вы можете их пропустить.

---

Что такое динамический тип?

Dynamic Type — это функция, предоставляемая Apple.

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

Пользователь может определить предпочтительный размер текста для использования в системе в Настройки → Специальные возможности → Дисплей и размер текста .

Экосистема iOS и каждое приложение должны адаптироваться в соответствии с выбранным размером.

Зачем поддерживать динамический тип?

Потому что это правильно, и точка. Есть даже поговорка: «Делай то, что правильно, а не то, что легко».

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

Некоторые статистические данные

Всемирная организация здравоохранения сообщила, что около 15% населения мира живет с той или иной формой инвалидности.

Если мы посмотрим на статистику по конкретным странам, то получим 26% в США и 18% во Франции.

Но это собирает все виды инвалидности. Как насчет нарушений зрения? Сколько людей используют функцию динамического ввода в iOS?

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

Immoweb — одно из крупнейших бельгийских приложений (и в основном используется в Бельгии)

Использование функции Dynamic Type в приложении Immoweb для iOS

Если мы посмотрим конкретно на пользователей, использующих функцию Dynamic Type, мы ясно увидим, что она собирает 29 % нашей аудитории . Мы должны сделать их опыт работы с приложением отличным.

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

---

Первый подход

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

 let customFont = UIFont(name: "CustomFont-Light", size: 16)!
label.font = UIFontMetrics.default.scaledFont (для: customFont)
label.adjustsFontForContentSizeCategory = true 

1. Вы используете метод UIFontMetrics.default.scaledFont(for:) , чтобы получить версию вашего шрифта, масштабированную до текущего размера динамического типа.
2. Вы установили для AdjustsFontForContentSizeCategory значение true , чтобы разрешить обновление шрифта при изменении категории размера.

Поддержка iOS 10 и более ранних версий

Для тех, кому по-прежнему требуется поддержка iOS 10 и более ранних версий, UIFontMetrics недоступен. Я перенаправляю вас к этому решению.

В нашем приложении мы используем разные стили текста, которые можно сопоставить с UIFont.TextStyle s.

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

Вот сравнение стилей текста Apple и системы дизайна Immoweb:

Сравнение стилей текста Apple и стилей текста Immoweb

Вы можете видеть, что мы используем больше стилей, чем Apple, и в зависимости от стиля мы используем один из двух шрифтов: Montserrat или PT Sans .

Используйте наши собственные стили текста

Поэтому мы решили использовать наши собственные стили текста:

 struct TextStyle {
пусть размер: CGFloat
подчеркните: Ударение
пусть имя: Имя

инициализация (размер: CGFloat, выделение: выделение = .none, имя: имя = .ptSans) {
собственный размер = размер
self.emphasis = акцент
self.name = имя
}
}
расширение TextStyle {
имя типа = строка
перечисление Акцент {
случае нет
регистр полужирный
курсив
var symbolicTraits: UIFontDescriptor. SymbolicTraits? {
переключиться на себя {
случай .нет:
вернуть ноль
случай .жирный:
вернуть .traitBold
случай .курсив:
вернуть .traitItalic
}
}
}
}
расширение TextStyle.Name {
static let montserrat: TextStyle.Name = "Montserrat-Regular"
статический let ptSans: TextStyle.Name = "PTSans-Regular"
} 

На данный момент:

• Мы создали структуру TextStyle , которая будет использоваться для определения каждого из наших текстовых стилей.
• Мы создали инициализацию без выделения по умолчанию и с использованием нашего основного шрифта PT Sans .
• Мы создали перечисление Emphasis , чтобы указать, должен ли стиль текста быть полужирным, курсивным или оставаться обычным. Мы решили не использовать напрямую UIFontDescriptor.SymbolicTraits и все его значения, потому что они нам не нужны (пока). Поэтому мы создали это перечисление только с теми случаями, которые нам нужны, чтобы быть более чистым.

Определение стилей текста

Теперь мы можем добавить наши стили следующим образом:

 extension TextStyle {
// MARK: - Заголовки

static let h2 = TextStyle (размер: 24, выделение: . bold, имя: .montserrat)
static let h3 = TextStyle (размер: 20, выделение: .bold, имя: .montserrat)
static let h4 = TextStyle (размер: 18, выделение: .bold, имя: .montserrat)
static let h5 = TextStyle (размер: 16, выделение: .bold, имя: .montserrat)
static let h5 = TextStyle (размер: 14, выделение: .bold, имя: .montserrat)
static let h6 = TextStyle (размер: 13, выделение: .bold, имя: .montserrat)
// MARK: - Текстовые кнопки
static func buttonLarge (акцент: Акцент) -> TextStyle {
TextStyle(размер: 16, выделение: выделение)
}
static func buttonSmall (акцент: Акцент) -> TextStyle {
TextStyle(размер: 14, выделение: выделение)
}
// МЕТКА: - Тексты
статический let text18 = TextStyle (размер: 18)
статический let text16 = TextStyle (размер: 16)
статический let text13 = TextStyle (размер: 13)
статический let text14 = TextStyle (размер: 14)
// MARK: - Подсветка текста
static let textHighlight24 = TextStyle (размер: 24, выделение: .bold)
static let textHighlight20 = TextStyle (размер: 20, выделение: . bold)
} 

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

Теперь давайте посмотрим, как мы будем использовать только что созданные стили…

Расширить UIFont

Мы собираемся создавать шрифты с нашим новым TextStyle , расширив класс UIFont двумя статическими функциями:

 extension UIFont {
/// Возвращает шрифт, соответствующий `style`
статический функциональный шрифт (стиль: .TextStyle) -> UIFont {
var descriptor = UIFontDescriptor(имя: стиль.имя, размер: стиль.размер)
если позволить symbolicTraits = style.emphasis.symbolicTraits {
descriptor = descriptor.withSymbolicTraits(symbolicTraits)!
}
вернуть UIFont (дескриптор: дескриптор, размер: стиль.размер)
}
/// Возвращает шрифт, соответствующий `style`, отмасштабированный до текущей категории размера содержимого. 
статическая функция scaledFont (стиль: .TextStyle) -> UIFont {
UIFontMetrics.default.scaledFont (для: шрифт (стиль: стиль))
}
} 

Здесь мы используем класс UIFontDescription , чтобы указать symbolicTraits .

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

 label.font = .scaledFont(style: .h2)
label.adjustsFontForContentSizeCategory = true 

Это чисто 👌

Мы даже можем вызвать UIFont.font(style: .h2) , если нам нужен шрифт фиксированного размера (например, для текстов панели вкладок и панели навигации).

Теперь мы видим, что еще есть что улучшить:

Каждый раз, когда мы используем label.font = UIFont.scaledFont(style: …) , мы также должны добавить выражение label.adjustsFontForContentSizeCategory = true , что немного избыточно.

В идеале мы должны иметь API, который выглядит следующим образом:

 label. apply(textStyle: …) 

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

Давайте посмотрим, как мы можем реализовать это…

Создать общий протокол

Мы хотим добавить метод apply(textStyle:) к UILabel , UITextField , UITextView и UIButton . Для этого мы создадим общий протокол. Назовем его TextStyleAdjustable :

 протокол TextStyleAdjustable: UIContentSizeCategoryAdjusting {
func setFont (_ шрифт: UIFont)
@discardableResult
функция применения (textStyle: TextStyle) -> Self
}
расширение TextStyleAdjustable {
@discardableResult
функция применения (textStyle: TextStyle) -> Self {
setFont (.scaledFont (стиль: textStyle))
корректируетFontForContentSizeCategory = true
вернуть себя
}
} 

Наш протокол наследуется от UIContentSizeCategoryAdjusting , поэтому мы можем иметь доступ к переменной AdjustsFontForContentSizeCategory .

Теперь мы можем реализовать этот протокол:

 extension UILabel: TextStyleAdjustable {
func setFont(_ шрифт: UIFont) {
self.font = шрифт
}
}
расширение UITextView: TextStyleAdjustable {
func setFont(_ шрифт: UIFont) {
self.font = шрифт
}
}
расширение UITextField: TextStyleAdjustable {
func setFont(_ шрифт: UIFont) {
self.font = шрифт
}
}
расширение UIButton: TextStyleAdjustable {
func setFont(_ шрифт: UIFont) {
titleLabel?.font = шрифт
}
общедоступная переменная AdjustsFontForContentSizeCategory: Bool {
получать {
titleLabel?.adjustsFontForContentSizeCategory ?? ЛОЖЬ
}
набор {
titleLabel?.adjustsFontForContentSizeCategory = newValue
}
}
} 

Обратите внимание, что Uilabel , Uitextfield , UitextView Уже реализуйте UicontentEntizeCategoryAdjusting , поэтому нам не нужно внедрить ratedsFontforContentsizecececatory для них.

Мы можем использовать наш новый API:

 label.apply(textStyle: . h2)
textField.apply(textStyle: .text16)
textView.apply(textStyle: .text16)
button.apply(textStyle: .buttonLarge(выделение: .bold)) 

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

Добавить проверку SwiftLint

Если вы используете SwiftLint, я рекомендую добавить пользовательское правило, чтобы убедиться, что мы не используем Нежелательный API по ошибке, такой как:

• Uifont.preferredfont (FortextStyle :)
• UIFONT.SISTEMFONT (OFFIZE :)
• UIFONT.BOLDSIZE :)
• .0020 # https://github.com/realm/SwiftLint#определение пользовательских правил custom_rules: использовать_масштабированные_шрифты: name: "Использовать масштабированные шрифты: UIFont.scaledFont(style:)" регулярное выражение: '\.(?!масштабировано)[a-zA-Z]*[fF]ont\(' серьезность: ошибка

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

  Вы все еще можете отключить правило в определенных случаях, добавив //swiftlint:disable:next use_scaled_fonts в строку перед вызовом одного из перечисленных выше запрещенных API. Примером случая, который мы бы сделали, является настройка шрифта для панели вкладок, которая никогда не должна масштабироваться.

  Окончательный код

  Здесь вы можете получить окончательный код.

  Заключение

  Мы увидели, что функция Dynamic Type используется многими пользователями (29% аудитории Immoweb iOS), и важно поддерживать ее в наших приложениях.

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

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