Top.Mail.Ru
НАПИШИТЕ НАМ
Спасибо за обратную связь!

Как работать с текстом и шрифтами при создании сайта на Tilda?

Текст – эффективное средство воздействия на посетителя любой веб-страницы. С его помощью завоёвывают доверие потенциальных клиентов, рассказывают
о содержании сайта поисковым ботам, привлекают дополнительный трафик. Однако не все тексты люди захотят читать. Мы расскажем, как сделать так, чтобы пользователь не закрыл вкладку сайта, едва взглянув на визуальное оформление информации.
Время чтения: 6 мин
5 июня 2020 г.

Что такое шрифт? И как его настроить на Tilda?

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

Чтобы настроить шрифт на Tilda – перейдите в настройки сайта. Для этого в верхнем правом углу нажмите «Ещё» → «Шрифты».
Вам откроется страница с возможностью выбрать подобранное дизайнерами шрифтовое сочетание.
Если вы плохо разбираетесь в правильном подборе шрифтов или
не хотите сильно погружаться в эту тему, возможность выбора
из предложенных вариантов как раз для вас. Подобранные Тильдой шрифты часто универсальны для многих решений.

К сожалению, Tilda предоставляет возможность для загрузки только одной шрифтовой пары. Делается это ради более быстрой загрузки сайта. Однако минимализм в этом вопросе – тоже хорошее решение.
Если вы хотите использовать какой-либо текст как декоративный, а слота под шрифт для него не остается, рекомендуем загружать его в качестве изображения. Также существует лайфхак, чтобы загрузить сразу несколько шрифтов на тильду: для этого в свободный слот начертания одного шрифта загрузите файл другого. Меняя насыщенность в параметрах страницы, вы сможете менять шрифт.
Кроме стандартных сочетаний можно подключить шрифт из Typekit или Google Fonts либо добавить свой CSS файл.

Чтобы загрузить свой шрифт зайдите в расширенные настройки на той же странице, после чего кликните на кнопку «Загрузить файлы шрифта». Вам откроется возможность добавить сразу несколько начертаний.
Самостоятельный выбор шрифтовой пары – тоже непростая задача.
При её подборе нужно знать определённые принципы, которые мы разберём в следующих статьях.
Что такое начертание или насыщенность шрифта?
Насыщенность шрифта – это, если грубо, толщина букв нашего текста. Не у всех шрифтов есть большая градация начертаний. Tilda же поддерживает только пять: light, normal, medium, semi-bold, bold.

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

Взгляните как шрифт Roboto выглядит с разной насыщенностью:
Как сделать текст читабельным?
Давайте разберемся как облегчить для пользователя чтение контента.

Например, не следует использовать белый текст на фоне изображения со светло-голубым небом. Если же это необходимо, то поверх фона наложите тёмный слой с непрозрачностью 50-80%.

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

На читабельность влияет всё та же насыщенность, просветы между буквами и цветовая контрастность с фоном.

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

Оптимальным решением станет средняя ширина колонки и воздушное пространство с двух сторон, примерно 15 слов в одной строке и общая шинина текста не более 75 знаков. На мобильных устройствах это 30-40 знаков в строке.
Пример плохо читаемого текста
Пример хорошо читаемого текста
Здесь в Tilda можно менять насыщенность и интерлиньяж
Советы по работе с текстом:
1. Не стоит использовать в одной композиции более 3 шрифтов,
это нарушит целостность восприятия.
Пример плохо читаемого текста
2. Не пишите большое количество текста заглавными буквами.
3. Вы можете использовать в одном тексте один шрифт, но менять
его насыщенность при необходимости.
5. Нельзя использовать слишком мелкий шрифт. Чем старше аудитория читателей, тем он должен быть больше.
6. Выбирая текстовую ширину нужно ориентироваться не на дизайн,
а на четкость и читабильность текста.
7. Рукописными курсивными шрифтами нельзя выделять весь текст,
а лишь мысль, которую хочется подчеркнуть. Или использовать их
в качестве декора.
4. Следите за межстрочным расстоянием. По правилам интерлиньяж (вертикальное пространство между строками) должен быть где-то
на 30% больше высоты знака.
Как узнать, что за шрифт на картинке или сайте?
Есть множество различных инструментов для этого. Например, расширение Font Ninja для Google Chrome, которое позволяет достать шрифт со страницы.

Или же сервисы для определения шрифта по изображению: whatfontis.com, fontspring.com, myfonts.com и другие.

Примеры шрифтовых сочетаний
На читабельность и положительное восприятие текста влияет ещё множество различных факторов. Их подробное изучение требует большого количества времени. Однако следуя даже представленным
в статье советам, вы научитесь необходимым основам работы
со шрифтами на Tilda или любых других платформах.

26 июня 2020 г.