Композиция в типографике кратко

Обновлено: 02.07.2024

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

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

1. Акцентируйте внимание на главном

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

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

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

На постере Шоны Линн Панцужен в центре внимания также находится сидящий мужчина. Фокус осуществляется с помощью центрального расположения фотографии, где вокруг человека используется графика, привлекающая к нему внимание.

2. Направляйте взгляд читателя с помощью указателей

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

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

Кроме того, они могут указывать на какие-то связующие элементы текста или небольшие кусочки информации. Как уже говорилось, сначала вы должны сфокусироваться на главном объекте; но куда вы будете смотреть после? Правильно разместив указатели, вы не только сможете контролировать внимание на основных элементах, но и направлять взгляд вашего зрителя по всему дизайну.

Давайте, к примеру, посмотрим на постер от Design By Day, где используются четкие указательные линии, которые сначала направляют вас к основному элементу (названию), а затем к разным сегментам текста.

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

3. Масштаб и иерархия

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

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

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

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

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

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

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

4. Соблюдайте баланс между элементами

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

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

Во-первых, существует симметричный баланс. Суть его очевидна — баланс дизайна достигается за счет симметрии. Отражая определенные элементы по обеим сторонам (право-лево, верх-низ), вы добиваетесь абсолютной сбалансированности.

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

Второй тип, который, вероятно, встречается гораздо чаще — это асимметричный баланс. Его название также говорит само за себя — баланс достигается путем асимметричного расположения элементов.

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

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

5. Используйте элементы, которые дополняют друг друга

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

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

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

Изображения должны быть в одной цветовой гамме. В настоящее время существует широкий выбор разнообразных фильтров и инструментов для редактирования фотографий, которые помогут вам сделать так, что выбранные изображения будут принадлежать к одной цветовой гамме, и, следовательно, будут взаимосвязанными. A is a Name сделал свой постер полностью черно-белым, чтобы добиться цветовой связи между объектами.

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

6. Увеличьте (или уменьшите) контраст

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

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

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

7. Повторяйте элементы дизайна

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

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

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

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

Помимо этого, повтор может также стать ключевым фактором при разработке композиции для всего одной страницы. Повторно используя графические элементы, вы можете поддерживать связность в дизайне (как пример — постер Джессики Хише).

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

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

8. Не забывайте о белом пространстве

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

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

Итак, как же лучше использовать белое пространство?

Уменьшите масштаб графических элементов. Благодаря этому, вы сможете создать больше белого пространства вокруг центральных элементов, и при этом не выйдете за рамки изначального дизайна. Для наглядности взгляните на дизайн открытки с кулинарным рецептом от Serafini Creative, где основные элементы целенаправленно уменьшены для создания прекрасного обрамления из белого пространства.

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

При создании дизайна всегда спрашивайте себя, все ли элементы на 100% необходимы. Нужен ли весь этот текст, обязателен ли ярко-голубой заголовок, нужны ли все 3 изображения? Удаляя лишние частички из макета, вы можете создать более точный дизайн, который будет только выигрывать за счет белого пространства.

9. Выстраивайте элементы дизайна

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

Не получается выстраивать объекты? Canva поможет избавиться от этой проблемы буквально за секунду с помощью специального автоматического и очень удобного инструмента. Просто перетаскивайте тот или иной элемент по странице, а Canva выровняет его с другими объектами дизайна и автоматически поставит его на нужное место. Волшебство!

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

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

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

10. Разделите дизайн на трети

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

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

Взгляните на дизайн Гаджана Ваматева для National Geographic и подумайте, как здесь применяется правило одной трети. Скорее всего, вы заметили, что линии (если бы они были) пересекались бы на точке фокусировки каждого из изображений: двух путешественниках на первой картинке, и большой птице — на второй. Линии бы также пересекались на текстовых рамках, привлекая внимание к тексту и предложению прочитать дальнейшую информацию.

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

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

Обращение к читателю

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

А у вас есть какие-нибудь хитрости для работы с композицией? Или, возможно, вы знаете примеры каких-нибудь дизайнов с высокоэффективной композицией? В любом случае, не стесняйтесь делиться своими мыслями и идеями по этому поводу в комментариях!

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

Рис. 1. Основные варианты разбивки заголовка

Рис. 2. Акцентирование размером и насыщенностью

Рис. 3. Варианты разбивки заголовка

Рис. 4. Вариант разбивки большого заголовка

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

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

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

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

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

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

Для поддержания линии строки при большой разрядке прибегают к дополнительным средствам: подчеркиванию слова линейкой, применению шрифта с длинными горизонтальными засечками, помещению разреженной строки рядом с плотной строкой, с орнаментом или рисунком (рис. 5 д ).

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

Рис. 5. Зависимость ритмического строя от величины межбуквенных пробелов

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

Рис. 6. Суперобложка. Художник С. Телингатер

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

Рис. 7. Динамика букв в ритмическом строе слова

