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

Текст – эффективное средство воздействия на посетителя любой веб-страницы. С его помощью завоёвывают доверие потенциальных клиентов, рассказывают о содержании сайта поисковым ботам, привлекают дополнительный трафик.

Время чтения: 6 мин

5 июня 2020 г.

Настя

Веб-дизайнер студии Спектр

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

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

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

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

Некоторые шрифтовые сочентания из предложенных уже загружены в Тильду.

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

1. Не использовать больше 2-3 шрифтов в одном контентом элементе, чтобы не было случайного визуального конфликта.

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

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

Важные выводы

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

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

Есть множество различных инструментов для этого. Например, расширение Font Ninja для Google Chrome, которое позволяет достать шрифт со страницы.

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


1. Не стоит использовать в одной композиции более 3 шрифтов, это нарушит целостность восприятия.

2. Не пишите большое количество текста заглавными буквами.

3. Вы можете использовать в одном тексте один шрифт, но менять его насыщенность при необходимости.

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

6. Выбирая текстовую ширину нужно ориентироваться не на дизайн, а на четкость и читабильность текста.

7. Рукописными курсивными шрифтами нельзя выделять весь текст, а лишь мысль, которую хочется подчеркнуть. Или использовать их в качестве декора.

4. Следите за межстрочным расстоянием. По правилам интерлиньяж (вертикальное пространство между строками) должен быть где-то на 30% больше высоты знака.

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

Type Genius – это инструмент для быстрого подбора шрифтов от сервиса Canva. Пользоваться им очень просто – нужно лишь выбрать подходящий шрифт и сервис сам подыщет подходящую пару. Как будут сочетаться шрифты между собой, можно увидеть после того, как пользователь определится с основным шрифтом.

Сервис Just My Type предлагает всего несколько тщательно подобранных шрифтовых пар, но это действительно хорошо сочетающиеся шрифты, которые идеально подходят друг другу. Создатель сервиса Дэниэл Эден предупреждает, что его выбор
не должен влиять на окончательное решение дизайнера. Типографика это все же искусство и в вопросе выбора шрифтов нужно доверять своему вкусу.

Blender является очень удобным инструментом по выбору подходящих шрифтов для своего проекта. Все работает очень просто – нужно выбрать фрагмент текста, например, заголовок, подзаголовок или абзац и указать название шрифта. Результат изменений отобразится в том же окне. Таким образом можно быстро найти шрифты, которые будут хорошо смотреться вместе.

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

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

Затем попытайтесь понять, на что именно вы хотите сделать ставку в шрифтовом сочетании — на сходство или контраст? Если вы хотите добиться экспрессивности, лучше использовать шрифты разных гарнитур (например, с засечками и без), а если хотите сделать текст визуально более связанным — возьмите шрифты одной гарнитуры.

Принцип объединения №1. Сходство

Шрифты со схожими чертами обычно смотрятся гармонично. Найти их не так сложно — обычно они относятся к одной гарнитуре. Чаще всего мы выбираем из трех гарнитур:

1. Антиква, или шрифт с засечками
Антиквы идут с маленькими черточками на концах букв.
Этот тип шрифтов часто используют для печатных материалов
и длинных текстов — благодаря засечкам взгляду проще скользить по строкам.

2. Гротеск, или шрифт без засечек

Говорят, набранный строгим гротеском текст чуть сложнее читать — тут буквы не связаны засечками, а будто стоят особняком. Зато такой шрифт отлично выделяется практически на любом фоне. Поэтому гротески используют для коротких
и важных надписей, которые (скорее всего) будут читать бегло и/или на расстоянии — заголовки, общественные знаки, объявления, интерфейсный текст.

3. Брусковый шрифт

Он похож одновременно и на антикву (с засечками), и на гротеск (немного рубленый). В брусовом шрифте засечки — прямые,
а скруглений почти нет. Он выглядит жестковато, и чтобы добавить мягкости и воздуха, лучше использовать этот шрифт
в «разреженном» виде — с ощутимым расстоянием между буквами.

Принцип объединения №2. Контраст

Говоря о контрастности в шрифтовом сочетании, имеется в виду, насколько заметна разница между двумя шрифтами.
На это может влиять как стиль шрифта (тяжелый, с плотным написанием),так и его размер и цвет.
Хороший контраст дает сочетание гротеска и антиквы — жесткость и прямота первого уравновешивается плавностью второго.

Также можно играть на разнице кегля (размера буквы) или насыщенности шрифта.

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

Избегайте конфликта

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

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





Насыщенность шрифта – это, если грубо, толщина букв нашего текста. Не у всех шрифтов есть большая градация начертаний.
Tilda же поддерживает только пять: light, normal, medium, semi-bold, bold.
Насыщенность нужно также уметь правильно выставлять. Например, тонкий текст будет плохо смотреться в блоке с большим количеством мелких элементов. А толстый часто подходит
для заголовков.


