Как выбрать правильный шрифт для сайта и статьи
Руководство, которое поможет выбрать шрифт, не погружаясь в теорию.
Шрифт — это важно. Как воздух, который не замечаешь, пока все в порядке. Большинство людей понятия не имеют, как называются шрифты и чем они различаются (и это нормально), но безошибочно чувствуют, что с сайтом что-то не то, если шрифт, который вы используете, не подходит проекту.
Мы исходили из того, что вы делаете сайт на Тильде. По нашему мнению, на данный момент это самый удобный способ создать сайт самостоятельно, без программиста и дизайнера.
В статье мы рассмотрели:
Как поменять и настроить шрифт на Тильде
Настройка параметров шрифта для разных типов проекта
Настройка шрифтов для сайта в зависимости от тональности
Примеры сочетаний разных шрифтов
Как подобрать шрифт для статьи
Как подключить шрифт, которого нет в базовом наборе
Где купить шрифты или найти бесплатные
Список хороших шрифтов, в которых есть кириллица
Как обеспечить читабельность текста
Как поменять и настроить шрифт на Тильде
Настройка параметров шрифта для разных типов проекта
Настройка шрифтов для сайта в зависимости от тональности
Примеры сочетаний разных шрифтов
Как подобрать шрифт для статьи
Как подключить шрифт, которого нет в базовом наборе
Где купить шрифты или найти бесплатные
Список хороших шрифтов, в которых есть кириллица
Как обеспечить читабельность текста
Как поменять и настроить шрифт для сайта на Тильде
Шрифт задается в настройках сайта. Это значит, что параметры будут применяться глобально: ко всем блокам на всех страницах сайта. Таким образом поддерживается общий стиль и аккуратность.
Максимальное количество шрифтов, которое можно подключить — два. С одной стороны, использовать небольшое количество шрифтов — хорошая практика с точки зрения визуального стиля в целом. С другой, каждый дополнительный шрифт сильно увеличивает вес страницы. Поэтому, чтобы скорость загрузки была приемлемой, шрифта только два.
В настройках сайта на вкладке шрифты и цвета вы увидите галерею шрифтов.
Пролистайте её, возможно, вы найдете то, что вам нужно. Нажмите кнопку «Выбрать» и «Сохранить изменения». Шрифты на вашем сайте поменяются.
Пролистайте её, возможно, вы найдете то, что вам нужно. Нажмите кнопку «Выбрать» и «Сохранить изменения». Шрифты на вашем сайте поменяются.
Настройки сайта → Шрифты и цвета.
Если представленные сочетания вам не подошли, нажмите «Расширенные настройки». Вы увидите все способы, как подключить шрифт к сайту на Тильде:
1) выбрать из базового набора
2) использовать Google Fonts
3) использовать Adobe Fonts
4) загрузить свой файл
5) загрузить свой CSS файл
(По ссылкам подробные инструкции по каждому типу подключения).
1) выбрать из базового набора
2) использовать Google Fonts
3) использовать Adobe Fonts
4) загрузить свой файл
5) загрузить свой CSS файл
(По ссылкам подробные инструкции по каждому типу подключения).
Настройки сайта → Шрифты и цвета → Расширенные настройки.
Если вы пролистаете страницу ниже, то увидите настройки размера, насыщенности и цветов текста. Параметры, которые вы укажете тут, будут применены ко всем страницам сайта. Если в каких-то отдельных блоках вам нужно будет их поменять, это можно будет сделать в редакторе для конкретного блока.
Настройки сайта → Шрифты и цвета → Расширенные настройки → Размер, насыщенность и цвета.
Что такое насыщенность шрифта
Насыщенность (начертание, font weight) определяет толщину каждой буквы. Обычно мы привыкли называть текст нормальным (normal) и жирным (bold). У шрифтов могут быть также дополнительные варианты толщин — от очень тонких (super light) до очень жирных (super bold). Не все шрифты имеют все градации насыщенности, многие имеют только два начертания: нормальное и жирное. Для базового набора на Тильде поддерживаются 5 основных значений: light, normal, medium, semi-bold, bold. Но если загружать шрифт с помощью файла, можно добавить дополнительные начертания.
Семь вариантов насыщенности шрифта Avenir.
Каким должен быть размер шрифта на сайте
Размер зависит от количества текста. Если текста очень мало и он используется, по сути, только для подписей и комментариев, сделайте шрифт крупнее — 22px (по умолчанию в настройках 20px). Так он будет выглядеть более презентационно.
Если текста достаточно много, наоборот уменьшите шрифт до 18px, так он будет легче читаться.
Если текста достаточно много, наоборот уменьшите шрифт до 18px, так он будет легче читаться.
Настройка параметров шрифта для разных типов проекта
Начнем с самого простого: какой у вас тип проекта? Это статья, пост в блоге, рассказ, в общем, что-то, где текст — это главное? Или у вас сайт, лендинг, фотоистория, — проект, в котором текста не так много? Назовем два типа проектов условно: статья и сайт.
(лендинг, многостраничный сайт, интернет-магазин)
(пост в блоге, лонгрид, рассказ, интервью)
Настройка шрифтов для сайта в зависимости от тональности
Когда вы только приступаете к дизайну сайта, подумайте, подойдет ли вам шрифт, который установлен по умолчанию, потому что он должен соответствовать тону вашего проекта. Сайт детского спортивного лагеря и сайт архитектурной студии — это проекты, которые имеют разную тональность. Выразить ее можно с помощью насыщенности.
Мы рассмотрим 4 варианта сочетаний разной насыщенности в заголовках и в тексте. Они помогут выразить тональность сайта, чтобы он выглядел гармонично и у вас получится хороший проект.
Полужирный заголовок и нормальный текст
Semi-Bold+Normal
Это самое базовое сочетание, которое будет хорошо работать в большинстве случаев. Используйте, если ваша задача сделать просто хороший сайт без ярко выраженного акцента.
Для каких сайтов подойдет: для любых.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Semi-Bold
Для каких сайтов подойдет: для любых.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Semi-Bold
Настройки сайта → Шрифты и цвета → Размер и насыщенность.
Страница студии загара. В примере используется: Tilda Sans.
Жирный заголовок и нормальный текст
Bold+Normal
Тоже довольно распространенное, устойчивое сочетание. Рекомендуем его использовать, если вы хотите подчеркнуть, что ваш проект — это драйв и энергия.
Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold
Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold
Настройки сайта → Шрифты и цвета → Размер и насыщенность.
Страница курса живописи. В примере используется Arial.
Жирный заголовок и тонкий текст
Bold+Light
Более необычное сочетание, выглядит эффектно за счет контраста. Уместно в случае, когда вам нужно сочетать и драйв, и стиль
Для каких сайтов подойдет: мы использовали такое сочетание на лендинге нашего курса «Интернет-маркетинг с нуля». С одной стороны, нам нужны были яркие, хорошо читаемые заголовки, с другой стороны, текст должен был передать эстетику качественного оформления курса.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Bold
Для каких сайтов подойдет: мы использовали такое сочетание на лендинге нашего курса «Интернет-маркетинг с нуля». С одной стороны, нам нужны были яркие, хорошо читаемые заголовки, с другой стороны, текст должен был передать эстетику качественного оформления курса.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Bold
Настройки сайта → Шрифты и цвета → Размер и насыщенность.
Страница проектов интерьерного бюро.
В примере используются: Montserrat для заголовков и Open Sans для текста.
Тонкий заголовок и тонкий текст
Light+Light
Сочетание для проектов, связанных с высокими технологиями, чем-то прогрессивным и современным. Либо эстетичным и стильным. Особенно хорошо сработает, если у вас много белого пространства и есть небольшие акценты ярких цветов. И красивые фотографии.
Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Light
Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Light
Настройки сайта → Шрифты и цвета → Размер и насыщенность.
Страница сайта по уходу за растениями. В примере используется Futura.
Примеры сочетаний разных шрифтов
Сочетая разные шрифты в заголовках и в тексте, можно добиться разного эффекта, выразить характер и тональность сайта.
Как подобрать шрифт для статьи
В статье самое главное, чтобы текст читался максимально легко. Поэтому он должен быть контрастным и не слишком крупным.
Если у вас лонгрид или статья, в которой много текста, поставьте размер текста 18px. Но если у вас фотоотчет и текст — это в основном подписи к фотографиям, то размер можно оставить 20px или увеличить до 22px.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold / Semi-Bold
Text font size — 18px
Если у вас лонгрид или статья, в которой много текста, поставьте размер текста 18px. Но если у вас фотоотчет и текст — это в основном подписи к фотографиям, то размер можно оставить 20px или увеличить до 22px.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold / Semi-Bold
Text font size — 18px
Настройки сайта → Шрифты и цвета → Размер и насыщенность.
Статья в блоге о ювелирной коллекции
Главная страница сайта бренда украшений.
В примере используются: Playfair Display для заголовков и Open Sans для надзаголовков.
Страница с информацией о новой коллекции украшений.
В примере используются: Playfair Display для цитат и Open Sans для текста.
Статья в корпоративном блоге
Обложка статьи в блоге. В примере используется Futura.
Текст статьи про Сантк-Петербург. В примере используется Futura.
Статья про Landing page
Обложка статьи про Landing page.
В примере используются: Druk Text Wide для заголовка и Tilda Sans для надзаголовка.
Текст статьи про Landing page.
В примере используются: Druk Text Wide для заголовков и Tilda Sans для текста.
С засечками или без?
Шрифт без засечек
Шрифт с засечками
Оранжевые частицы на изображении — это засечки. Цитата Массимо Винелли на картинке слева набрана шрифтом Helvetica Light, справа — Baskerville Regular.
Долгое время считалось, что шрифт с засечками лучше читается, так как засечки образуют направляющую линию и взгляду удобнее и быстрее скользить вдоль нее.
С появлением первых компьютеров стали распространены шрифты без засечек, так как на экранах с низким разрешением более разборчиво выглядели шрифты простой формы.
Современные дисплеи одинаково хорошо отображают и те, и другие. Поэтому сейчас выбор «с засечками или без» – вопрос характера сообщения, а не читабельности. Шрифты с засечками могут задавать более формальный тон и быть подходящими для некоторых брендов.
С появлением первых компьютеров стали распространены шрифты без засечек, так как на экранах с низким разрешением более разборчиво выглядели шрифты простой формы.
Современные дисплеи одинаково хорошо отображают и те, и другие. Поэтому сейчас выбор «с засечками или без» – вопрос характера сообщения, а не читабельности. Шрифты с засечками могут задавать более формальный тон и быть подходящими для некоторых брендов.
Как подключить шрифт, которого нет в базовом наборе
Во всех примерах, которые мы приводили выше, использованы шрифты из базового набора. Чтобы их поменять, нужно перейти в настройки сайта и выбрать шрифт из списка. Но кроме этого, на Тильде можно подключить абсолютно любой шрифт, даже если его нет в списке.
Где купить шрифты или найти бесплатные
На Тильде можно подключить шрифт пятью способами:
1
Выбрать из тех, которые есть в настройках. Мы отобрали 25 хороших шрифтов из открытых источников и от наших партнеров.
2
Загрузить на Тильду свой файл шрифта. В этом случае его нужно где-то взять, например, купить на:
Paratype
Цена стартует от 300 рублей за шрифт, есть у сервиса и бесплатные начертания.
Каждый месяц бывают распродажи и можно приобрести понравившийся вариант с приятной скидкой.
TypeType
Сервис дает возможность бесплатно использовать понравившийся шрифт в прототипе сайта. Если же вы хотите опубликовать проект с этим шрифтом, нужно оплатить лицензию.
Цена за шрифт от 1000 рублей.
Type.today
Магазин предлагает на выбор множество универсальных шрифтов от современных до более классических вариантов.
Средняя цена 2500 рублей.
Инструкция по загрузке своего файла шрифта на Тильде.
Paratype
Цена стартует от 300 рублей за шрифт, есть у сервиса и бесплатные начертания.
Каждый месяц бывают распродажи и можно приобрести понравившийся вариант с приятной скидкой.
TypeType
Сервис дает возможность бесплатно использовать понравившийся шрифт в прототипе сайта. Если же вы хотите опубликовать проект с этим шрифтом, нужно оплатить лицензию.
Цена за шрифт от 1000 рублей.
Type.today
Магазин предлагает на выбор множество универсальных шрифтов от современных до более классических вариантов.
Средняя цена 2500 рублей.
Инструкция по загрузке своего файла шрифта на Тильде.
3
Подключить через Adobe Fonts. Это библиотека шрифтов.
— Бесплатный тарифный план: более 2 000 шрифтов.
— Платный стоит $10 в год и дает доступ к более чем 20 000 шрифтам.
— Доступ к тем же 20 000 шрифтов имеют подписчики Adobe Creative Cloud. Если вы платите за Creative Cloud, платить за Adobe Fonts дополнительно не нужно.
Инструкция по подключению шрифта через Adobe Fonts на Тильде.
— Бесплатный тарифный план: более 2 000 шрифтов.
— Платный стоит $10 в год и дает доступ к более чем 20 000 шрифтам.
— Доступ к тем же 20 000 шрифтов имеют подписчики Adobe Creative Cloud. Если вы платите за Creative Cloud, платить за Adobe Fonts дополнительно не нужно.
Инструкция по подключению шрифта через Adobe Fonts на Тильде.
4
5
Загрузить свой CSS файл.
Инструкция как подключить шрифт через файл CSS.
Список хороших шрифтов, в которых есть кириллица
Tilda Sans. Где скачать: tilda.cc/lp/tildasans
GT Walsheim. Где купить: grillitype.com/typefaces/gt-walsheim
Proxima Nova. Где купить: paratype.ru/fonts/ms/proxima-nova
Franklin Gothic. Где купить: paratype.ru/fonts/pt/itc-franklin-gothic
Museo. Где купить: paratype.ru/fonts/ex/museo-sans
20 Копеек. Где купить: yurigordon.com/ru/shop/fonts/20kopeek
Vast. Где купить: paratype.ru/fonts/pt/vast
Nagel. Где купить: paratype.ru/fonts/pt/nagel
Code Next. Где купить: paratype.ru/fonts/fb/code-next
Oddval. Где купить: paratype.ru/fonts/spa/oddval
Mont. Где купить: paratype.ru/fonts/fb/mont
DIN 2014. Где купить: paratype.ru/fonts/pt/din-2014
Как обеспечить читабельность текста
Какой бы шрифт вы не выбрали, он должен хорошо читаться. Особенно, если вы используете фоновую фотографию. Если поставить тонкое начертание на фотографию с мелкими деталями, текст читаться не будет. Всегда обращайте на это внимание.
Что можно сделать? Во-первых, использовать фото, подходящее для фона: с крупными и однородными элементами. Во-вторых, приглушить фотографию с помощью фильтра, она станет ровнее и текст будет читаться лучше. В-третьих, можно у конкретного блока увеличить насыщенность, применяя «инлайновый стиль». Это значит, что вы задаете настройки не для всего сайта, а только для части текста. Нужно выделить текст и задать параметры через редактор.
В Zero Block выделите текст → Панель редактирования → Font weight.
В Zero Block выделите текст → Панель редактирования → Font weight.
Стиль, который применятся таким образом, поверх глобальных настроек, всегда будет приоритетным. Поэтому, если вдруг вы меняете параметры шрифта в настройках сайта, а изменения не видны, значит в этом месте применен «инлайновый стиль». Чтобы его убрать, нужно выделить текст и нажать иконку «очистить».
Текст плохо читается
Текст хорошо читается
На обложке слева текст почти не читается. Чтобы это исправить, мы взяли фотографию, на которой не так много мелких деталей, добавили синий фильтр 40% и увеличили насыщенность шрифта.
На первой обложке текст почти не читается. Чтобы это исправить, мы взяли фотографию, на которой не так много мелких деталей, добавили синий фильтр 40% и увеличили насыщенность шрифта. Это вторая обложка.
Если тема выбора шрифта вам интересна, найдите хорошие сайты, близкие к вашему проекту, и посмотрите какие шрифты они используют. Определить это поможет расширение для браузера What Font.
Также можно заглянуть на независимый архив типографики Fontsinuse — ресурс, на котором собраны и рассортированы образцы вебсайтов и печатных изданий по типу использованного шрифта.
Также можно заглянуть на независимый архив типографики Fontsinuse — ресурс, на котором собраны и рассортированы образцы вебсайтов и печатных изданий по типу использованного шрифта.
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Читайте также:
