Выбор шрифта для веб-сайта является неотъемлемой частью и основной проблемой, т.к. влияние шрифта на визуальное восприятие сайта пользователем является ключевым. Если ты хотел бы узнать, как же систематизировать этот процесс? То данная статья точно для тебя.
Лучшая практика в выборе шрифтов
Предлагаю без прелюдий, сразу к делу.
Разбираем структуру
Давай разберём какой именно шрифт нам необходимо выбирать, точнее определим, для чего именно нужно выбрать шрифт.
Для этого, в первую очередь давай введем равенство между сайтом и документом с точки зрения структуры оформления текста. Структура обычного документа и сайта, т.е. страницы состоит из трех рабочих уровней.
Стандартная структура текстового документа
Если вы внимательно посмотрите на свои ранее созданные документы, то обнаружите, что подавляющем большинстве случаев вы используйте:
- Заголовок первого уровня, который применяется только один раз, в рамках этой статьи заголовком является её название “Как правильно выбрать шрифт для сайта или документа”;
- Подзаголовок, если мыслить категорией веб-страницы, то это заголовок второго уровня, т.е. тег <H2> - в данной статье вы его встретили под названием “Разбираем структуру”;
- Абзац - это основной текст, который ты сейчас читаешь.
У этих трех уровней текста допускается использование разных шрифтов, т.е для каждого уровня свой.
Таким образом, у заголовка должен быть яркий шрифт, который бросается в глаза читателю, т.е. привлекает внимание.
Далее яркость, красочность и привлекательность шрифта должна идти на угасание на каждом следующем уровне. Почему? Здесь ответ прост: заголовок читается пользователем один раз и быстро, а каждый последующий уровень текста будет все чаще попадаться на глаза читателю. Поэтому читаемость шрифта один из важных элементов типографики при работе с большими объемами текста.
Кроме того, шрифт подзаголовка и абзаца должны визуально отличаться, но при этом между ними должен сохраняться баланс или схожесть.
Какие есть для этого правила? Правил так много, что в результате дизайнеры просто выбирают шрифты по наитию, а потом набивают руку и у них формируется костяк любимых комбинаций. Правильнее сказать - костяк рабочих комбинаций шрифтов.
Почему так происходит? Просто потому, что сложно силами одного дизайнера систематизировать все таким образом, чтобы точно выбирать шрифт, поэтому в борьбу вступает сила опыта.
Как систематизировать или автоматизировать процесс выбора шрифта?
Очень просто. Мы живем в то время, когда нейросети обучаются разным практикам, в том числе и лучшим практикам выбора шрифта. Есть даже бесплатный инструмент, который помогает это сделать без особых затруднений.
Внешний вид инструмента Fontjoy
Инструмент Fontjoy очень прост в работе, однако стоит разобрать его интерфейс и некоторые нюансы в работе.
Рабочие области интерфейса Fontjoy
У инструмента Fontjoy есть три рабочие области:
- Настройка и генерация шрифтов;
- Вид подобранных шрифтов;
- Наименование подобранных шрифтов и их управление.
Нажав на кнопку Generate вы получите первую подборку:
Кнопка для генерации подборки шрифтов
Вроде на этом можно было бы и закончить? Но вы ведь понимаете, что есть нюансы.
Тренды в выборе шрифтов
Вы должны понимать, что подобранные шрифты для латиницы могут быть недоступны для кириллицы. Если вы читаете данную статью, то могу предположить, что сайты вы делаете преимущественно на русском языке, а значит и подбор шрифтов должен быть соответствующий.
Можно ли указать, что подбор шрифтов должен быть исключительно под кириллицу? Конечно. Для этого во втором разделе, т.е. там, где нам показывается вид шрифта, нам необходимо вставить русскоязычный текст. Да, там можно писать свой текст. Я вставлю текст из этой статьи и вновь сгенерирую набор шрифтов.
Подбор шрифтов для русскоязычного текста
Обрати внимание, как интересно он подобрал шрифты, а это только первое нажатие. Но если я нажму еще раз, то он сделает абсолютно новую подборку, а мне например понравился подобранный шрифт для абзаца и подзаголовка. Хочу подобрать только другое сочетание для заголовка.
Для этого в наименовании подобранных шрифтов я могу выбрать те шрифты, которые изменять ненужно.
Блокируем изменение понравившихся шрифтов
Поставьте замочки на тех уровнях текста, где больше не хотите подбирать шрифт и он вас устраивает, т.е. понравился.
Если сейчас нажать на кнопку Generate, то нейросеть будет пытаться подобрать еще один шрифт для заголовка и так бесконечно, пока вы не получите тот, который вам понравится.
Но у вас есть еще одна опция для регулирования:
Регулировка схожести шрифтов
Этот ползунок работает так, чем больше он подвинут вправо, тем более схожий шрифт пытается подобрать нейросеть, чем левее тем выше контрастность шрифта с другими, но больше вариативности для нейросети.
Я перемещу ползунок в крайнюю левую точку.
Подбор шрифта заголовка с высоким контрастом к другим уровням текста
Понажимав несколько раз на кнопку Generate я выбрал вот такой шрифт для заголовка, который точно будет бросаться в глаза будущему читателю.
При выборе шрифтов необходимо учитывать не только их визуальную составляющую, но и то, как они будут выглядеть на вашем фоне. В Fontjoy можно переключаться между темной и светлой темой.
Переключение фоновой темы
Подобранный набор неплохо смотрится и на светлой теме.
Светлая тема
Вот таким нехитрым образом вы теперь можете быстро подобрать все необходимые шрифты для вашего сайта или документа.
Если хочешь получать постоянно актуальную информацию по инструментам упрощающим вашу работу и участвовать в их обсуждении, то подписывайся на данный канал.
Спасибо за прочтение!
