Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

онлайн–журнал для фотографов

Wfolio Journal

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

Подробное руководство по выбору шрифтов для сайта фотографа

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

Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Автор статьи: Мария Муратова

Руководитель команды по созданию сайтов и UX/UI-дизайнер. Специализируется на веб-дизайне и проектировании интерфейсов платформы.

Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Начните с впечатления, которое хотите создать

О том, как определить свой образ, мы подробно рассказали в статье «Как клиент выбирает фотографа». При выборе шрифтов этот образ станет ориентиром.

Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Мягкая, деликатная подача 

Попробуйте шрифты с плавными линиями и лёгким начертанием.

Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Энергичная, уверенная подача

Попробуйте шрифты с выразительными формами и плотным начертанием.

При этом не существует одного «свадебного» или «семейного» шрифта. Даже внутри одного жанра у фотографов разный подход. Поэтому примеряйте шрифт к своим работам и текстам: соответствует ли он тому, как вы снимаете и общаетесь с клиентами?

Какие бывают шрифты

Чтобы выбирать было проще, рассмотрим три группы шрифтов. Запоминать названия необязательно — важнее научиться замечать разницу в форме букв.

БЕЗ ЗАСЕЧЕК

У них нет засечек — маленьких штрихов на концах букв. Такие шрифты ещё называют гротесками.

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

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

Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

С ЗАСЕЧКАМИ

Такие шрифты называют антиквами. Небольшие штрихи на концах букв часто напоминают нам книжное или журнальное оформление.

Но и здесь характер бывает разным. Плавные формы могут выглядеть мягко и тепло. Тонкие линии в сочетании с толстыми — создавать более изящное или драматичное впечатление. Крупные заметные засечки — добавлять выразительности.

Смотрите на конкретный шрифт: само наличие засечек ещё не делает его романтичным или строгим.

Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

РУКОПИСНЫЕ

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

Такой шрифт можно попробовать для короткой фразы или отдельного акцента. Для длинных описаний он не подойдёт.

Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Как выбрать размер текста

Важно, чтобы заголовки заметно отличались от основного текста. Тогда человек сможет быстро просмотреть страницу и найти стоимость, условия или запись на съёмку.

Для первого варианта можно попробовать такие размеры:

  • заголовок — около 40–48 пикселей
  • подзаголовок — около 24–32 пикселей
  • основной текст — около 16–18 пикселей

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

Оценивайте результат на своих текстах. Если заголовок не помещается в 2–3 строки, попробуйте сократить фразу или немного уменьшить размер.

На первом экране размер заголовка стоит оценивать вместе с фотографией: текст должен хорошо читаться и не закрывать важные детали кадра. Подробнее об этом — в уроке про дизайн сайта (чек-лист) [добавить ссылку].

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

Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Шрифт в небольшом размере и прописными буквами выглядит сдержанно

Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Шрифт в крупном размере и заглавными буквами выглядит уверенно и выразительно

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

Как понять, что два шрифта сочетаются

СМОТРИТЕ НА КОНТЕНТ ЦЕЛИКОМ

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

Для сравнения возьмите фотографии, которые планируете оставить на сайте.

ОБРАТИТЕ ВНИМАНИЕ НА ФОРМУ И ТОЛЩИНУ БУКВ

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

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

РАЗДЕЛИТЕ ЗАДАЧИ ЗАГОЛОВКА И ОСНОВНОГО ТЕКСТА

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

Хорошая отправная точка

Выразительный шрифт для заголовков и нейтральный для основного текста.

Мы подобрали для вас несколько пар под разное настроение

Одного шрифта тоже достаточно

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

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

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

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

Выбирайте сочетание, в котором узнаёте себя

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

Посмотрите, помогают ли они передать ваш характер:

  • Подходит ли лёгкий заголовок к мягким фотографиям?
  • Поддерживают ли плотные буквы энергию съёмки?
  • Остаётся ли текст удобным для чтения?

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

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

Зарегистрируйтесь на Wfolio и попробуйте подобрать шрифты для своего сайта.

Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Прямой эфир с Артуром Погосяном

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

Право на плохой кадр

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

Кантен де Брие

Бельгийский фотограф, который снимает для ведущих модных изданий и брендов. Он сформировал свой узнаваемый стиль...
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Структура сайта фотографа

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

РАБОТА С ФОТОСТУДИЯМИ

Разбираемся, какие требования студия вправе предъявлять клиенту, а какие противоречат законодательству о защите прав...
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Первая платная съёмка

Почему начинающим фотографам бывает сложно назначить цену за свои съёмки и как преодолеть страх перед первой платной...
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Как клиент выбирает фотографа

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

Прямой эфир с Игорем Цаплиным

Поговорили о том, что ждёт фотографов в 2027 году: нейросети, маркетинг и «сарафанное радио».
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Новые способы оформления сайта

Выбирайте прямые или скруглённые углы для фото и кнопок, оформляйте пакеты съёмок карточками и выделяйте важные...
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

Прямой эфир с Сергеем Беликовым

В эфире Wfolio известный школьный фотограф Сергей Беликов рассказал о своем пути к успеху, избавлении от рутины...
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

ЮРИДИЧЕСКАЯ ПРОВЕРКА САЙТА

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

Герб Ритц

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

Прямой эфир про продвижение сайта в поиске

Как сделать сайт фотографа заметнее? Разбираем основы SEO, скорость загрузки, поведение посетителей и простые шаги,...
Как выбрать шрифты для сайта. Wfolio — конструктор сайтов и облачный диск для фотографов

АВТОРСКИЕ ПРАВА НА AI–КОНТЕНТ

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

SEO сайта фотографа

Поисковые системы остаются самыми популярными ресурсами в интернете. Люди ежедневно ищут там информацию, специалистов...

⭐️ Скидка %{COUPON_VALUE} + галереи бесплатно. Промокод %{COUPON_CODE}. Получить скидку ⭐️

На сайте используются файлы cookie для работы сайта и анализа посещаемости. Политика конфиденциальности