Блог Тани Соколовской: posts tagged Типографика

Журнальная верстка. Буквицы

Sun, 21 Mar 2021 13:53:11 +0100

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

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

Буква увеличенного кегля

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

Либо может выходить за пределы текстового блока:

Перекрытая буква

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

Текст огибает букву

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

Большая буквица

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

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

Текст по форме буквы

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

Вариант интересен в плане верстки, но далеко не все издания могут позволить себе так расходовать пространство. К слову о верстке полос, нашла довольно интересные варианты, покажу их в следующий раз :-)

Журнальная верстка. Обложка

Sun, 07 Mar 2021 21:43:10 +0100

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

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

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

Название журнала

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

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

Слоган

Слоган есть не у всех журналов, но если он присутствует, то находится рядом с названием журнала:

Информация о выпуске

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

Иногда их указывают в зоне штрихкода:

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

Также информация может быть внизу страницы:

И вертикально возле левого или правого края:

Штрихкод

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

Ссылка на сайт издания

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

Банер

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

Бирка

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

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

Бирка также может примкнуть к главному заголовку:

Cтикер

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

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

Главная тема выпуска

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

Авторство

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

Бонус

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

Главное изображение

В роли главного изображения может выступать фотография:

Иллюстрация:

Типографика:

Воздух

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

Дополнительные изображения

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

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

Рамка

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

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

Быстро нашли журнал, который я вставила в картинку? :-)
Оригинал фотографии: iStockphoto

Страна

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

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

Как улучшить типографику верстки в Индизайне

Thu, 04 Mar 2021 21:50:44 +0100

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

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

Всегда обозначайте в тексте абзацы

Возьмем полотно текста:

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

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

Добавим “красную строку”:

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

Добавим отбивку:

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

Теперь отлично.

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

Делайте длину строки оптимальной для чтения

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

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

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

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

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

Выбирайте подходящую выключку

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

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

Выключку по центру можно встретить в заголовках, цитатах или сносках.

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

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

Выпуски №9 1996 года, №2 и №5 1998 года

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

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

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

Выключка по правому краю

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

Следует использовать отбивку:

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

Без этой галочки строки сильно разнятся в длине и появляются висячие предлоги:

Так это выглядит, если увеличить длину строки:

А тут я снова сбалансировала строки:

Выключка по формату

Напоминает мне “кирпич”, такой устойчивый и серьезный:

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

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

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

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

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

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

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

В общем, все не так просто с этим типом выравнивания.

Набирайте основной текст строчными

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

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

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

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

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

Я вставила слово из второго абзаца в первый, как видите буквы одной высоты:

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

Включите оптическое выравнивание полей

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

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

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

А тут включено, визуально край стал ровным:

Посмотрите в сравнении:

Включите привязку к базовым линиям

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

Так колонки выглядят без привязки:

А так колонки выглядят с привязкой:

Если у вас остались вопросы по теме, пишите в комментариях, с удовольствием отвечу :-)