{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Блог Тани Соколовской: posts tagged Типографика", "_rss_description": "Раскрываю процессы, конспектирую книги, пишу советы.", "_rss_language": "en", "_itunes_email": "mail@tsokolovskaya.ru", "_itunes_categories_xml": "", "_itunes_image": "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/userpic\/userpic-square@2x.jpg?1757434518", "_itunes_explicit": "no", "home_page_url": "https:\/\/www.tsokolovskaya.ru\/blog\/tags\/typography\/", "feed_url": "https:\/\/www.tsokolovskaya.ru\/blog\/tags\/typography\/json\/", "icon": "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1757434518", "authors": [ { "name": "Таня Соколовская", "url": "https:\/\/www.tsokolovskaya.ru\/blog\/", "avatar": "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1757434518" } ], "items": [ { "id": "76", "url": "https:\/\/www.tsokolovskaya.ru\/blog\/all\/magazine-drop-cap\/", "title": "Журнальная верстка. Буквицы", "content_html": "

Продолжая тему журналов<\/a>, расскажу про буквицы. Буквица — это крупная первая буква главы или раздела книги. Изначально она появилась именно в книгах. Тогда буквицы выписывали от руки и украшали различными орнаментами и миниатюрами:<\/p>\n

\n\"\"\n<\/div>\n

Сегодня шанс встретить буквицу в книге стремится к нулю, зато можно увидеть их в журналах и газетах. Буквица в статье захватывает внимание читателя и приглашает к изучению материала. Внешне современные буквицы конечно же отличаются от своих предшественников. Я просмотрела различные журналы и выделила пять типов буквиц в оформлении статей — о них и расскажу.<\/p>\n

Буква увеличенного кегля<\/h3>\n

Пожалуй, увеличенная первая буква — это самый распространенный вариант. Как правило, она того же шрифта, что и наборный текст, но может и отличаться. Буква может оставаться внутри текстового блока и как бы смещать несколько строк в сторону:<\/p>\n

\n\"\"\n<\/div>\n

Либо может выходить за пределы текстового блока:<\/p>\n

\n\"\"\n<\/div>\n

Перекрытая буква<\/h3>\n

Первая буква статьи продублирована и увеличена, а текстовое полотно как бы накрывает ее собой. Как правило буква яркого акцентного цвета:<\/p>\n

\n\"\"\n<\/div>\n

Текст огибает букву<\/h3>\n

Первая буква статьи увеличена, чаще всего на всю высоту страницы, а текстовое полотно огибает ее по форме:<\/p>\n

\n\"\"\n<\/div>\n

Большая буквица<\/h3>\n

Первая буква продублирована и сильно увеличена, расположена рядом с текстовым блоком или над ним:<\/p>\n

\n\"\"\n<\/div>\n

На мой взгляд, большая буквица выглядит довольно эффектно. Она может быть классической шрифтовой или совмещенной с иллюстрацией. Понравились такие идеи:<\/p>\n

\n\"\"\n<\/div>\n
\n\"\"\n<\/div>\n

Текст по форме буквы<\/h3>\n

Первая буква продублирована и максимально увеличена, текстовое полотно совмещено с ней и повторяет форму одиного из ее штрихов:<\/p>\n

\n\"\"\n<\/div>\n

Вариант интересен в плане верстки, но далеко не все издания могут позволить себе так расходовать пространство. К слову о верстке полос, нашла довольно интересные варианты, покажу их в следующий раз :-)<\/p>\n", "date_published": "2021-03-21T13:53:11+01:00", "date_modified": "2021-03-21T13:53:00+01:00", "tags": [ "Журналы", "Типографика" ], "image": "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/1-8.jpg", "_date_published_rfc2822": "Sun, 21 Mar 2021 13:53:11 +0100", "_rss_guid_is_permalink": "false", "_rss_guid": "76", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/1-8.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/2-8.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/3-2.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/4-4.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/5-6.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/8-7.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/6-8.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/7-6.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/9-4.jpg" ] } }, { "id": "74", "url": "https:\/\/www.tsokolovskaya.ru\/blog\/all\/magazine-cover\/", "title": "Журнальная верстка. Обложка", "content_html": "

Изучаю новое для себя направление в верстке — журналы. Любовь к ним зародилась благодаря книге «Редактируем дизайном» Яна В. Уайта, прочитала ее на одном дыхании еще в 2016 году.<\/p>\n

Тогда я больше работала над веб-проектами и айдентикой, поэтому книга поселилась на полке, к тому же я никогда не читала никаких журналов. Сейчас понимаю, что именно журнальная верстка меня привлекает больше всего. И начну я свой путь с составления «скелета» на примере реальных журналов.<\/p>\n

Я изучила обложки двадцати семи различных изданий и выделила 16 элементов, которые чаще всего на них присутствуют. Не претендую на правильность — это мои наблюдения. Расскажу про каждый элемент подробнее.<\/p>\n

Название журнала<\/h3>\n

Название всегда расположено сверху и занимает либо всю ширину формата, либо левый угол, если оно короткое. Посмотрим на примерах:<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Шрифт в названии журнала и его стиль не меняются из номера в номер, как классический логотип. При этом может незначительно измениться расположение в области “шапки” или цвет под стиль главного изображения. Например:<\/p>\n

\n\"\"\n<\/div>\n

Слоган<\/h3>\n

Слоган есть не у всех журналов, но если он присутствует, то находится рядом с названием журнала:<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Информация о выпуске<\/h3>\n

Информация о выпуске включает в себя дату, стоимость и номер выпуска. Могут присутствовать все данные разом, но чаще всего указана только дата или дата и стоимость. Обычно эти данные расположены рядом с названием журнала:<\/p>\n

\n\"\"\n<\/div>\n

Иногда их указывают в зоне штрихкода:<\/p>\n

\n\"\"\n<\/div>\n

Или разделяют — например, дата остается возле названия, а стоимость в зоне штрихкода:<\/p>\n

\n\"\"\n<\/div>\n

Также информация может быть внизу страницы:<\/p>\n

\n\"\"\n<\/div>\n

И вертикально возле левого или правого края:<\/p>\n

\n\"\"\n<\/div>\n

Штрихкод<\/h3>\n

Штрихкод на обложке может быть, а может и не быть. Обычно расположен где-то в нижней части горизонтально или вертикально:<\/p>\n

\n\"\"\n<\/div>\n

Ссылка на сайт издания<\/h3>\n

Ссылка присутствует не у всех журналов. Чаще расположена рядом с названием, но может быть и внизу страницы или сбоку вертикально:<\/p>\n

\n\"\"\n<\/div>\n

Банер<\/h3>\n

Банер — это краткое пояснение о чем журнал, чем-то напоминает содержание. Банер, как и слоган, присутствует не всегда. Может включать в себя основные темы, которые поднимаются в журнале, либо темы конкретного выпуска. Расположен, как правило, сверху или снизу станицы:<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Бирка<\/h3>\n

Бирка представляет собой контрастную плашку, она призвана привлекать внимание и обязательно выделяется на общем фоне. Расположена чаще всего в левом верхнем углу. Этот элемент говорит о какой-то особенности журнала. Например, может указывать, что журнал бесплатный:<\/p>\n

\n\"\"\n<\/div>\n

Или выпуск журнала включает в себя “самый сок” прошедшего года:<\/p>\n

\n\"\"\n<\/div>\n

Бирка также может примкнуть к главному заголовку:<\/p>\n

\n\"\"\n<\/div>\n

Cтикер<\/h3>\n

Стикер выполняет примерно такую-же функцию, что и плашка. В “дорогих” изданиях практически не используется, но если все-таки да, то в единичном экземпляре:<\/p>\n

\n\"\"\n<\/div>\n

Также стикер может быть в виде простого текстового блока со звездочкой (*). Так он выглядит элегантнее:<\/p>\n

\n\"\"\n<\/div>\n

Главная тема выпуска<\/h3>\n

Блок с главной темой выпуска включает в себя заголовок и небольшое интро. Если речь идет о человеке, то в блок войдет его имя:<\/p>\n

\n\"\"\n<\/div>\n

Авторство<\/h3>\n

Сюда может войти автор статьи или фотограф снимка на обложке. Авторство указано не всегда.<\/p>\n

\n\"\"\n<\/div>\n

Бонус<\/h3>\n

Блок с бонусом, как правило, не относится к общей теме журнала. Он может включать в себя какой-то эксклюзив, специальный репортаж или просто что-то интересное:<\/p>\n

\n\"\"\n<\/div>\n

Главное изображение<\/h3>\n

В роли главного изображения может выступать фотография:<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Иллюстрация:<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Типографика:<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Воздух<\/h3>\n

Воздух это такое пустое пространство, которое усиливает основную тему, ставит на ней еще больший акцент. На обложке журнала не часто можно встретить пустое пространство — места мало, а информации довольно много. Посмотрим примеры:<\/p>\n

\n\"\"\n<\/div>\n

Дополнительные изображения<\/h3>\n

Дополнительные изображения — довольное редкое явление, по крайней мере среди уважаемых изданий.<\/p>\n

\n\"\"\n<\/div>\n

Чем больше на обложке изображений, тем “дешевле” выглядит журнал:<\/p>\n

\n\"\"\n<\/div>\n

Рамка<\/h3>\n

Иногда в дизайне присутствует рамка, которая обрамляет обложку по контуру. Она выделяет содержимое, при этом весь контент становится чуть мельче:<\/p>\n

\n\"\"\n<\/div>\n

Рамка помогает выделить журнал, когда он стоит на одной полке с другими, как бы прикрывая друг друга:<\/p>\n

\n\"\"\n
Быстро нашли журнал, который я вставила в картинку? :-)
\nОригинал фотографии: iStockphoto<\/div>\n<\/div>\n

