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

Секрет нового шрифта San Francisco от Apple

Helvetica (слева), San Francisco (справа)

Шрифт San Francisco уже использовался в Apple Watch, и он уже стал стандартным шрифтом техники Apple: Apple Watch, iPhone, iPad and Mac.

Apple Watch

Apple использовали Helvetica в качестве системного шрифта для iOS с появления первого iPhone. А на Mac OS X они поменяли шрифт с Lucida Grande на Helvetica с момента выхода 10.10 Yosemite. Почему Apple решила похоронить Helvetica — самый известный и любимый шрифт в мире?

В маленьких формах Helvetica слаба

Говорят, что Helvetica не подходит для текстов в малом кегле. Когда системный шрифт в Mac OS X Yosemite поменяли на Helvetica, многие дизайнеры заявляли, что такой шрифт здесь совсем не уместен.

«Helvetica отстой» Erik Spiekermann

Когда вы печатаете текст в маленьком кегле, становится видна низкая разборчивость Helvetica. Helvetica размывает такой текст. Некоторые тексты смешиваются, и их сложно разобрать. Многие говорят, что Apple создала шрифты San Francisco, чтобы сделать тексты в маленьком кегле в Apple Watch более читаемыми.

Буквы смешиваются в текстах маленького кегля

Но сегодня разрешение экранов девайсов больше, чем у печатной продукции, а тексты в айфонах не всегда такие маленькие, как в Apple Watch. Почему же Apple поменяли системные шрифты не только в Apple Watch, но и в iOS и Mac OS X.

San Francisco — это не один шрифт

У шрифтов San Francisco есть много особенностей, делающих его весьма читаемым. На самом деле шрифты San Francisco для Apple Watch и для iOS/Mac — это два шрифта с небольшими отличиями.

Семейство шрифтов под названием «SF» используется для iOS/Mac, а «SF Compact» для Apple Watch. Вы можете заметить разницу в округлых буквах ‘o’, ‘e’. У «SF compact» более плоские вертикальные линии, чем у SF.

SF и SF Compact

Эта разница даёт текстам в SF Compact больший марджин (отступ) между буквами, в результате получается бОльшая читаемость на маленьких девайсах типа Apple Watch.

В добавок, шрифты SF и SF Compact разделены на два подсемейства: «Text» и «Display». Это как раз то, что Apple называет «Оптическим размером» (Optical Sizes). «Text» предназначен для текстов в меньшем кегле, а «Display» для текстов в большем.

Семейство San Francisco

Как я упомянул выше, при использовании гротесковых (sans-serif) шрифтов типа Helvetica две соседние буквы «смешиваются», а буквы типа «а», «с», «s» в маленьком кегле смотрятся похоже.

Шрифты «Дисплей» и «Текст»

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

Шрифты San Francisco динамичны

Одна из прекраснейших особенностей San Francisco — это то, как он динамично оптимизирует начертание. Система автоматически переключает шрифт Display/Text в зависимости от кегля текста. Пороговое значение — 20pt.

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

Что меня поражает в шрифтах San Francisco — это то, как отображаются двоеточия. В основном, двоеточие ставят прямо над линией шрифта, поэтому оно не выровнено по центру вертикально, если стоит между цифрами. А в шрифтах San Franсisco двоеточия выравниваются так автоматически.

Вертикально выровненное по центру двоеточие

San Francisco — шрифт цифровой эры

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

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

С другой стороны, San Francisco — современный шрифт. Он динамично меняет начертания в соответствии с контекстом. Это что-то вроде «родного» шрифта, будто бы специально созданного для надвигающейся цифровой эры.

Как подобрать шрифт для веб сайта? 7 полезных советов!

Кароль Андрушков

Обновлено: 14 апреля 2023 г.

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

 

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

Как выбрать лучший шрифт для сайта?

Вот 7 ключевых шагов, которые вы должны сделать!

 

1. Определите голос вашего бренда

2. Определите цели текстов и шрифта на вашем сайте

3. Проверьте, есть ли в шрифте все нужные вам символы.

4. Проверьте лицензию на шрифт

5. Выберите основной и дополнительный шрифты

6. Умело комбинируйте шрифты

7. Стремитесь к удобочитаемости

 

Давайте рассмотрим, как сделать каждый из них на практике.

Шаг I: Определите голос вашего бренда

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

 

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

 

1. Каковы ценности вашей компании?

2. Кто получатели компании?

