Поиграйте шрифтами: как подобрать шрифт для сайта

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

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

Виды шрифтов 

Основная классификация шрифтов — по наличию засечек.

Serif
Шрифты с засечками. Засечки — это маленькие горизонтальные черточки на краях символов шрифта. Пример serif-шрифта — Domine.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Sans-serif
Шрифты без засечек. Пример sans-шрифта — Roboto.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Рукописные шрифты
Призваны имитировать рукописный текст. В большинстве своём — декоративные шрифты. Пример — Mr Bedfort.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Спор между любителями Sans-serif и Serif не угасает как минимум с конца 90-х. Проводились даже специальные исследования, призванные раз и навсегда определить, какой же вид лучше. Но исследования доказали только то, что Serif и Sans-serif примерно равны как в узнаваемости, так и в удобстве чтения. Так что, каким именно пользоваться на сайте, решать вам.

Есть также классификация по назначению.

Общие шрифты
Шрифты общего назначения. Могут применяться в интерфейсе приложения или сайта, в книге или журнале. Выглядят привычно и хорошо воспринимаются глазом. Хороший пример — Open Sans.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Декоративные шрифты
Вычурные шрифты, которые ставят внешний вид выше узнаваемости символов и легкости чтения. Обычно применяются в вывесках, баннерах и заголовках. Пример — Amarante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Моноширные шрифты
Шрифты с одинаковым горизонтальным расстоянием между всеми символами. У них очень высокая узнаваемость символов, но выглядят они крайне скучно. Обычно применяются в консолях, терминалах и документах технической направленности. Oxygen Mono — это моноширный шрифт.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Счастливое число

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

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

Чтобы избежать этой проблемы, обычно заголовки делают Sans, а основной текст — Serif.

Но можно использовать и два шрифта одного вида, если они сильно отличаются друг от друга. Например, Ubuntu и Abel.

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

Размер имеет значение

Обычно, текст на вебстранице делают высотой в 16 px (пикселей). Такой текст комфортно читать как с монитора, так и с телефона.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Текст высотой в 20 px подойдет для мобильной версии сайта.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Текст высотой в 30 px и более будет хорошо смотреться только в заголовках или на лендингах.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Минимально допустимый размер текста — 12 px. Более мелкий текст будет почти нечитаемым на экранах ноутбуков.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

На блоге Unihost, мы используем 18 px для обычного текста и 32px для заголовков.

Вопрос цены

В большинстве случаев, за красивые и популярные шрифты нужно платить. Например, одно начертание Neue Helvetica для сайта стоит $30 за 250 000 просмотров страницы. Всего в семействе 59 начертаний.

Есть и хорошие бесплатные шрифты, но они быстро распространяются по сети и становятся заезженными. Очень практичный Open Sans используется на 16 миллионах сайтов, а созданный Google шрифт Roboto недавно перешагнул отметку в 10 миллионов.

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

1. Istok Web — прекрасная альтернатива Roboto, Ubuntu и прочим популярным sans-шрифтам. Шрифт современный, стильный, а главное — самобытный.
2. Kelvinch — независимый serif-шрифт. Поддерживает латиницу, кириллицу, армянский, грузинский и греческий алфавиты, а также специальные символы и геометрические фигуры. При этом он смотрится немного современнее традиционных serif-шрифтов.
3. Bang Whack Pow! — «комиксовый» шрифт, который я считаю идеальной заменой Comics Sans.

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

Где искать шрифты

Искать шрифты можно:

1. На специализированных ресурсах. Например, Google Fonts, FontSquirrel или MyFonts.
2. В сообществах энтузиастов. Они обычно небольшие, но полезную информацию там всё же можно найти. Например, r/fonts на Reddit.