В стандартных блоках Tilda уже хорошая типографика, но в реальных проектах этого часто мало.
Собрали инструменты, которые помогают в работе с текстом на Tilda: от выбора шрифта до типографики и кастомных эффектов.
Собрали инструменты, которые помогают в работе с текстом на Tilda: от выбора шрифта до типографики и кастомных эффектов.
Где взять шрифт для сайта
Бесплатные шрифты:
Google Fonts — большая библиотека шрифтов для веба. Удобно для большинства проектов.
TypeType — российский шрифтопроизводитель, у которого есть бесплатные версии некоторых гарнитур.
FontSquirrel — каталог шрифтов с лицензиями, где удобно искать варианты для коммерческого использования.
TypeType — российский шрифтопроизводитель, у которого есть бесплатные версии некоторых гарнитур.
FontSquirrel — каталог шрифтов с лицензиями, где удобно искать варианты для коммерческого использования.
Платные шрифты:
MyFonts — большой выбор гарнитур, но обязательно проверяйте условия лицензии. Часто есть ограничения по числу просмотров сайта.
Adobe Fonts — удобный вариант по подписке, особенно если вы уже работаете в экосистеме Adobe.
Adobe Fonts — удобный вариант по подписке, особенно если вы уже работаете в экосистеме Adobe.
Как подобрать шрифтовую пару
Canva Font Combinations — помогает быстро подобрать сочетание шрифтов. Удобно, если уже есть один шрифт и нужно найти ему пару.
Этого часто достаточно, чтобы быстро собрать базовую типографическую систему для сайта.
Этого часто достаточно, чтобы быстро собрать базовую типографическую систему для сайта.
Как подключить шрифт к Тильде
Инструкции от Tilda:
Видеоуроки от студии wave:
- — Google Fonts
- — Adobe Fonts (TypeKit)
- — Свой WOFF-файл
- — Через CSS
Видеоуроки от студии wave:
- — Как подключать шрифты
- — Как загрузить два шрифта одновременно
Как конвертировать шрифт в WOFF
Конвертер WOFF — простой инструмент, если нужно быстро перевести файл шрифта в формат, подходящий для веба.
Как подобрать размеры шрифта
TypeScale — помогает собрать логичную систему размеров для заголовков, текста и подписей.
Удобно использовать как основу для всей страницы или даже для всего сайта, чтобы типографика выглядела цельно.
Удобно использовать как основу для всей страницы или даже для всего сайта, чтобы типографика выглядела цельно.
Как сделать текст удобнее для чтения
Оптимальная длина строки — полезный материал от дизайн-системы Госуслуг о том, какой должна быть длина строки, чтобы текст легче читался.
Text.ru — помогает быстро посчитать количество символов и слов.
Glyphy — сервис с редкими и необычными символами, которые можно быстро копировать в интерфейсы, карточки и лендинги.
Text.ru — помогает быстро посчитать количество символов и слов.
Glyphy — сервис с редкими и необычными символами, которые можно быстро копировать в интерфейсы, карточки и лендинги.
Инструменты для типографики и редактуры
Типографская раскладка Бирмана — ускоряет набор текста с правильными кавычками, тире и спецсимволами.
Типограф Лебедева — автоматически приводит текст к более аккуратному типографскому виду.
Справочник Главреда — помогает убирать воду и делать текст чище.
Спеллер Яндекса — для быстрой проверки орфографии.
Грамота.ру — надежный справочник по русскому языку.
Сборник Бирмана по русскому языку — полезный ресурс для тех, кто хочет лучше чувствовать язык в интерфейсах и на сайтах.
Типограф Лебедева — автоматически приводит текст к более аккуратному типографскому виду.
Справочник Главреда — помогает убирать воду и делать текст чище.
Спеллер Яндекса — для быстрой проверки орфографии.
Грамота.ру — надежный справочник по русскому языку.
Сборник Бирмана по русскому языку — полезный ресурс для тех, кто хочет лучше чувствовать язык в интерфейсах и на сайтах.
Модификации текста в Zero Block
Если стандартных возможностей Tilda не хватает, пригодятся кастомные решения и модификации.
Tildoshная — полезный ресурс с модами и приемами кастомизации для Tilda.
Примеры эффектов, которые можно использовать для текста в Zero Block:
Такие эффекты стоит использовать аккуратно: они хорошо работают как акцент, но легко перегружают страницу, если применять их без меры
Примеры эффектов, которые можно использовать для текста в Zero Block:
- искажение текста
- анимация чисел
- цвет выделения текста
- эффект печатной машинки
- бегущая строка
Такие эффекты стоит использовать аккуратно: они хорошо работают как акцент, но легко перегружают страницу, если применять их без меры
Как узнать, какой шрифт используется на сайте
Fontface Ninja — расширение, которое показывает название шрифта, начертание, размер, цвет и другие параметры текста на странице.
Это удобно, когда вы изучаете чужие сайты, собираете референсы или хотите быстро понять, как устроена типографика понравившегося проекта.
Это удобно, когда вы изучаете чужие сайты, собираете референсы или хотите быстро понять, как устроена типографика понравившегося проекта.
Что действительно пригодится чаще всего
Если не хочется разбираться во всем сразу, вот базовый набор, который закрывает большинство задач:
Этого уже достаточно, чтобы текст на сайте выглядел заметно аккуратнее и профессиональнее.
Если вы делаете сайт на Tilda и хотите, чтобы типографика, структура и визуальная подача работали как единая система, посмотрите и нашу страницу про разработку сайтов на Tilda.
- Google Fonts
- Type Scale
- типограф Бирмана или типограф Лебедева
- Главред
- Fontface Ninja
Этого уже достаточно, чтобы текст на сайте выглядел заметно аккуратнее и профессиональнее.
Если вы делаете сайт на Tilda и хотите, чтобы типографика, структура и визуальная подача работали как единая система, посмотрите и нашу страницу про разработку сайтов на Tilda.
Подписывайтесь на наш канал в Телеграме.