Страна<\/h3>\n

Если журнал издается в разных странах, то на обложке указано к какой именно стране принадлежит конкретное издание. Как правило блок расположен где-то возле названия журнала:<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

В заключение хочу сказать, что мне безумно понравилось исследовать журналы. В процессе созрело много новых тем для постов, будет интересно :-)<\/p>\n", "date_published": "2021-03-07T21:43:10+01:00", "date_modified": "2021-03-07T23:03:04+01:00", "tags": [ "Журналы", "Типографика" ], "image": "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/5-5.jpg", "_date_published_rfc2822": "Sun, 07 Mar 2021 21:43:10 +0100", "_rss_guid_is_permalink": "false", "_rss_guid": "74", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [ "jquery\/jquery.js", "fotorama\/fotorama.css", "fotorama\/fotorama.js" ], "og_images": [ "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/5-5.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/3-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/2-7.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/4-3.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/1-7.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/6-6.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/9-3.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/7-5.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/8-6.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/13-4.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/14-3.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/15-2.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/16-3.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/17-2.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/18-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/19-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/11-3.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/10-3.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/12-2.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/20-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/21-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/27.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/22-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/23.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/25-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/26.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/28.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/29.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/30.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/31.jpeg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/32.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/33.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/34.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/35.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/36.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/37.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/38.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/39.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/40.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/42.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/43.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/44.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/45.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/46.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/47.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/48.jpeg" ] } }, { "id": "73", "url": "https:\/\/www.tsokolovskaya.ru\/blog\/all\/better-typography\/", "title": "Как улучшить типографику верстки в Индизайне", "content_html": "

