Awebdesign's Blog

Как правильно подбирать шрифты

(Перевод Виктории Шидловской статьи Best Practices of Combining Typefaces из журнала Smashing Magazine)

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

Итак, все шрифты делятся на те, что с засечками (serif) и без засечек (sans serif, от французского sans — без). Шрифты без засечек по-русски принято называть рублеными.

И оказалось, что по европейской традиции шрифты с засечками делятся на 4 класса:

Пример старостильного шрифта - Garamond

Old style или Humanist (Старый стиль) – шрифт появился в 1465 г., характеризуется диагональным акцентом (это означает, что самая тонкая часть шрифта находится под углом, а не точно посередине сверху или снизу), небольшой разницей между толстыми и тонкими линиями шрифта, а также отличной читабельностью.

Старо-стильные шрифты делятся на категории Venetian и Aldine (также называют Garalde). Примеры шрифтов класса Old style Adobe Jenson (Venetian), Janson, Garamond, Bembo, Goudy Old Style, и Palatino (все Aldine или Garalde).

Пример шрифта класса Transitional - Times New Roman

Пример шрифта класса Transitional - Times New Roman

Transitional или Baroque (Переходный или Барочный) – впервые появился в середине 18-го века. Эти шрифты наиболее широко распространены, среди них Times New Roman (1932) и Baskerville (1757). Этот класс шрифтов с засечками находится между старостильными и современными (modern), отсюда и название Transitional. Разница между тонкими и толстыми линиями шрифта более отчетливая, чем в старом стиле, но не такая драматичная, как в современном.

Пример шрифта класса Modern - Bodoni

Modern или Didone (Современный) – появился в конце 18-го века. Характеризуется экстремальным контрастом между тонкими и толстыми линиями знака. Современный шрифт имеет вертикальный акцент (тонкие линии точно посередине вверху и внизу), тонкие красивые засечки. Шрифт тонкий, но вертикальные линии очень толстые. Большинство шрифтов класса Modern менее читабельные, чем Old style и Transitional. Примеры шрифта — Bodoni, Didot, и Computer Modern.

Пример шрифта класса Slab serif - Rockwell

Slab serif или Egyptian (Брусковый) – обычно имеет совсем незначительную, если вообще имеет, разницу между тонкой и толстой частью знака. Slab serif обладают «толстым», квадратным видом и иногда имеют фиксированную ширину, что означает, что все знаки и пробелы между словами имеют одинаковую ширину (как typewriter). Иногда такие шрифты называют рубленными с засечками, так как они имеют вид шрифтов без засечек. Slab serif появился примерно в 1800 году. Примеры шрифтов — Clarendon, Rockwell и Courier.

Ну а теперь перейдем к теме статьи — как правильно подбирать и сочетать шрифты при создании макета.

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

Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)

Самый распространенный типографский прием – набор заголовка рубленым (без засечек) шрифтом, а текста – шрифтом с засечками. Это классическая комбинация, в ней почти невозможно ошибиться.

На рисунке внизу — типичная текстовая раскладка. На примере слева в заголовке использован Trade Gothic Bold No.2, а в тексте — Bell Gothic. Оба шрифта – рубленые. Однако, у них очень разные «личности». Хорошее правило при создании макета, не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic, наоборот – динамику и экспрессивность.

Как правильно подбирать шрифты

Сочетание этих шрифтов вызывает нежелательный дизайнерский конфликт. Trade Gothic хочет перейти прямо к фактам, а Bell Gothic хочет веселиться. Такое напряжение между шрифтами – не наша цель, его следует избегать.

Теперь рассмотрим пример справа. Мы заменили Bell Gothic шрифтом Sabon. Sabon, как шрифт с засечками, очень хорошо работает с Trade Gothic. Они оба нацелены на ясность и читабельность благодаря хорошей высоте знаков (x-height, грубо говоря, это высота строчной буквы x в шрифте, она определяет расстояние между базовой линией и верхней) . Таким образом, у обоих шрифтов одна и та же цель, потому они и составляют отличную пару.

Избегайте шрифтов из одного класса

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

На примере внизу, слева, в заголовке использован шрифт Clarendon Bold, который относится к классу Slab serif. В теле статьи использован Officina Serif который также относится к slab serif. Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса slab serif в одном месте может вызвать ненужное напряжение.

Как правильно сочетать шрифты

А теперь обратите внимание на правую сторону примера. Clarendon Bold в заголовке поставлен рядом с более нейтральным New Baskerville. New Baskerville относится к универсальному классу Transitional serif с широкими знаками, которые хорошо сочетаются с жирным Clarendon.

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

Присвойте шрифтам разные роли

Один из простых способов подбора шрифтов, это составление ролевой дизайнерской схемы для каждого шрифта. В примере ниже мы использовали Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка — Rockwell Bold. Вводный абзац и основной текст статьи в одном шрифте – Bembo, но разного размера. И, наконец, подзаголовок — Akzidenz Grotesk Medium.

Присвойте шрифтам разные роли

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

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

Контрастная жирность шрифтов

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

