May 8, 2018

Шрифты: сегодня для сайта

Мой Телеграмм-канал "Умный Лендинг"

Начнем с самого простого: какой у вас тип проекта — это статья, пост в блоге, рассказ, в общем, что-то, где текст — это главное? Или у вас сайт, лэндинг, фотоистория, — проект, в котором текста не так много? Назовем два типа проектов условно: статья и сайт.

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

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

# Полужирный заголовок и нормальный текст Semi-Bold+Normal

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

Для каких сайтов подойдет: для любых.

В настройках сайта задайте следующие параметры:

Text font weight — Normal

Headline font weight — Semi-Bold

Настройки сайта > Шрифты и цвета > Размер и насыщенность

Пример

Страница вакансии. В примере используются: Open Sans (для заголовков) и Roboto (для текста).

# Жирный заголовок и нормальный текст Bold+Normal

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

Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.

В настройках сайта задайте следующие параметры:

Text font weight — Normal

Headline font weight — Bold

Настройки сайта > Шрифты и цвета > Размер и насыщенность

Пример

Сайт коворкинга. В примере используются: Ubuntu (для заголовков) и PT Sans (для текста).

# Жирный заголовок и тонкий текст Bold+Light

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

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

В настройках сайта задайте следующие параметры:

Text font weight — Light

Headline font weight — Bold

Настройки сайта > Шрифты и цвета > Размер и насыщенность

Пример

Страница дизайн-студии. В примере используются: Noto Sans (для заголовков) и Open Sans (для текста).

# Тонкий заголовок и тонкий текст Light +Light

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

Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.

В настройках сайта задайте следующие параметры:

Text font weight — Light

Headline font weight — Light

Настройки сайта > Шрифты и цвета > Размер и насыщенность

Пример

Лэндинг мобильного приложения для обработки фотографий.

# Примеры сочетаний разных шрифтов

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

Сайт ювелирного магазина


Анонс конференции по разработке моюильных приложений


Сайт юридической компании

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

Остались вопросы? Хотите обсудить? Приглашаю чат.

Завтра я расскажу о том, как правильно подбирать шрифты для статьи.

А вы никуда не уходите) И если у вас есть желание пообщаться со мной, задать вопросы, попросить посмотреть ваш лендос или Телеграмм-канал, а также рассказать, какая тема вам интересна и вы хотели бы почитать что-то по ней, то милости прошу к нам в чат.

Я не прощаюсь!