3. Какова миссия вашей компании?

4. Что вы хотите, чтобы ваши клиенты думали о вашей компании?

 

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

Шаг II: Определите цели текстов и шрифта на вашем сайте

Что касается дизайна веб-сайта, текст и шрифт, которые вы выбираете, важны. Они помогают задать тон и донести ваше сообщение до посетителей. Итак, каковы цели вашего текста и шрифта?

 

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

 

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

 

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

Категории шрифтов

Шрифты в основном делятся на:

 

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

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

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

4. Декоративные или дисплейные шрифты

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

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

 

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

 

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

 

1. заголовки,

2. цитаты,

3. субтитры,

4. логотипы,

5. слоган

 

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

 

Популярные шрифты с засечками: Times New Roman, Georgia, Palatino, Bookman Old Style, Garamond, Courier, Lucida, Century, Arno Pro, MS Serif.

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

Шрифты без засечек лишены засечек. По этой причине они имеют более современный и минималистский характер.

 

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

 

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

 

Популярные шрифты без засечек: Arial, Open Sans, Montserrat, Helvetica, Futura, Verdana, Trebuchet MS, Univers.

Прописные шрифты

Это шрифты, имитирующие почерк. Они элегантны и формальны, но также немного юмористичны. Среди них можно найти как очень орнаментальные, так и достаточно простые шрифты.

 

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

 

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

 

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

 

Популярные шрифты: Great Vibes, Lobster, Grand Hotel, Sofia, Arizonia, Black Jack, Cookie, Germanica, Miama, Pacifico, Tangerine.

Декоративные и акцидентные шрифты

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

 

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

 

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

⚡Взлом роста BOWWE:

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

Шаг III: проверьте, есть ли в шрифте все нужные вам символы

Вы начали обдумывать свой выбор нескольких шрифтов? Хороший!

 

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

 

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

 

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

 

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

Шаг IV: проверьте лицензию на шрифт

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

 

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

 

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

Шаг V: выберите основной и дополнительный шрифт

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

 

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

 

Большинство профессиональных веб-сайтов включают в себя:

 

1. Основные шрифты

2. Дополнительные шрифты

3. Акцентный шрифт (необязательно)

 

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

Основной шрифт

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

Дополнительный шрифт

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

 

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

Акцентный шрифт (необязательно)

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

 

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

 

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

⚡Взлом роста BOWWE:

Вы хотите найти шрифт с веб-сайта, который вы посещали? Хотели бы вы использовать его на своем собственном веб-сайте?

Установите плагин — Chrome FontFace Ninja . С его помощью вы можете проверить название каждого шрифта, используемого на веб-сайте. Просто нажмите на значок установленного плагина и с помощью курсора мыши выберите шрифт, название которого вы хотите узнать.

Шаг VI: Умело комбинируйте шрифты

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

1. С засечками и без засечек

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

2. Контрастный вес

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

3. Шрифты из одного семейства шрифтов

Используя шрифты из одного семейства, можно быстро достичь упомянутой выше толщины (например, Open Sans и Open Sans Semibold). Многие шрифты имеют много вариантов — подумайте о том, чтобы объединить два из них на своем веб-сайте.

 

Например, в BOWWE Website Builder вы найдете разные версии шрифта Roboto: шрифт Roboto, Roboto Condensed и Roboto Slab.

4. Избегайте слишком похожих шрифтов

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

5. Шрифты с похожим эмоциональным выражением

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

6. Выразительные шрифты с нейтральным

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

7. Соответствие пропорций шрифтов

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

⚡Взлом роста BOWWE:

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

 

1. Пара шрифтов

На странице представлены пары шрифтов, которые хорошо смотрятся вместе. Готовые пары шрифтов можно сразу скачать с сайта (все шрифты доступны в Google Fonts).

 

2. Typ.io

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

Шаг VII: добивайтесь удобного чтения 

Какие факторы влияют на читабельность текста на сайте?

Межбуквенные свечения

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

Лидирующий

Слишком маленький интерлиньяж затруднит чтение. В идеале межстрочный интервал должен быть мин. 120% регистра букв (оптимальным часто считается 150%).

Расстояние между абзацами

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

Выравнивание текста

Слишком много текста и маленькие поля в одной строке могут отбить желание читать. Золотое правило описывает 50-60 знаков в стихе как идеал.

Контраст

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

Размер

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

 

1. Заголовки: 30–70 пикселей,