От того, как выглядит страница текста, будь то печатное издание или статья на сайте, зависит прочитает ли её кто-то или нет. Типографика в вёрстке — это не только эстетика, но и инструмент управления внимание. Я выделила шесть основных принципов вёрстки, которые помогут сделать макеты увереннее и читабельнее:<\/p>\n

    \n
  • Всегда обозначайте в тексте абзацы.<\/li>\n
  • Делайте длину строки оптимальной для чтения.<\/li>\n
  • Выбирайте подходящую выключку.<\/li>\n
  • Набирайте основной текст строчными.<\/li>\n
  • Следите за высотой строчных, используя разные шрифты.<\/li>\n
  • Включите оптическое выравнивание полей.<\/li>\n<\/ul>\n

    Всегда обозначайте в тексте абзацы<\/h2>\n

    Возьмем полотно текста:<\/p>\n

    \n\"\"\n<\/div>\n

    Хоть и не заметно, но там есть абзацы. Включу скрытые символы в Индизайне для наглядности:<\/p>\n

    \n\"\"\n<\/div>\n

    В таком виде текст воспринимать и читать сложно. Абзацы нужно четко разделять. Есть два способа это сделать — “красная строка” и отбивка.<\/p>\n

    Добавим “красную строку”:<\/p>\n

    \n\"\"\n<\/div>\n

    Уже лучше. Но следует помнить, что в самом первом абзаце делать отступ не нужно, его не от чего отделять. Правильно будет сделать так:<\/p>\n

    \n\"\"\n<\/div>\n

    Добавим отбивку:<\/p>\n

    \n\"\"\n<\/div>\n

    В таком виде абзацы еще лучше считываются. Но использовать одновременно оба способа не нужно — это перебор. Уберем “красную строку”:<\/p>\n

    \n\"\"\n<\/div>\n

    Теперь отлично.<\/p>\n

    Использовать и “красную строку”, и отбивку вместе можно в случае, если необходимо отделить вводный абзац от основной массы текста. Это будет выглядеть так:<\/p>\n

    \n\"\"\n<\/div>\n

    Делайте длину строки оптимальной для чтения<\/h2>\n

    Сложно читать текст, когда строка слишком длинная, а размер шрифта довольно мелкий. В примере ниже мы видим, что на строку приходится ~120 знаков:<\/p>\n

    \n\"\"\n<\/div>\n

    Если увеличить размер шрифта при той же длине строки, текст становится удобно читать. Тут на строку приходится ~90 знаков:<\/p>\n

    \n\"\"\n<\/div>\n

    Если, наоборот, уменьшить длину строки, текст читать тяжело. Это может быть оправдано, когда текста мало, например, в сноске на полях, но не в наборном тексте. Глаза слишком часто прыгают со строки на строку — это довольно напряжно:<\/p>\n

    \n\"\"\n<\/div>\n

    Я рекомендую соблюдать баланс — ориентируйтесь на 45-90 знаков в строке:<\/p>\n

    \n\"\"\n<\/div>\n
    \n\"\"\n<\/div>\n

    В таком виде текст читать удобно, строка не теряется и глаза не устают от постоянных скачков.<\/p>\n

    Выбирайте подходящую выключку<\/h2>\n

    Выключка, или выравнивание, может быть по левому краю, по правому краю, по формату, по центру и полная:<\/p>\n

    \n\"\"\n<\/div>\n

    Выключку по левому краю и по формату<\/b> принято использовать для наборного текста. Я люблю выключку по левому краю. Мне она кажется максимально удобной и эстетически приятной.<\/p>\n

    Выключку по центру<\/b> можно встретить в заголовках, цитатах или сносках.<\/p>\n

    Выключку по правому краю<\/b> также используют в заголовках, цитатах или сносках и редко для наборного текста.<\/p>\n

    Полная выключка<\/b> используется довольно редко. Я встречала ее в журнале ПТЮЧ. Вообще, в этом журнале довольно тяжело найти хоть что-то похожее на адекватную верстку, но в этом весь ПТЮЧ:<\/p>\n

    \n
    \n\"\"\n\"\"\n\"\"\n\"\"\n\"\"\n\"\"\n\"\"\n<\/div>\n
    Выпуски №9 1996 года, №2 и №5 1998 года<\/div>\n<\/div>\n

    Еще заметила, что российское издание Vogue также любит полную выключку, особенно часто используют ее в заголовках:<\/p>\n

    \n
    \n\"\"\n\"\"\n\"\"\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

    Рекомендую вообще не использовать полную выключку, разве что для достижения какого-то специального эффекта.<\/p>\n

    Расскажу подробнее про выключку по правому краю и по формату — эти два варианта мне кажутся наиболее сложными в использовании.<\/p>\n

    Выключка по правому краю<\/h3>\n

    Выравнивая текст по правому краю можно забыть о “красных строках” — их просто не видно из-за рваного края:<\/p>\n

    \n\"\"\n<\/div>\n

    Следует использовать отбивку:<\/p>\n

    \n\"\"\n<\/div>\n

    И особенно важно сбалансировать строки, для этого нужно включить галочку Balance Ragged Lines:<\/p>\n

    \n\"\"\n<\/div>\n

    Без этой галочки строки сильно разнятся в длине и появляются висячие предлоги:<\/p>\n

    \n\"\"\n<\/div>\n

    Так это выглядит, если увеличить длину строки:<\/p>\n

    \n\"\"\n<\/div>\n

    А тут я снова сбалансировала строки:<\/p>\n

    \n\"\"\n<\/div>\n

    Выключка по формату<\/h3>\n

    Напоминает мне “кирпич”, такой устойчивый и серьезный:<\/p>\n

    \n\"\"\n<\/div>\n

    С таким форматированием могут возникнуть две основные проблемы: дыры в строках и чересчур сжатые строки:<\/p>\n

    \n\"\"\n<\/div>\n

    Включу в Индизайне подсветку проблемных мест в тексте, делается это в настройках:<\/p>\n

    \n\"\"\n<\/div>\n

    Практически все светится желтым — это значит, что форматирование неудачное. Сейчас в стилях абзаца максимальное и минимальное значение параметра Glyph Scaling стоит 100%:<\/p>\n

    \n\"\"\n<\/div>\n

    Изменяя эти параметры, можно добиться удобного для чтения оформления текста:<\/p>\n

    \n\"\"\n<\/div>\n

    Как видите на изображении выше, желтая подсветка пропала. По мнению Индизайна теперь все хорошо, хотя для меня все еще не идеально.<\/p>\n

    Также в выравнивании по формату обязательно нужно использовать переносы. Если их отключить, слова в некоторых строках совсем слипнутся:<\/p>\n

    \n\"\"\n<\/div>\n

    Можно попытаться исправить ситуацию в параметре Glyph Scaling, но тогда появляются дыры:<\/p>\n

    \n\"\"\n<\/div>\n

    В общем, все не так просто с этим типом выравнивания.<\/p>\n

    Набирайте основной текст строчными<\/h2>\n

    Когда вы используете для наборного текста прописные буквы, вы создаете “крик”, который невозможно читать:<\/p>\n

    \n\"\"\n<\/div>\n

    Также следует отказаться от прописных букв, если нужно выделить слово или фразу внутри текста:<\/p>\n

    \n\"\"\n<\/div>\n

    Лучше использовать начертание с разницей в два шага от основного текста. Например, если у вас для основного текста стоит начертание Light, то для выделения можно использовать SemiBold:<\/p>\n

    \n\"\"\n<\/div>\n

    Следите за высотой строчных, используя разные шрифты<\/h2>\n

    Допустим, вам необходимо использовать два разных шрифта в одном тексте — один с засечками, другой без. Старайтесь использовать шрифты из одного семейства:<\/p>\n

    \n\"\"\n<\/div>\n

    Я вставила слово из второго абзаца в первый, как видите буквы одной высоты:<\/p>\n

    \n\"\"\n<\/div>\n

    Когда высота строчных различается, то выглядит это не очень, шрифты как бы не дружат. При этом размер шрифта стоит один:<\/p>\n

    \n\"\"\n<\/div>\n

    Включите оптическое выравнивание полей<\/h2>\n

    Независимо от выключки используйте оптическое выравнивание полей. Включается оно вот такой галочкой:<\/p>\n

    \n\"\"\n<\/div>\n

    С ним знаки препинания и некоторые буквы как бы выходят за границы текстового фрейма, но именно это делает поля визуально ровными.<\/p>\n

    Тут выравнивание выключено, правый край кажется дырявым в местах, где стоят знаки переноса:<\/p>\n

    \n\"\"\n<\/div>\n

    А тут включено, визуально край стал ровным:<\/p>\n

    \n\"\"\n<\/div>\n

    Посмотрите в сравнении:<\/p>\n

    \n\"\"\n<\/div>\n

    Включите привязку к базовым линиям<\/h2>\n

    Когда верстаете в несколько колонок, включайте привязку к базовым линиям. Делается это в настройках абзаца:<\/p>\n

    \n\"\"\n<\/div>\n

    Так колонки выглядят без привязки:<\/p>\n

    \n\"\"\n<\/div>\n
    \n\"\"\n<\/div>\n

    А так колонки выглядят с привязкой:<\/p>\n

    \n\"\"\n<\/div>\n
    \n\"\"\n<\/div>\n

    <\/p>\n

    Если у вас остались вопросы по теме, пишите в комментариях, с удовольствием отвечу :-)<\/p>\n", "date_published": "2021-03-04T21:50:44+01:00", "date_modified": "2021-03-26T12:42:07+01:00", "tags": [ "Советы", "Типографика" ], "image": "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/7-2.png", "_date_published_rfc2822": "Thu, 04 Mar 2021 21:50:44 +0100", "_rss_guid_is_permalink": "false", "_rss_guid": "73", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [ "jquery\/jquery.js", "fotorama\/fotorama.css", "fotorama\/fotorama.js" ], "og_images": [ "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/7-2.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/1.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/2-2.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/3-2.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/4-4.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/5-3.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/6-3.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/7-3.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/8-2.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/9-3.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/10-2.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/11-2.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/12-1.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/13-3.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/Screen-Shot-2021-03-04-at-19.32.53.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/Screen-Shot-2021-03-04-at-19.33.06.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/Screen-Shot-2021-03-04-at-19.33.17.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/Screen-Shot-2021-03-04-at-19.33.30.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/Screen-Shot-2021-03-04-at-19.33.46.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/Screen-Shot-2021-03-04-at-19.18.48.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/Screen-Shot-2021-03-04-at-23.52.59.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/04.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/05-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/06-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/01-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/02-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/03-1.jpg", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/14-1.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/15-2.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/16-3.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/17-1.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/18-2.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/19-1.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/20.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/21.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/26.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/22.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/23.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/24-1.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/25.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/27.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/28.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/29.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/30.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/Screen-Shot-2021-03-04-at-20.50.49.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/31.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/32.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/34.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/35.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/33.gif", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/37.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/36.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/40.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/38.png", "https:\/\/www.tsokolovskaya.ru\/blog\/pictures\/39.png" ] } } ], "_e2_version": 4134, "_e2_ua_string": "Aegea 11.3 (v4134e)" }