На примере слева у нас разные размеры шрифта, но недостаточный контраст по толщине. Myriad Light рядом с Minion Bold «пропадает» и теряет визуальный авторитет. Как бы то ни было, но глаз читателя должен в первую очередь выделять заголовок, а не превью.

Сочетайте шрифты разной жирности

Справа мы использовали Myriad Black над Minion нормальной толщины. Возможно, заголовок тяжеловат, но по крайней мере, у читателя не возникает сомнений по поводу того, что читать первым.

Создайте на странице различную тональность текста

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

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

Используйте разную шрифтовую насыщенность

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

Не смешивайте настроения шрифтов

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

На примере слева мы соединили Franklin Gothic Bold и Souvenir. Общее впечатление от Franklin Gothic – мужество, сила, стойкость, но с налетом элегантности. Он не ублажающий взор, но очень функциональный. А Souvenir – игривый, легкомысленный, немного равнодушный, но очень симпатичный. Эти два шрифта рядом, как бифитер перед Букингемом и маленькая девочка, которая пытается его рассмешить. Такое смешение плохо работает. Разное настроение шрифтов привлекает внимание к самим шрифтам, а не содержанию, что свидетельствует о слабом дизайне.

Не смешивайте разные по настроению шрифты

Справа в пару к Souvenir мы поставили более подходящего соседа. У Futura Bold много лиц, но он очень хорошо сочетается с Souvenir по многим причинам. Во-первых, у обоих шрифтов высокие x-height. Оба шрифта обладают округлостью форм и незначительной, но тем не менее заметной закрученностью концов. Ни один из них не доминирует над другим. Оба работают на создание веселого, приподнятого настроения. Напряжения между ними нет.

Сочетайте яркое с нейтральным

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

На примере слева Dax Bold стоит рядом с Bernhard Modern. Плохой выбор хотя бы по двум соображениям.

Сочетайте яркое с нейтральным

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

Взглянем на более удачный выбор. В правой колонке Dax Bold поставили рядом с Caslon. Caslon относится к классу Old style (Старый стиль), но был модернизирован и смягчен для лучшей сочетаемости с другими шрифтами. В данном контексте он выглядит удовлетворительно рядом с Dax. Заметьте, как в первую очередь мы видим личность Dax в заголовке, и как Caslon отступает назад и приглашает нас к чтению. В этом примере Caslon является нейтральным выбором для поддержки более яркого Dax.

Избегайте несоизмеримых сочетаний

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

Слева мы поставили Antique Olive Nord – чрезвычайно жирный шрифт, — рядом с Garamond Narrow. Контрастный перебор очевиден. В большинстве подобных случаев, такой контраст идет дальше обычного привлечения внимания и вызывает ощущение неуклюжести. Следовательно, он не доносит до читателя смысла текста.

Избегайте слишком большого контраста

Справа в заголовок мы поставили Antique Olive Nord. Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хороший выбор — после некоторых колебаний — это Chaparral. У Chaparral более высокая x-height, чем у Garamond, и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold.

Будьте проще – не используйте более двух шрифтов

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

На примере внизу мы составили четкую типографскую иерархию, добились разнообразия, получили интересную разбивку по тональности текста и его возрастающую читабельность. Все это было сделано с помощью всего двух шрифтов. Хотя, строго говоря, у нас здесь пять шрифтов: три Helvetica Neue и два Garamond.

Используйте два шрифта

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

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

Используйте различные размеры шрифта

Самый простой принцип мы оставили напоследок: используйте разные размеры шрифта для достижения контраста между ними.

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

Используйте разные размеры шрифта

Справа мы использовали те же два шрифта, но другого размера. TheMix Italic был значительно увеличен, в то время как New Century Schoolbook уменьшен до более нормального, хоть и все еще читабельного, размера.

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

Реклама

Уроки композиции

(Перевод Виктории Шидловской статьи Альмы Хоффман Finding Alternative Sources Of Typographic Layout In Our Surroundings)

Реклама - Flavors.me

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

Согласно словам Wucius Wong, автора книги «Принципы формы и дизайна (Principles of Form and Design), точка, линия и плоскость являются концептуальными дизайнерскими элементами, и хотя иногда их не так-то просто визуально вычленить из композиции, они там присутствуют по определению. Он объясняет, например, как угол указывает на наличие точки, или как линии, обозначая контуры объекта, указывают на присутствие плоскости.

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

Переводим в абстракцию все, что видим

Большинство из нас живет в относительно статичном пространстве – городском или сельском. Умение узнавать в этом пространстве линии, точки и плоскости поможет нам абстрагировать все, что нас окружает. Для примера возьмем фото городского пейзажа. Ниже – фотография Чикаго.

Уроки композиции

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

Уроки композиции

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

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

Уроки композиции

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

Уроки композиции

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

Уроки композиции

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

Поиск вдохновения

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

Вдохновиться можно также от людей, которые танцуют, занимаются, просто движутся. Перед вами пример того, как фотография танцевального представления вдохновила меня на дизайн календаря для Iowa State Dance Department. Я использовала направление движения танцоров как основу календарной сетки.

Уроки композиции

%d такие блоггеры, как: