Что такое типографика и какие шрифты использовать

Будьте проще — используйте только две гарнитуры

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

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

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

Основные понятия в типографике

Трекинг — расстояния в строке между символами.

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

Пример кернинга. Буквы Го и AW можно подвинуть ближе друг к другу, так как их формы гармонично сочетаются

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

Гротеск — более современный шрифт без засечек. Читается легче и быстрее антиквы.

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

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

Прямое начертание — это классический машинописный шрифт.

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

Графема — это общий скелет буквы. Букву можно нарисовать или сложить из чего угодно, но благодаря единой графеме вы сможете отличить А от Б.

Разные варианты написания буквы А, соблюдающие общую графему

Насыщенность определяется толщиной линий. Чем толще линии, тем выше насыщенность.

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

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

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

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

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

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

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

Примеры наборного и акцидентного шрифта

Пропорциональный и моноширинный шрифты отличаются размерами литер.

Наглядный пример отличий пропорционального шрифта от моноширинного

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

Сочетаем 3: конфликт

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

Almendra and Stoke

Но почему они плохо сочетаются? Мне казалось, что нужно сочетать по признаку контраста, в то же время не забывая про некое единство?

Но они разных стилей; один Blackletter, а другой Roman serif.

У них разные пропорции; один узкий с большой x-высотой, другой более растянут, с высокими восходящими, смотрите.

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

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

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

Их оси вообще невпопад:

У Blackletter есть нпрhавление и оно сильно отличается от направления Roman:

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

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

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

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

В примере внизу слева — это стандартный газетный макет — Trade Gothic Bold No.2 поставлен вместе с Bell Gothic. Это два гротеска. Тем не менее, у них очень разный характер. Когда мы сталкиваемся с проблемами между заголовком и основным текстом, тут можно вспомнить хороший прием, который заключается в том, чтобы не привлекать излишнего внимания к индивидуальному характеру каждого шрифта. Trade Gothic, пожалуй, строгий шрифт. Bell Gothic, наоборот, гораздо более динамичный и выразительный.

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

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

Сайты, сервисы и блоги по типографике

У кого учиться:

• Сайт Ярослава Трегубова с интересными дизайнерскими работами.
• «Книга про буквы от А до Я» Юрия Гордона.
• Блог Игоря Штанга о типографике, тексте и дизайне.
• Блог и сайт Сергея Рассказова.
• Работы шрифтового и графического дизайнера Ильи Рудермана.
• Сайт дизайнера и эксперта по типографике Александра Васина.
• Инстаграм программиста-дизайнера Зака Либермана.
• Сайт Fontsinuse с примерами комбинаций шрифтов на плакатах и афишах.
• Журнал «Шрифт».

Сервисы и расширения:

• Расширение What font для определения шрифта.
• Поиск аналогов шрифта на Paratype.
• 900 шрифтов от Google Fonts.
• Основы строения и комбинирования шрифтов на Readymag.

Сколько шрифтов мне использовать?

Количество используемых шрифтов остается полностью на вашей совести, но не забывайте про тот эффект, которого вы желаете добиться, соединяя шрифты. У шрифтов, как и у людей, есть характер. И характеры шрифтов, как иногда и между людьми, могут сталкиваться друг с другом. Думайте о ваших шрифтах, как о гостях за свадебным столом; одного заводилы обычно хватает, в то время как присутствие сразу нескольких сильных характеров может сильно накалить атмосферу, как эпизод из «Big Brother».

Но убедитесь, что в группе все же остается немного харизмы; восемь человек, которым нечего сказать, только и могут, что ждать, пока кто-то заговорит…

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

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

Избегайте несопостовимых комбинаций шрифтов

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

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

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

Не усложняйте — Попробуйте всего две гарнитуры

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

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

Почему это работает?

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

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

Что такое типографика

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

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

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

Шрифт без засечек

GORGEOUS

Дизайнер Rajesh Rajput создал этот современный, элегантный шрифт с колоссальными 20ю различными начертаниями и несколькими языковыми версиями. Идеально подходит для модных и стильных проектов, великолепно смотрится в больших титрах и переплетается с фоновыми элементами.

LUXIA

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

SIMPLIFICA

Шрифты Sans, такие как simpifica, считаются элегантными шрифтами из-за их простоты. Заглавные буквы имеют прямые линии и идеально наклоненные диагонали. Строчные буквы имеют изогнутые клеммы, создавая особый тон в длинных текстах.

COCO

Дизайнер Хендрик Роландес создал Coco с мыслью о профессионале моды. Тонкие вытянутые буквы со специальной прозрачностью по краям создают прекрасные заголовки и короткие текстовые фрагменты. Коко прекрасно работает!

STEINER

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

COCOMAT

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

CLEARLIGHT

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

DINER

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

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

CASUAL

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

PRESTAGE

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

AUDREY

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

Какова природа моего контента?

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

Сохраняйте предназначение шрифта четким.

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

Гармоничные сочетания

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

