Подбираем шрифт для сайта с помощью онлайн сервисов

Это пост будет интересен тем кто в данный момент думает над типографикой сайта. Если разрабатываете какой-то новый проект с нуля или затеяли редизайн, вам могут пригодится два интересных сервиса с которыми я хочу вас познакомить. Первый сервис поможет вам заполнить макет подстановочным текстом (он же «рыба»), второй — определиться с его стилем.

Когда «колдуешь» над новым макетом обычно содержимого еще нет, в то время как оно уже требуется. Требуется потому что без него сложно оценить то что у тебя получается и как будет выглядеть впоследствии. К тому же бывает делаешь не для себя, а для кого-то и этому кому-то хочется посмотреть промежуточные стадии.

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

Гораздо опрятнее будет использовать стандартную «рыбу» вроде «Lorem ipsum», которая не содержит смысла и не отвлекает. В этом и есть ее прелесть и предназначение. Поэтому многие дизайнеры используют для разработки софт, где есть функция заполнения «болваночным» текстом. Или имеет заготовленный вордовский файл-болвану.

Font Combination Tool

По инструменту Font Combination Tool у нас был отдельный обзор — переходите по ссылке и читайте всю информацию там. Его принцип работы максимально прост — выбираете из списока определенный шрифт, и система подбирает для вас наиболее удачные и эффективные комбинации. При этом она рисует макет с типовыми блоками на веб-странице.

Blind Text Generator

Более изящным вариантом решения задачи, озвученной в начале статьи, может стать использование сервиса Blind Text Generator, который делает тоже самое, но более интересно и разнообразно:

Наверное, кто-то назовет Blind Text Generator сервисом бесполезным, потому что единственная его задача — давать образцы галиматьи и бессмысленности. С другой стороны, как иногда полезно иметь таки образцы под рукой! К тому же он предлагает не только всем надоевший стандартный «Lorem ipsum», но и ряд других вариантов!

TypeTester

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

Гораздо проще выставить в трех колонках те варианты которые вам нравятся (кстати, в качества текста можете использовать «рыбу» с Blind Text Generator) и сравнить их между собой. Причем увидите текст вы сразу во всевозможных написаниях — обычном, полужирном, жирном и так далее:

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

Дальше я думаю вы и без меня знаете что с ним делать. Удачных вам экспериментов!

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

А как вы подбираете шрифты для будущего сайта? Сразу при создании макета в фотошопе?

P.S. Постовой. Студия Oznaka — качественная разработка сайта в Киеве.