Черная пятница в UPROCK! 5 дней до конца распродажи!

Кто лучше подбирает шрифтовые пары — AI или дизайнеры?

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

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

А как вы составляете шрифтовые пары? Просто выбираете два шрифта, которые относительно хорошо смотрятся вместе? Или стараетесь следовать рекомендациям по подбору шрифтов, например, сопоставлять высоту строчных букв? Может быть, вы просто используете семейство шрифтов, например Roboto и Roboto Serif?

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

Давайте протестируем несколько AI-инструментов для подбора шрифтов и составления шрифтовых пар. Насколько они хороши? Можем ли мы чему-то у них поучиться?

FONTJOY

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

Вы можете самостоятельно выбрать шрифт для заголовков или основного текста. Например, я выбрал для заголовков Raleway Bold. Теперь можно закрепить его, нажав на иконку замочка слева, и решить, какое сочетание вам нужно — на основе контраста или сходства. Сверху расположен ползунок с 5 вариантами: высокий контраст, более контрастные, сбалансированный контраст, более похожие и очень похожие. Я выбрал высокий контраст и в предвкушении нажал кнопку «Сгенерировать».

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

Первая рекомендация Fontjoy оказалась на удивление удачной: Raleway + Arapey + Hind Guntur

Я снова нажимаю кнопку «Сгенерировать», и... полное разочарование. Теперь мне предлагают использовать Snowburst One для подзаголовков и Scope One для основного текста. Последнее — вполне приличная рекомендация, но шрифт для подзаголовков — полностью мимо. Я сразу же теряю веру в этот инструмент.

Вторая рекомендация — полный провал

Я еще несколько раз нажимаю кнопку «Сгенерировать». Инструмент показывает больше вариантов, но они кажутся невыразительными. Я не уверен, удачные это сочетания или нет. Некоторые шрифты повторяются из раза в раз. Каждое шестое предложение оказывается совершенно провальным. К этой категории я отношу те комбинации, которые я никогда не буду использовать, преимущественно потому, что они включают слишком декоративные шрифты, как, например, упомянутый выше Snowburst One.

Я также считаю неудачным выбором для основного текста шрифт Montserrat Alternatives. Он отличается ярко выраженным характером и совершенно не подходит для этих целей.

Третья рекомендация также оказалась неудачной

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

Плюсы Fontjoy:

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

Минусы Fontjoy:

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

Другие похожие инструменты

CHATGPT

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

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

Чтобы протестировать ChatGPT, я сформулировал простой запрос:

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

Всего я получил 5 ответов, давайте рассмотрим 3 из них. 

Первое, что предложил мне ChatGPT, — Montserrat Bold для заголовков и Cormorant Garamond Regular для основного текста. Вот как он объяснил свое решение:

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

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

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

А вот как будет выглядеть эта шрифтовая пара:

Второй вариант — Playfair Display Italic для заголовков и Raleway Regular или Light для основного текста. Вот почему были выбраны именно эти шрифты:

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

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

По моему мнению, начертание Light для основного текста — плохая идея. Тонкие шрифты не подходят для длинных текстов. Их слишком трудно читать. Давайте используем начертание Regular. Вот как будет выглядеть такая шрифтовая пара:

Последнее предложение — Montserrat для заголовков и Lora для основного текста. Вот почему ChatGPT считает, что это сочетание соответствует моему запросу:

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

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

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

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

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

Подбор шрифтов

Последнее, что я хотел опробовать, — возможности ChatGPT по подбору шрифтов. Я придумал запрос: «Какой бесплатный шрифт подойдет для создания женственных, современных, дружелюбных заголовков?».

Я получил 3 ответа: ChatGPT дважды предложил мне Quicksand и один раз Cormorant.

Quicksand — совсем не то, что я себе представлял, но это вполне приемлемый вариант. Cormorant — интересная рекомендация. Вот как выглядит эта пара:

А вот объяснения ChatGPT, почему он выбрал именно эти шрифты:

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

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

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

Вот краткое описание того, как обучается ChatGPT:

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

Плюсы ChatGPT:

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

Минусы ChatGPT:

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

Заключение

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

Шрифтовая пара — это не просто механическое сочетание шрифтов. Fontjoy учитывает такие характеристики шрифта, как начертание и наклон. Но этого недостаточно.

Вот что анализирует опытный дизайнер при выборе шрифта:

  1. Какова цель текста/веб-сайта?
  2. Какие чувства хочет вызвать автор?
  3. Как визуальные свойства шрифта согласуются с содержанием текста?
  4. Выглядит ли он оригинально, но при этом соответствует основным типографским правилам?
  5. Общая конструкция шрифта.
  6. Разборчивы ли ключевые символы?
  7. Как выглядит шрифт в сочетании с реальным контентом?
  8. Как выглядит шрифт в разных размерах, начертаниях и стилях?
  9. Достаточно ли он читабельный для основного текста?
  10. Выделяются ли какие-то визуальные особенности шрифта в негативном смысле?

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

Таким образом, есть 2 основных аспекта оценки шрифтов — смысловой (вопросы 1–4) и визуальный (вопросы 5–10). Инструменты, подобные Fontjoy, полностью сосредоточены на визуальной составляющей, а ChatGPT занимает промежуточную позицию (см. график ниже). 

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

Два аспекта оценки шрифтов — визуальный и смысловой

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

Я обсуждал эту тему с Майком Зетлоу, опытным дизайнером, и вот что он сказал:

Бренды — это нечто большее, чем пара прилагательных. Я не приступаю к выбору шрифтов до тех пор, пока не получу 100% текста и изображений. Существует множество нюансов, и это большая работа — взять все исходные данные и принять творческое решение о том, какой шрифт лучше всего их отражает. Конечно, что-то очевидное, типа Raleway, подойдет тем, кто начинает свой собственный блог, но в реальных проектах всё гораздо сложнее.

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

Источник
и
:
arrow