Какие шрифты выбрать для сайта фотографа

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

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

У заголовка и основного текста разные задачи. Заголовок читают мельком, крупно, часто поверх фотографии, и он задаёт характер: строгий, мягкий, журнальный. Основной текст читают вдумчиво и почти всегда с телефона: описание услуг, условия съёмки, ответы на частые вопросы, текст о себе. Тут важна не эмоция, а то, насколько легко глаз проходит десять строк подряд.

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

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

Самый тихий вариант из всех. Helvetica ничего не добавляет от себя, не спорит с кадром и не пытается быть красивой отдельно от фотографии. Для fashion, репортажа, стрита и коммерческой съёмки это скорее плюс: внимание остаётся на снимках, а сайт читается как каталог.

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

Хорошо работает связка «жирный крупный заголовок плюс обычное начертание в тексте», как в примере с разворотом «Свет и тишина».

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

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

Пару стоит присмотреть тем, у кого на сайте реально много текста: блог, подробные описания пакетов, длинная страница «Обо мне».

Здесь логика обратная: гротеск наверху, антиква в тексте. Заголовок получается современным и сдержанным, а абзацы приобретают книжную интонацию, которая свадебным и editorial-съёмкам идёт больше, чем нейтральный интерфейсный шрифт.

Spectral сделан в Production Type по заказу Google Fonts специально для чтения с экрана, кириллицу для него рисовали в CSTM Fonts. У гарнитуры семь насыщенностей и курсивы, то есть хватит и на подписи, и на цитаты, и на длинный рассказ о том, как проходит съёмка.

Пара особенно хорошо смотрится там, где есть блоки «вопрос / ответ» и развёрнутые тексты про подготовку.

Самая тёплая пара из пяти. Forum Дениса Машарова построен на классических римских пропорциях, и в капсе, с чуть увеличенным межбуквенным расстоянием, он выглядит спокойно и дорого. EB Garamond продолжает ту же линию в тексте: старый рисунок, мягкие формы, ощущение бумажной книги.

Два практических момента. У Forum по сути одно начертание, поэтому выделять что-то полужирным не получится, иерархию придётся строить размером, разрядкой и воздухом вокруг заголовка. У EB Garamond небольшая высота строчных букв, так что основной текст стоит ставить на пункт-два крупнее привычного и обязательно проверить на телефоне: то, что на макбуке выглядит деликатно, на экране 5 дюймов может читаться с трудом.

Golos Text работает и как текстовый шрифт, и как заголовочный: в крупном кегле он выглядит уверенно и современно, без модного налёта, который через год начнёт выдавать дату сборки сайта. Cactus Classical Serif добавляет в текст лёгкую классическую ноту, при этом не утяжеляет страницу.

У Cactus Classical Serif одно начертание Regular, кириллица есть, в библиотеке Google Fonts он появился в 2024 году. Для основного текста этого достаточно, но держать на нём заголовки или выделения не выйдет, так что роли в паре лучше не менять местами.

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

1. Откройте главную страницу с настоящим портфолио, а не с демо-картинками из шаблона.
2. Поставьте пару целиком, сразу на заголовки и на текст.
3. Посмотрите страницу на телефоне с расстояния вытянутой руки. Если заголовок читается, а текст хочется увеличить пальцами, кегль мал.
4. Прочитайте целиком страницу «Обо мне» или описание съёмки. Усталость на пятой строке означает, что текстовый шрифт выбран неудачно, даже если заголовки нравятся.
5. Проверьте самые уязвимые места: белый текст поверх светлого кадра, подписи под фото, кнопки, цены.

Отдельно стоит учесть обработку. Тёмные плотные кадры и чёрно-белая серия спокойно выдерживают жёсткий гротеск, а светлая пастельная съёмка рядом с ним часто выглядит холодно. Под мягкую плёночную картинку лучше ложится антиква.

Три и больше гарнитур на одной странице. Сайт начинает выглядеть как коллаж, даже если каждый шрифт красивый.

Рукописные шрифты в основном тексте. В заголовке и логотипе они уместны, в абзаце про условия съёмки читаются плохо, особенно на телефоне.

Тонкие светлые начертания белым поверх фотографии. На тёмном участке кадра такой текст исчезает, а клиент просто не дочитывает.

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

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

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

Соберите сайт на Vigbo, поставьте свою съёмку на главную и примерьте пару под кадры, а не под описание жанра: решает всегда то, как шрифт выглядит поверх ваших фотографий.