2. Подзаголовки: 22 — 30 пикс.,

3. Обычный текст: 16–20 пикселей.

Курсив, полужирный, подчеркнутый

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

Готовы создать сайт своей мечты?

Попрощайтесь с хлопотами кодирования и поприветствуйте потрясающий профессиональный веб-сайт с первоклассным SEO уже сегодня!

НАЧАТЬ СЕЙЧАС

Готовы выбрать лучшие шрифты для своего сайта?

Для начала — вспомним, что нужно делать при выборе шрифта для сайта:

 

1. Определите характер вашего бренда

2. Определите цели текстов и шрифта на вашем сайте

3. Проверьте, есть ли в шрифте все нужные вам символы.

4. Проверьте лицензию на шрифт

5. Выберите основной и дополнительный шрифты

6. Умело комбинируйте шрифты

7. Стремитесь к удобному прочтению

 

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

Читайте также:

Кароль Андрушкув

генеральный директор БОУВ

Кароль — предприниматель и основатель 3 стартапов, в рамках которых он консультировал несколько сотен компаний. Он также отвечал за проекты крупнейших финансовых учреждений Европы на сумму более 50 миллионов евро.

 

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

категории:

ВСЕ Agentstva Sozdayte svoy sayt Vedeniye bloga Sovety dlya biznesa Biznes-prilozheniya Blestyashcheye portfolio i rezyume Frilansery i sozdateli SEO Sotsial’nyye media Onlayn marketing Veb-dizayn

ПОСЛЕДНИЕ ПОСТЫ:

Полное руководство для Midjourney: искусство подсказок

2023 April 18

Питание за счет продаж: создайте успешную целевую страницу для ресторана

2023 April 19

Как увеличить посещаемость блога — 21 совет блогерам

2023 March 27

23+ революционных маркетинговых инструмента на основе ИИ

2023 March 13

Как создать потрясающий свадебный сайт

2023 February 27

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

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

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

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

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

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

900 56 расширение 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 90 061 . Для этого мы создадим общий протокол. Назовем его 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 уже реализуют протокол UIContentSizeCategoryAdjusting , поэтому нам не нужно реализовывать AdjustsFontForContentSize Категория для них переменная, а мы для делаем UIButton .

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

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

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

• UIFont.preferredFont(forTextStyle:)
• UIFont.systemFont(ofSize:)
• UIFont.bol dSystemFont(ofSize:)
• и т. д.

 # 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.scaledFont(style:) и . apply(textStyle:) .

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

Надеюсь, вам понравилась эта статья!

До скорой встречи 👋

Ресурсы

• Автоматическое масштабирование шрифтов — Документация Apple для разработчиков
• Создание приложений с динамическим типом — Видео WWDC
• Динамические размеры шрифта — Руководство по пользовательскому интерфейсу
• Добавление пользовательского шрифта в ваше приложение — Документация разработчика Apple

Другие статьи из серии «Динамический шрифт»

• Масштабирование изображений
• Жирный текст с пользовательскими шрифтами
• Большое содержимое Зритель
• Динамический тип: адаптируемые макеты

Обзор динамической типографии — документация

Примечание. Для этой функции требуется GeneratePress 3. 1.0. или выше.

Параметры динамической типографики можно найти в разделе Настройка > Типографика .

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

Диспетчер шрифтов

Когда панель «Типографика» открыта, вы увидите Диспетчер шрифтов.

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

После выбора шрифта вы можете выбрать доступные варианты.

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

Если этот шрифт Google установлен локально, убедитесь, что этот параметр отключен .

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

Отображение шрифтов Google

В раскрывающемся списке отображения шрифтов Google есть 5 вариантов, чтобы понять каждый параметр, проверьте отображение шрифтов Google.

Диспетчер типографики

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

После выбора элемента вы увидите доступные варианты типографики.

Параметры типографики

Отзывчивость

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

Семейство шрифтов

Этот параметр управляет семейством шрифтов из списка шрифтов, созданного в Диспетчере шрифтов.

Толщина шрифта

Этот параметр определяет толщину контуров символов по отношению к их высоте.

Преобразование текста

Нет — Шрифт не меняется

Заглавные — Первая буква каждого слова будет заглавной

Верхний регистр — Все буквы будут заглавными

Нижний регистр — Все буквы будет в нижнем регистре

Стиль шрифта

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

Оформление текста

Этот параметр управляет внешним видом декоративных линий в тексте.