Давайте разберемся как облегчить для пользователя чтение контента.

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

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

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

Пример хорошо читаемого текста

Здесь в Tilda можно менять насыщенность и интерлиньяж

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

Оптимальным решением станет средняя ширина колонки и воздушное пространство с двух сторон, примерно 15 слов в одной строке и общая шинина текста не более 75 знаков. На мобильных устройствах это 30-40 знаков в строке.

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

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

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

К сожалению, Tilda предоставляет возможность для загрузки только одной шрифтовой пары. Делается это ради более быстрой загрузки сайта. Однако минимализм в этом вопросе – тоже хорошее решение.

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

Кроме стандартных сочетаний можно подключить шрифт
из Typekit или Google Fonts либо добавить свой CSS файл.

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

ВНИМАНИЕ! Загрузить шрифт возможно только в формате woff. Если вы не можете найти шрифт в таком формате в интернете, просто введите в поисковик "Конвертировать файл в woff". Существует множество онлайн сервисов, куда можно загрузить обычный файл шрифта ttf, чтобы получить из него woff.

Выравнивание по левому краю
Главная проблема в данном типе верстки — эстетичный правый край. Важно найти баланс, при котором край не казался бы ни слишком ровным, ни слишком рваным. Английские тексты можно верстать без переносов (потому что английские слова короче), русские лучше переносить. Самые частые ошибки:

Выравнивание по формату
Основная задача — однородный, ровный тон текста, так называемое «серебро набора». Это самый сложный вид выравнивания, требующий определенной сноровки и опыта.

Выравнивание по центру
Здесь важнее всего общая форма блока. Центрируют обычно небольшие отрывки текста: заголовки, выноски, цитаты, — поэтому важно, какую форму примут строчки, как они будут смотреться вместе. Те же подводные камни, что и при левом флаге, только следить нужно
уже за обоими краями:

Кавычки
В текстах на русском языке применяется два вида кавычек: «елочки» или „лапки“:

« ... »
„ ... “

“ ... ”
‘ ... ’

В английской типографике используются:

Тире

В качестве тире всегда следует использовать длинное тире («—»).

В диапазонах чисел и дат рекомендуем использовать короткое тире («–»).

Например:

век живи — век учись (тире);
2010–2012 (короткое тире);
5−2=3 (минус);
кое-что (дефис).

°знак градуса
«левая кавычка (левая елочка)
»правая кавычка (правая елочка)
’апостроф
„открывающая лапка
“закрывающая лапка
“открывающая английская лапка
”закрывающая английская лапка
№знак номера

§параграф&
©знак охраны авторского права (copyright)
®символ зарегистрированного товарного знака
™символ товарного знака
•жирная точка
–короткое тире
−минус
±плюс-минус
—тире

1. Убедитесь, что основной текст хорошо читается. Верстка должна быть максимально простой.

2. Проверьте отступы в статье. Критерии: отступы везде одинаковы, между текстом достаточно воздуха, нет прилипших друг к другу смысловых блоков.

3. Примените типограф ко всем блокам текста в статье. Он заменит неправильные кавычки и тире,
а также перенесет «висячие» предлоги на новую строку.

4. Соблюдайте визуальную иерархию. Не забудьте оформить лид под обложкой, поделите статью
на главы и подглавы.

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

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

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

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

9. Создайте навигацию по статье. Если она длинная, добавьте якорные ссылки. Не оставляйте тупик
в конце страницы — добавьте плитку с ссылками на другие статьи по теме.

Вообще-то, с этого нужно было начинать разработку. Но часто бывает, что в творческом порыве этот момент забывается. Самое время поправить, пока страница не выпущена

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

Объекты с привязкой к Grid должны находиться в зоне видимости (красная линия)

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

Если вы не предусмотрели это на этапе верстки, разделите блоки на разные части (отделите заголовок). Уберите отступы внутри зеро и отступы, заданные в Настройках блока. Добавьте Дополнительные отступы, проверяя их на разных разрешениях. Если это необходимо, введите разные типы отступов для разных разрешений.

После того как вся математика соблюдена, проверьте, как выглядит сайт на устройстве. Пройдитесь по каждому элементу и спросите себя: гармонично ли все выглядит? Ничего не упустили? Для просмотра мобильной версии рекомендуем пользоваться функцией «просмотр кода» в браузере Google Chrome (клик правой кнопкой мыши → Посмотреть код → выберите нужное разрешение

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

мы вас заинтересовали?

Оставьте свои контактные данные, и наш специалист свяжется с вами, чтобы подготовить коммерческое предложение для вас.

?

?