Как выбрать правильный шрифт для сайта и статьи
Руководство, которое поможет выбрать шрифт, не погружаясь в теорию.
Шрифт — это важно. Как воздух, который не замечаешь, пока все в порядке. Большинство людей понятия не имеют, как называются шрифты и чем они различаются (и это нормально), но безошибочно чувствуют, что с вашим сайтом что-то не то, если шрифт, который вы используете, не подходит вашему проекту.
Мы исходили из того, что вы делаете сайт на Тильде. По нашему мнению, на данный момент это самый удобный способ создать сайт самостоятельно, без программиста и дизайнера.
В статье мы рассмотрели:
Как поменять и настроить шрифт на Тильде
Настройка параметров шрифта для разных типов проекта
Настройка шрифтов для сайта в зависимости от тональности
Примеры сочетаний разных шрифтов
Как подобрать шрифт для статьи
Как подключить шрифт, которого нет в базовом наборе
Где купить шрифты или найти бесплатные
Список хороших шрифтов, в которых есть кириллица
Как обеспечить читабельность текста
Как поменять и настроить шрифт на Тильде
Настройка параметров шрифта для разных типов проекта
Настройка шрифтов для сайта в зависимости от тональности
Примеры сочетаний разных шрифтов
Как подобрать шрифт для статьи
Как подключить шрифт, которого нет в базовом наборе
Где купить шрифты или найти бесплатные
Список хороших шрифтов, в которых есть кириллица
Как обеспечить читабельность текста
Как поменять и настроить шрифт для сайта на Тильде
Шрифт задается в настройках сайта. Это значит, что параметры будут применятся глобально: ко всем блокам на всех страницах сайта. Таким образом поддерживается общий стиль и аккуратность.
Максимальное количество шрифтов, которое можно подключить — два. С одной стороны, использовать небольшое количество шрифтов — хорошая практика с точки зрения визуального стиля, в целом. С другой, каждый дополнительный шрифт сильно увеличивает вес страницы. Поэтому, чтобы скорость загрузки была приемлемой, шрифта только два.
В настройках сайта, на вкладке шрифты вы увидите шрифтовые пары — это сочетания двух шрифтов, подобранные нашими дизайнерами. Пролистайте их, возможно, вы найдете то, что вам нужно. Нажмите кнопку «Выбрать» и «Сохранить изменения». Шрифты на вашем сайте поменяются.
Если представленные сочетания вам не подошли, нажмите «Расширенные настройки». Вы увидите все способы, как подключить шрифт к сайту на Тильде:
1) выбрать из базового набора
2) загрузить свой файл
3) подключить шрифт через Typekit
4) использовать Google Fonts
5) загрузить свой CSS файл
(По ссылкам подробные инструкции по каждому типу подключения).
1) выбрать из базового набора
2) загрузить свой файл
3) подключить шрифт через Typekit
4) использовать Google Fonts
5) загрузить свой CSS файл
(По ссылкам подробные инструкции по каждому типу подключения).
Если вы пролистаете страницу ниже, вы увидите настройки размера, насыщенности и цветов. Параметры, которые вы укажете тут, будут применены ко всем страницам сайта. Если в каких-то отдельных блоках вам нужно будет их поменять, это можно будет сделать в редакторе для конкретного блока.
Что такое насыщенность шрифта
Насыщенность (начертание, font weight) определяет толщину каждой буквы. Обычно мы привыкли называть текст нормальным (normal) и жирным (bold). У шрифтов могут быть так же дополнительные варианты толщин — от очень тонких (super light) до очень жирных (super bold). На Тильде поддерживаются 5 основных значений: light, normal, medium, semi-bold, bold. Не все шрифты имеют все градации насыщенности, многие имеют только два начертания: нормальное и жирное.
Семь вариантов насыщенности шрифта Avenir.
Каким должен быть размер шрифта на сайте
Размер зависит от количества текста. Если текста очень мало, и он используется, по сути, только для подписей и комментариев, сделайте его крупнее — 22px (по умолчанию в настройках 20px). Так он будет выглядеть более презентационно. Если текста достаточно много, наoборот, уменьшите до 18px, так он будет легче читаться.
Настройка параметров шрифта для разных типов проекта
Начнем с самого простого: какой у вас тип проекта — это статья, пост в блоге, рассказ, в общем, что-то, где текст — это главное? Или у вас сайт, лэндинг, фотоистория, — проект, в котором текста не так много? Назовем два типа проектов условно: статья и сайт.
Настройка шрифтов для сайта в зависимости от тональности
Когда вы только приступаете к дизайну сайта, подумайте, подойдет ли вам шрифт, который установлен по умолчанию, потому что он должен соответствовать тону вашего проекта. Сайт детского спортивного лагеря и сайт архитектурной студии — это проекты, которые имеют разную тональность. Выразить ее можно с помощью насыщенности.
Мы рассмотрим 4 варианта сочетаний разной насыщенности в заголовках и в тексте. Они помогут выразить тональность сайта, чтобы он выглядел гармонично и у вас получится хороший проект.
1
Полужирный заголовок и нормальный текст
Semi-Bold+Normal
Это самое базовое сочетание, которое будет хорошо работать в большинстве случаев. Используйте, если ваша задача сделать просто хороший сайт без ярко выраженного акцента.
Для каких сайтов подойдет: для любых.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Semi-Bold
Для каких сайтов подойдет: для любых.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Semi-Bold
Настройки сайта > Шрифты и цвета > Размер и насыщенность
Пример
Страница вакансии. В примере используются: Open Sans (для заголовков) и Roboto (для текста).
2
Жирный заголовок и нормальный текст
Bold+Normal
Тоже довольно распространенное, устойчивое сочетание. Рекомендуем его использовать, если вы хотите подчеркнуть, что ваш проект — это драйв и энергия.
Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold
Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold
Настройки сайта > Шрифты и цвета > Размер и насыщенность
Пример
Сайт коворкинга. В примере используются: Ubuntu (для заголовков) и PT Sans (для текста).
3
Жирный заголовок и тонкий текст
Bold+Light
Более необычное сочетание, выглядит эффектно за счет контраста. Уместно в случае, когда вам нужно сочетать и драйв, и стиль
Для каких сайтов подойдет: Например, такое сочетание мы использовали на лэндинге нашего курса «Интернет-маркетинг с нуля». С одной стороны, нам нужны были яркие, хорошо читаемые заголовки, с другой стороны, текст должен был передать эстетику качественного оформления курса.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Bold
Для каких сайтов подойдет: Например, такое сочетание мы использовали на лэндинге нашего курса «Интернет-маркетинг с нуля». С одной стороны, нам нужны были яркие, хорошо читаемые заголовки, с другой стороны, текст должен был передать эстетику качественного оформления курса.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Bold
Настройки сайта > Шрифты и цвета > Размер и насыщенность
Пример
Страница дизайн-студии. В примере используются: Noto Sans (для заголовков) и Open Sans (для текста).
4
Тонкий заголовок и тонкий текст
Light +Light
Сочетание для проектов, связанных с высокими технологиями, чем-то прогрессивным и современным. Либо эстетичным и стильным. Особенно хорошо сработает, если у вас много белого пространства и есть небольшие акценты ярких цветов. И красивые фотографии.
Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Light
Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Light
Настройки сайта > Шрифты и цвета > Размер и насыщенность
Пример
Лэндинг мобильного приложения для обработки фотографий.
Примеры сочетаний разных шрифтов
Сочетая разные шрифты в заголовках и в тексте, можно добиться разного эффекта, выразить характер и тональность сайта.
Как подобрать шрифт для статьи
В статье самое главное, чтобы текст читался максимально легко. Поэтому он должен быть контрастным и не слишком крупным.
Если у вас лонгрид или статья, в которой много текста, поставьте размер текста 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
Настройки сайта > Шрифты и цвета > Размер и насыщенность
Пример
Страница поста в блоге о моде.
Пример
Корпоративный блог.
Пример
Статья о контент-маркетинге.
С засечками или без?
Шрифт с засечками
Шрифт без засечек
Оранжевые частицы на изображении слева — это засечки. Цитата Массимо Винелли на картинке слева набрана шрифтом Baskerville Regular, справа — Helvetica Light.
Долгое время считалось, что шрифт с засечками лучше читается, так как засечки образуют направляющую линию и взгляду удобнее и быстрее скользить вдоль нее. С появлением первых компьютеров стали распространены шрифты без засечек, так как на экранах с низким разрешением более разборчиво выглядели шрифты простой формы, без засечек.
Современные дисплеи одинаково хорошо отображают и те, и другие. Поэтому сейчас выбор «с засечками или без» — вопрос характера сообщения, а не читабельности. Шрифты с засечками могут задавать более формальный тон и быть подходящими для некоторых брендов.
Современные дисплеи одинаково хорошо отображают и те, и другие. Поэтому сейчас выбор «с засечками или без» — вопрос характера сообщения, а не читабельности. Шрифты с засечками могут задавать более формальный тон и быть подходящими для некоторых брендов.
Как подключить шрифт, которого нет в базовом наборе
Во всех примерах, которые мы приводили выше, были использованы шрифты, которые есть в базовом наборе. Чтобы их поменять, нужно перейти в настройки сайта и выбрать шрифт из списка. Но кроме этого, на Тильде можно подключить абсолютно любой шрифт.
Где купить шрифты или найти бесплатные
На Тильде можно подключить шрифт пятью способами:
1
Выбрать из тех, которые есть в настройках. Мы отобрали 13 хороших шрифтов из открытых источников.
2
Загрузить на Тильду свой файл шрифта. В этом случае его нужно где-то взять, например, купить на:
Цена примерно $19/29/49 за одно начертание, встречаются дешевые по $2, есть такие, которые стоят $89. В некоторых наборах иногда есть бесплатные. Любой шрифт для веба можно протестировать на своем сайте в течение 30 дней.
Fonts.com
Система подписки. Есть бесплатный план (3 000 шрифтов), платные тарифы от $5 до $100 в месяц.
Type.today
Цена 2100-3500 руб.
Цена примерно $19/29/49 за одно начертание, встречаются дешевые по $2, есть такие, которые стоят $89. В некоторых наборах иногда есть бесплатные. Любой шрифт для веба можно протестировать на своем сайте в течение 30 дней.
Fonts.com
Система подписки. Есть бесплатный план (3 000 шрифтов), платные тарифы от $5 до $100 в месяц.
Type.today
Цена 2100-3500 руб.
3
Подключить через Adobe Typekit. Это библиотека шрифтов.
— Бесплатный тарифный план: 940 шрифтов.
— Платный стоит $49 в год и дает доступ к 5 660 шрифтам.
— Доступ к тем же 5 660 шрифтам имеют подписчики Adobe Creative Cloud. Если вы платите за Creative Cloud, платить за Typekit дополнительно не нужно.
— Бесплатный тарифный план: 940 шрифтов.
— Платный стоит $49 в год и дает доступ к 5 660 шрифтам.
— Доступ к тем же 5 660 шрифтам имеют подписчики Adobe Creative Cloud. Если вы платите за Creative Cloud, платить за Typekit дополнительно не нужно.
4
Использовать Google Fonts. Шрифты бесплатные. Наша инструкция по подключению.
5
Загрузить свой CSS файл. Наша инструкция.
Список хороших шрифтов, в которых есть кириллица
Futura. Где купить: myfonts.com/fonts/paratype/futura-book
Proxima Nova. Где купить: myfonts.com/fonts/marksimonson/proxima-nova
Franklin Gothic. Где купить: myfonts.com/fonts/itc/franklin-gothic
Graphik. Где купить: type.today/ru/Graphik
Museo. Где купить: myfonts.com/fonts/exljbris/museo-sans
Gotham. Где купить: typography.com/fonts/gotham
GT Walsheim. Где купить: grillitype.com/typefaces/gt-walsheim
Helvetica Neue. Где купить: myfonts.com/fonts/linotype/helvetica-neue
21 Cent. Где купить: myfonts.com/fonts/letterheadrussia/21-cent
20 Копеек. Где купить: yurigordon.com/ru/shop/fonts/20kopeek
Как обеспечить читабельность текста
Какой бы шрифт вы не выбрали, он должен хорошо читаться. Особенно, если вы используете фоновую фотографию. Если поставить тонкое начертание на фотографию с мелкими деталями, текст читаться не будет. Всегда обращайте на это внимание.
Что можно сделать? Во-первых, использовать фото, подходящее для фона: с крупными, однородными элементами. Во-вторых, приглушить фотографию с помощью фильтра, она станет ровнее и текст будет читаться лучше. В-третьих, можно у конкретного блока увеличить насыщенность, применяя «инлайновый стиль». Это значит, что вы задаете настройки не для всего сайта, а только для части текста. Нужно выделить текст и задать параметры через редактор.
Стиль, который применятся таким образом, поверх глобальных настроек, всегда будет приоритетным. Поэтому, если вдруг вы меняете параметры шрифта в настройках сайта, а изменения не видны, значит в этом месте применен «инлайновый стиль». Чтобы его убрать, нужно выделить текст и нажать иконку «очистить».
Текст читается не очень
Текст читается хорошо
На обложке слева текст почти не читается. Чтобы это исправить, мы взяли фотографию, на которой не так много мелких деталей, добавили синий фильтр 40% и увеличили насыщенность шрифта.
Если тема выбора шрифта вам интересна, найдите хорошие сайты, близкие к вашему проекту, и посмотрите какие шрифты они используют. Определить это поможет расширение для браузера What Font.
Также можно заглянуть на независимый архив типографики http://fontsinuse.com/ — ресурс на котором собраны и рассортированы образцы вебсайтов и печатных изданий по типу использованного шрифта.
Также можно заглянуть на независимый архив типографики http://fontsinuse.com/ — ресурс на котором собраны и рассортированы образцы вебсайтов и печатных изданий по типу использованного шрифта.
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