Большими возможностями в отношении динамики обладают курсивные шрифты с их композиционной подвижностью. В шрифтах с большим углом наклона направленность каждой отдельной буквы снимается единым движением слова по направлению строки (рис. 8).

Рис. 8. Общая динамика слова

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

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

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

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

Рис. 9. Смысловое акцентирование размером шрифта

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

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

Слитное или очень близкое расположение строк друг к другу часто превращает надпись в своего рода орнаментальный узор, составленный из букв. Удобочитаемость таких надписей обеспечивается контрастностью в длинах строк, при которой четко выделяется начало каждой строки (рис. 10), или сравнительно крупным размером шрифта (рис. 11).

Рис. 10. Контраст в длине строк при их слитном расположении

Рис. 11. Крупный размер шрифта при слитном расположении строк

Если разместить строки одной надписи на большом расстоянии друг от друга, то они будут читаться в замедленном ритме. Такие композиции характерны для титульного набора XVIII начала XIX века и соответ-ствуют самим текстам старинных заглавий.

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

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

Иногда в шрифтовых композициях союзы, предлоги и короткие слова выносятся в отдельную строку, вслед-ствие чего можно достигнуть значительного усиления смыслового значения заголовка, например при противопоставлении слов-антонимов. К этому приему прибегают в поисках ясной и красивой формы надписи, для сокращения размеров слишком длинной строки, в случае усиления вертикальной направленности всей композиции и т.д. Однако выделение союзов и предлогов в отдельную строку приводит к тому, что они начинают мешать смысловому выделению главных слов. Поэтому рекомендуется делать их по высоте несколько меньшими, чем соседние с ними строки. Уменьшение высоты коротких строк и интервалов вокруг них необходимо и для того, чтобы сблизить основные строки во избежание оптического разрыва надписи на несколько частей (рис. 12).

Рис. 12. Уменьшение строки с предлогом и межстрочных интервалов снизу и сверху

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

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

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

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

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

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

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

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

Анатомия шрифта

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

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

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

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

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

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

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

Верхний выносной элемент — элемент строчных букв, выходящий за верхнюю линию (например, в буквах б и в).

Нижний выносной элемент — элемент строчных букв, опущенный ниже линии шрифта (например, в буквах у и ф).

Понятие шрифта и его характеристики

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

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

Гарнитура — это семейство начертаний шрифта, имеющих общие стилевые особенности. Есть множество известных гарнитур: Helvetica, Futura, Roboto и другие.

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

Начертание — это внешний вид шрифта. Большинство гарнитур предполагают стандартный набор начертаний: Regular (обычное), Italic (курсивное), Semibold (полужирное) и Bold (жирное).

Типографская система мер

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

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

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

Кегль — размер буквы или знака по вертикали, включающий ее нижние и верхние выносные элементы. Единица измерения кегля — пункт (pt). Например, популярны кегли шрифта в 14, 16, 24 pt и многие другие.

Интерлиньяж (межстрочный интервал) — это вертикальный интервал между строками текста. Измеряется в пунктах, но его размер зависит от кегля шрифта. Интерлиньяж в 120 % от размера шрифта принято считать минимальным. То есть при шрифте в 14 pt интерлиньяж составит по меньшей мере 17 pt. Размер межстрочного интервала зависит от кегля и начертания шрифта, а также от расположения текста, поэтому универсальной формулы по вычислению интерлиньяжа нет.

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

Полезные советы и ресурсы по теме

Анатомия шрифта

Верхний выносной элемент — элемент строчных букв, выходящий за верхнюю линию (например, в буквах б и в).

Нижний выносной элемент — элемент строчных букв, опущенный ниже линии шрифта (например, в буквах у и ф).

Понятие шрифта и его характеристики

Типографская система мер

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

Типографика

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

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

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

Гарнитуры можно разделить на две основные категории:

Антиква — шрифты с засечками.
Гротеск, соответственно, — шрифт без засечек.

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

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

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

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

Кернинг — расстояние между буквами. Основная суть кернинга — подбор различных интервалов между различными парами конкретных букв для увеличения удобочитаемости.

Есть замечательная игра-тренажер — Kern Type . Просто расставьте все буквы по местам. На самом деле это не так-то просто. Процесс достаточно сложен и требует отличного глазомера. Особенно этот опыт будет полезен при создании логотипов.

Что мы делаем не так?

Используем большое количество шрифтов

Желательно использовать не более 3-х начертаний. Это могут быть шрифты как одной гарнитуры, так и разных. Например, гарнитура Roboto содержит довольно большое количество различных начертаний. Из них легко можно выбрать три, которые, как мы считаем, подойдут для нашего сайта. Допустим, это будут Light, Regular и Bold. Для заголовков можно использовать шрифт Bold или Light, для кнопок Bold, для основного текста Regular. Таким образом, используя одну гарнитуру, мы обеспечили наш сайт правильной типографикой. Естественно, все зависит от тематики сайта и идеи, которую вы планируете заложить в дизайн. Мой пример относится к универсальным и не претендует на что-то уникальное или неординарное.

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

Стили

Читайте также: