Как делать красивые статьи на Тильде

Используйте ширину текста 8 колонок, а не 10 или 12. В кириллице для комфортного восприятия в строке должно помещаться от 55 до 70 символов. Если строки длинные, то, пока читатель переводит глаза от конца предыдущей строки к началу следующей, он может потерять строку или смысл текста.

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

Для удобного чтения текст лучше всего располагать посередине страницы на уровне глаз. При ширине текста 8 колонок можно сделать отступ 2 колонки от левого края.

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

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

Выбор шрифтов с засечками или без зависит исключительно от тематики и стилистики сайта.

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

Лучше выбрать нейтральные текстовые шрифты, которые не будут отвлекать читателя от содержания. Хорошо читаются шрифты без засечек PT Sans, Arial, Futura, Open Sans. Из шрифтов с засечками в сплошном тексте хорошо считываются PT Serif, Times New Roman, Baltika или Charter.

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

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

Если в статье много текста, используйте размер шрифта 18 или 20 px. А если много изображений и текст используется минимально, можно выбрать шрифт покрупнее — 22 или 24 px.

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

Когда в тексте неправильные кавычки и тире, текст выглядит неаккуратно и замусорено. Например, у дефиса «-» и тире «—» в русском языке разные значения. Дефис — знак орфографический, а тире — пунктуационный.

Французские кавычки «елочки» — другая важная часть русской типографики, им отдается предпочтение. ''Английские двойные'' кавычки используются в английских текстах, но в русских им не место — это все равно, что писать латиницей русские слова.

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

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

Лид после обложки кратко описывает содержание статьи. Он вовлекает читателя, помогает ему понять, о чем речь в статье. В лиде используется чуть более крупный размер шрифта, чем у основного текста. Если размер шрифта основного текста 20 px, смело задавайте в лиде размер не менее 30 px. Можно сверстать немного крупнее первый абзац после заголовка — использовать его как лид для каждой главы.

Еще один способ обособить какую-либо часть текста — поработать над его тоном, непрозрачностью. Например, сделать лид или подзаголовок серым. Это выделит их среди окружающего текста.

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

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

Сделайте цитаты более живыми — добавьте фотографии спикеров.

Чтобы список смотрелся аккуратно, используйте блок с нумерацией.

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

Да! И не забывайте про отступы. Они хорошо разделяют смысловые блоки в тексте, чтобы они не прилипали друг к другу.

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

В одном блоке можно комбинировать два разных вида типографики. Если в заголовке есть цифра, попробуйте сделать ее крупным шрифтом, а сам текст — шрифтом поменьше с насыщенностью light.

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

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

Можно поэкспериментировать с оформлением галерей в статье и расположением фотографий относительно текста. В разделах «Изображение» и «Галерея» библиотеки Тильды вы найдете много разных комбинаций изображений.

Интересное решение — сменить цвета фона между разделами или главами — плавно или контрастно. В Тильде это блоки DV11 и DV11A в категории «Разделитель».

Сверстать интересно получится в темплейтах и готовых блоках Тильды. Но чтобы создать что-то уникальное, попробуйте нулевой блок (Zero Block). Возможностей — много и разных — например, составить композицию с наложением текста на фотографию, сделать из статьи инфографику, создать необычную комбинацию типографики или авторскую обложку для статьи, композицию из изображений и текста.

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

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

Одна ширина колонок в тексте нужна, чтобы текст выглядел аккуратно и не имел волнообразных краев. Чаще всего используют 8 колонок для основного текста и 10 колонок для ключевых фраз. Но, скажем, использовать еще и 12 колонок для заголовков — уже слишком. Ширину заголовка лучше тоже сделать либо 8 колонок, либо 10.

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

Хорошее изображение для статьи должно обладать: сбалансированной резкостью, контрастностью, яркостью и цветностью. Если качество плохое, лучше вообще не использовать картинку.

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

Полноэкранное изображение — ширина 1680 px
Изображение на ширину 12 колонок — 1160 px
Изображение на 10 колонок — 960 px
Изображение на 8 колонок — 760 px
Изображение шириной 6 колонок — 560 px

В идеале создавать визуальный контент самостоятельно — можно заказывать у фотографа или иллюстратора. Уникальные изображения смотрятся профессионально, а еще они есть только у вас.

Если такой возможности нет, можно поискать бесплатные изображения с лицензией Creative Commons на стоках (Unsplash, Everypixel), в Google или на Flickr. Фотографии на Flickr интересны тем, что их выкладывают пользователи, и можно найти много интересных снимков, но нужно не забывать следить за лицензией и использовать только те фотографии, которые отмечены лицензией Creative Commons.

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

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

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

Если статья входит в серию или это внутренняя страница проекта, можно сделать высоту обложки 50 или 75%. Так акцентируется внимание на иерархии страниц.

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

Еще один хороший вариант для обложки — комбинация текста слева и иллюстрации справа (или наоборот). При этом выключка текста должна быть по левому краю.

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

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

Например, можно сделать содержание со списком глав в начале статьи и проставить на них якорные ссылки. Блок с якорной ссылкой на Тильде находится в категории «Другое» под номером Т173.

В статье можно использовать навигацию с точками, она фиксируется во время скролла — это помогает передвигаться внутри страницы между главами. Это блок МЕ604 в категории «Меню».

Не оставляйте «тупик» в конце статьи, дайте посетителю возможность перейти на другую страницу сайта или вернуться на прошлую, иначе он может просто уйти. Можно использовать плитку с ссылками на статьи похожей тематики или предложить вернуться на главную страницу с помощью кнопки.

Если статья длинная, можно добавить кнопку «Наверх». В библиотеке Тильды блок с кнопкой «Наверх» находится в разделе «Форма и кнопка» под номером BF702.

В конце статьи поставьте кнопки «Поделиться» в соцсетях, чтобы люди могли расшарить понравившуюся статью и привлечь других людей к вам на сайт. Такой блок можно выбрать из нескольких вариантов в категории «Соц.сети».