• Контраст размера
• Контраст размера и насыщенности
• Контраст размера и начертания
• Контраст размера, насыщенности и начертания
• Контраст аксессуаров и размера
• Контраст аксессуаров, размера и насыщенности
• Контраст аксессуаров, размера и начертания
• Контраст аксессуаров, размера, насыщенности и начертания

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

Шрифты с засечками и без

Как вы обратили внимание, всего три типа шрифтов. И если не брать во внимание моноширинный Courier New, то нами приходится иметь дело с двумя семействами — это шрифты с засечками serif (serif — «засечка») и шрифты без засечек sans-serif (sans — «без»)

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

Контурные шрифты + шрифты с заливкой (Outline и Filled)

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

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

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

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

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

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

Не сочетайте шрифты с разным настроением

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

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

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

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

Создание различного типографского “цвета”

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

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

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

Обзор классических и трендовых шрифтов

Bodoni

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

Meta

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

Headline News

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

Futura

Futura — это классический геометрический гротеск и двадцатые годы, когда эстетизировалось промышленное производство. До этого в шрифтах прослеживались следы пера, а здесь пера не осталось: все формы и линии — это либо идеальный круг, либо прямая линия. Даже в сравнении с Gill Sans она выглядит более строгой и геометричной, если сравнить по буквам «a».

Альтернатива Roboto, меняющая представление о том, что такое типовой шрифт.

San Francisco

Первый шрифт от Apple за последние 20 лет, пришедший на смену Helvetica.

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

IBM Plex

IBM Plex — это Helvetica XXI века. Стильный шрифт со своим настроением, комбинирующий плавные рукописные и жесткие «машинные» линии.

Сервисы, которые помогут в работе

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

Google Fonts

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

Typeconnection

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

Typography

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

Logaster

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

Что такое гарнитура

Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.

Различные начертания шрифта Montserrat

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

Начертание

характеристика

Толщина

Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)

Наклон

Прямое, курсивное

Ширина

Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)

Плохие сочетания

Абсолютное и необоснованное противопоставление шрифтов, смешивание разных семейств и стилей.

• Плохая читаемость
• Слишком похожие шрифты
• Шрифты моветон

Примеры сочетания шрифтов (ресурсы):

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна для начинающих, и учиться Вам теперь станет в удовольствие!

Используйте разные размеры кегля

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

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

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

Используйте разную цветность набора

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

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

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

Базовые правила

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

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

Не используйте «рыбу» — Lorem Ipsum или другую панграмму, выполняющую роль текстового заполнителя. Если поставите сначала Lorem Ipsum, а потом кириллицу, макет будет выглядеть иначе.

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

Маленькое правило, которое может спасти

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

Сервисы для подбора шрифтовой пары

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

• Adobe Typekit Webfonts
• Fonts Google
• Typotheque
• Type Wolf
• Type Genius
• Font Combinations

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

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

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

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

Таблица сочетания шрифтов

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

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

Заголовок

Текст

Arial

Comic Sans

Courier New

Garamond

Times

PT Serif

PT Sans

Verdana

Roboto

Tahoma

Palatino

Arial

****

***

****

****

*****

****

****

***

***

***

****

Comic Sans

**

***

**

**

**

**

**

**

**

**

**

Garamond

****

**

***

****

***

****

***

****

****

****

***

Times

****

**

***

***

****

***

***

****

****

****

***

PT Serif

****

**

***

***

***

****

****

****

****

****

***

PT Sans

***

***

***

***

***

*****

****

***

***

***

****

Verdana

***

***

****

****

****

****

***

****

***

***

****

Roboto

***

***

****

****

***

****

***

***

****

***

****

Tahoma

***

***

****

*****

****

****

***

***

***

****

****

Palatino

****

**

***

***

*****

***

****

***

****

****

****

Контрастность при помощи насыщенности шрифта

Безошибочный способ построить иерархию, изменить размер шрифтов в зависимости от роли

Но не менее важно помочь читателю четко разделив веса шрифтов

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

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

Огромные шрифты с засечками и обычные без засечек

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

Это создает хороший эффект слоя с типографикой и позволяет вам использовать минимальное количество шрифтов в процессе.

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

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

Выбор шрифта для сайта

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

• Google Fonts – предлагает бесплатные шрифты, созданные профессионалами
• Fonts Adobe – шрифты предлагаются в едином пакете подписки Adobe Cloud.

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

На что стоит обратить внимание при выборе шрифта для веб-сайта:

Толщина шрифта

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

Проверка читаемости

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

Сочетание шрифтов

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

Специалисты в веб-дизайне чувствуют и знаю какие шрифты стоит использовать вместе. А вот для начинающих это может быть проблемой, это станет точкой преткновения. Но для таких людей есть помощники в интернете, например, при выборе шрифта в Google Fonts система автоматически предложит сочетающиеся варианты шрифтов. Или можно использовать сервис fontjoy.com — он автоматически подбирает сочетающиеся шрифты, просто нужно нажимать на кнопку «Сгенерировать».

Размер загружаемого шрифта

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

После выбора хорошего шрифта стоит провести тест загрузки, если он не будет устраивать – стоит подобрать другой, более «легкий» шрифт.

Совместимость браузеров

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

Второстепенный шрифт

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