Настройка шрифтов для сайта
Шрифты задаются в настройках сайта. Это значит, что параметры (гарнитура, насыщенность, размер, цвет) будут применятся глобально: ко всем блокам на всех страницах сайта. Таким образом поддерживается общий стиль и аккуратность.
Чтобы перейти к настройке шрифтов сайта, перейдите в Настройки сайта → Шрифты и цвета.
Вы увидите галерею шрифтов. Ее можно пролистать и задать шрифт для сайта, нажав на кнопку «Выбрать». Шрифт будет назначен для заголовков и для текста.
Если вы хотите использовать сторонний шрифт или использовать разные шрифты для заголовка и текста, то нажмите на кнопку «Расширенные настройки».
На вкладке Библиотека вы можете выбрать разные шрифты для заголовков сайта и для основного текста. В коллекции находятся более 20 стандартных и премиум-шрифтов от партнеров, которые предоставляются бесплатно при подписке на Тильду.
На вкладках Google Fonts, Adobe Fonts и Загрузить шрифт вы можете загрузить шрифт из внешнего источника. Прочитайте подробные статьи ниже:
Коллекция бесплатных шрифтов от Google
Перейти к инструкции
Абсолютно любой шрифт в форматах .woff и .woff2
Перейти к инструкции
Большая библиотека компании Adobe
Перейти к инструкции
Добавление ссылки на CSS-файл на стороннем сервере
Перейти к инструкции
Установка размеров и шрифтов заголовка и текста сайта
Внизу настроек установки шрифта на вкладке «Шрифты и цвета» располагаются настройки стандартного размера, насыщенности и цвета заголовков и текста. Данные параметры устанавливаются глобально ко всем стандартным блокам на сайте, если в них жестко не установлены другие настройки шрифтов.
В стандартных блоках вы можете указать параметры шрифта в настройках блока → Типографика или выделить текст в редакторе и поменять его параметры через верхнюю панель настроек шрифта.
Установка параметров шрифтов через панель настройки текста в редакторе
Установка параметров текстовых элементов через настройки блока → Типографика
Настройки подгрузки шрифтов
По умолчанию текст сайта показывается после того, как подгрузится файл шрифта, это может происходить с определенной задержкой в зависимости от скорости соединения.
В настройках сайта → Шрифты и цвета → Продвинутые настройки вы можете установить настройку показа системного шрифта при загрузке, чтобы текст показывался сразу, но сначала системным шрифтом, а потом тем, который вы выбрали. Это может вызывать короткое мерцание текста и изменение размера текстовых элементов, поэтому используйте эту настройку только если уверены, что так ваш сайт выглядит лучше при загрузке.
Как поменять шрифт в zero block tilda
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Как выбрать правильный шрифт для сайта и статьи
Руководство, которое поможет выбрать шрифт, не погружаясь в теорию.
Шрифт — это важно. Как воздух, который не замечаешь, пока все в порядке. Большинство людей понятия не имеют, как называются шрифты и чем они различаются (и это нормально), но безошибочно чувствуют, что с вашим сайтом что-то не то, если шрифт, который вы используете, не подходит вашему проекту.
Мы исходили из того, что вы делаете сайт на Тильде. По нашему мнению, на данный момент это самый удобный способ создать сайт самостоятельно, без программиста и дизайнера.
В статье мы рассмотрели:
Как поменять и настроить шрифт для сайта на Тильде
Шрифт задается в настройках сайта. Это значит, что параметры будут применятся глобально: ко всем блокам на всех страницах сайта. Таким образом поддерживается общий стиль и аккуратность.
Максимальное количество шрифтов, которое можно подключить — два. С одной стороны, использовать небольшое количество шрифтов — хорошая практика с точки зрения визуального стиля, в целом. С другой, каждый дополнительный шрифт сильно увеличивает вес страницы . Поэтому, чтобы скорость загрузки была приемлемой, шрифта только два.
В настройках сайта, на вкладке шрифты вы увидите шрифтовые пары — это сочетания двух шрифтов, подобранные нашими дизайнерами. Пролистайте их, возможно, вы найдете то, что вам нужно. Нажмите кнопку «Выбрать» и «Сохранить изменения». Шрифты на вашем сайте поменяются.
Если представленные сочетания вам не подошли, нажмите «Расширенные настройки». Вы увидите все способы, как подключить шрифт к сайту на Тильде:
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 варианта сочетаний разной насыщенности в заголовках и в тексте. Они помогут выразить тональность сайта, чтобы он выглядел гармонично и у вас получится хороший проект.
Полужирный заголовок и нормальный текст
Semi-Bold+Normal
Это самое базовое сочетание, которое будет хорошо работать в большинстве случаев. Используйте, если ваша задача сделать просто хороший сайт без ярко выраженного акцента.
Для каких сайтов подойдет: для любых.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Semi-Bold
Настройки сайта > Шрифты и цвета > Размер и насыщенность
Страница вакансии. В примере используются: Open Sans (для заголовков) и Roboto (для текста).
Жирный заголовок и нормальный текст
Bold+Normal
Тоже довольно распространенное, устойчивое сочетание. Рекомендуем его использовать, если вы хотите подчеркнуть, что ваш проект — это драйв и энергия.
Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.
В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold
Настройки сайта > Шрифты и цвета > Размер и насыщенность
Сайт коворкинга. В примере используются: Ubuntu (для заголовков) и PT Sans (для текста).
Жирный заголовок и тонкий текст
Более необычное сочетание, выглядит эффектно за счет контраста. Уместно в случае, когда вам нужно сочетать и драйв, и стиль
Для каких сайтов подойдет: Например, такое сочетание мы использовали на лэндинге нашего курса «Интернет-маркетинг с нуля». С одной стороны, нам нужны были яркие, хорошо читаемые заголовки, с другой стороны, текст должен был передать эстетику качественного оформления курса.
В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Bold
Настройки сайта > Шрифты и цвета > Размер и насыщенность
Страница дизайн-студии. В примере используются: Noto Sans (для заголовков) и Open Sans (для текста).
Тонкий заголовок и тонкий текст
Light +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
Настройки сайта > Шрифты и цвета > Размер и насыщенность
Страница поста в блоге о моде.
Корпоративный блог.
Статья о контент-маркетинге.
С засечками или без?
Шрифт с засечками
Шрифт без засечек
Оранжевые частицы на изображении слева — это засечки. Цитата Массимо Винелли на картинке слева набрана шрифтом Baskerville Regular, справа — Helvetica Light.
Долгое время считалось, что шрифт с засечками лучше читается, так как засечки образуют направляющую линию и взгляду удобнее и быстрее скользить вдоль нее. С появлением первых компьютеров стали распространены шрифты без засечек, так как на экранах с низким разрешением более разборчиво выглядели шрифты простой формы, без засечек.
Современные дисплеи одинаково хорошо отображают и те, и другие. Поэтому сейчас выбор «с засечками или без» — вопрос характера сообщения, а не читабельности. Шрифты с засечками могут задавать более формальный тон и быть подходящими для некоторых брендов.
Как настроить модульную сетку в Zero блоке Тильда
Вы можете настраивать модульную сетку в Zero блоке Тильда как для одного блока, так и для всего сайта. Заказывайте необходимое количество колонок, их ширину, расстояние между ними, отступы, цвет линий и другие параметры.
Сетка позволяет разметить основную структуру макета проекта. Благодаря данным опциям, создание страницы в Тильде ускоряется в разы. По сетке определенным образом располагаются элементы и блоки сайта, сохраняя визуальный порядок на странице.
По умолчанию мы в Тильде работаем с 12-колоночной сеткой. Если нам нужна другая сетка, необходимо ее настроить.
Перейдем в Zero блок, рассмотрим настройки Artboard. Нажимаем кнопку Zero block settings и разберемся, для чего необходимо то или иное поле настроек:
HIDE GRID (горячая клавиша G)- переключатель, который показывает/скрывает модульную сетку Zero блока:
HIDE UI (горячая клавиша F)- переключатель, который показывает/скрывает панель управления настройками Zero блока:
SHOW LAYERS (горячая клавиша Ctrl + L)- переключатель, который показывает/скрывает панель элементов и групп элементов, имеющихся в Zero блоке:
SHOW GUIDES — переключатель, который показывает/скрывает имеющиеся направляющие линии в Zero блоке:
DISABLE SNAPPING — переключатель, который включает/отключает функцию примагничивания элементов друг к другу в Zero блоке.
COLUMNS — количество колонок в сетке.
COLUMN WIDTH — ширина колонок. При изменении ширины, меняется значение межколоночного расстояния COLUMN GUTTER и наоборот.
COLUMN MARGINS — отступы слева и справа от края артборда для колонок.
Кроме того, есть возможность настроить горизонтальную сетку. Она, как правило, применяется для типографики.
ROW BASELINE — шаг горизонтальной сетки. Обычно его величина берётся на основе базового размера Вашего шрифта. Например, если в качестве основного текста сайта Вы применяете шрифт размером 14px с межстрочным расстоянием 20px, то и расстояние между линиями будет 20px.
MODULE HEIGHT применяется, если Вам необходимы повторяющиеся модули в дизайне. Например, если указать значение 5, то через каждые пять рядов будет пустая строчка, а модуль будет начинаться заново.
ROW MARGINS — отступ сверху и снизу от края артборда:
Для каждого разрешения экрана модульная сетка настраивается отдельно: она будет разной для ПК и для мобильных устройствах. Включить и выключить сетку можно, нажав G или перейдя в раздел с трёмя точками в верхнем правом углу экрана.
По умолчанию сетка настраивается для сайта в целом. После создания новый Zero block, в нем будет та же модульная сетка, которая была уже настроена в предыдущем. Это удобно и позволяет сохранить единство дизайна на разных страницах нашего сайта.
Однако, если Вам необходима уникальная модульная сетка для конкретного блока, то зайдите в настройки сетки и выберите для параметра Use for опцию Current Block . Тогда настройки применятся только к текущему блоку.
Вы всегда можете сбросить изменения и вернуть сетку по умолчанию. Для этого нажмите на кнопку Reset в самом низу панели настроек и сохраните изменения.
Надеюсь, статья была Вам полезна.
Спасибо, что дочитали до конца!
Желаю Вам успехов и хорошего дня! 😉
Выравниваем контент в стандартных блоках в Тильде по ширине на мобильных (код, CSS)
Как изменить ширину и отступ стандартного блока на мобильных устройствах на сайте, созданном на Тильде? Как создать и куда вставить код?
Проблема: Если Вы используете на сайте стандартные блоки и ZERO, верстаете в grid, можете столкнуться с тем, на мобильных устройствах ширина контента в стандартных блоках сильно отличается от ширины в zero-блоках.
Например, Вы сверстали блок с текстом, задали ему ширину на мобильных устройствах 300px. Следующий блок Вы добавили стандартный, например, TX01. На мобильных TX01 будет иметь другую ширину и другой отступ, что выглядит неаккуратно.
Код
Для того, чтобы это исправить, нужно добавить блок T123 и код. Для данного примера (стандартный блок TX01) подходит следующий код:
Как мы получили этот код?
Заходим в браузер Firefox Developer Edition — Mozilla.
Рядом с поисковой строкой нажимаем на иконку Гаечный ключ, выбираем Адаптивный дизайн и нужное устройство, например, Iphone 11 pro. Перед нами открывается вид сайта на соответствующем устройстве.
Кликаем по контенту правой кнопкой мыши. Выбираем пункт Исследовать. Затем кликаем на иконку Выбрать элемент со страницы (скриншот).
Тыкаем на интересующий элемент: в нашем случае, на текстовый блок. Слева мы видим код и класс элемента. В средней колонке, в данном случае, видим стили элемента – цвет, шрифт, размер, насыщенность и прочее. И справа мы видим разметку блока. В данном случае, нам нужно задать для элемента с классом .t-text на устройствах @media screen and (max-width: 480px) , то есть на мобильных, такие же параметры, как и для нашего ZERO-блока:
width: 300px
padding-left: 20px
То есть мы меняем ширину и внутренний отступ. Вы можете задать эти параметры в разметке и увидите, что расположение и ширина контента изменились. Если это не сработало, то попробуется воздействовать на другой селектор (выберите другой элемент).
Теперь нам нужно из полученных данных создать рабочий код.
Мы понимаем, что нужно задать в коде брейкпоинт, то есть максимальную ширину экрана устройства, для которого мы хотим применить стиль.
В нашем случае это:
@media screen and (max-width: 480px). Пишем.
После этого ставим символ
Затем пишем класс элемента, для которого будем применять стиль. В нашем случае, это .t-text (перед названием класса ставим всегда точку). Затем снова символ
И затем сами параметры:
width: 300px !important;
padding-left: 20px !important;
( !important повышает приоритет нашего пользовательского стиля).
Затем закрываем параметры также двумя фигурными скобками:
Теперь осталось заключить код в теги:
Таким образом, Вы можете кастомизировать любые элементы на сайте на Тильде – менять отступы, цвета, радиусы скругления, добавлять тени и многое другое, что касается стилей элементов. Размеры, ширину, высоту блоков можно задавать также в %, hv, vw (при «резиновой» верстке).
Как добавить код на сайт на Тильде?
- Добавить блок T123 на страницу, на которой требуется внести изменения и вставить в него код в вышеуказанном формате (код должен начинаться с тега
);
- Добавить код (таким же способом, как и в пункте 1) в футер или в хэдер, чтобы воздействовать на стиль элементов с таким же классом на всех страницах, где есть футер/хэдер;
- Добавить код в Настройки сайта – Еще – Пользовательские CSS-стили. В этом случае теги
в начале и в конце кода не потребуются.