Sneak peek: типографика

Чтобы к каждому из 100+ навыков Скилсета добавились описание, состав, области его применения, больше ссылок на стандарты, инструкции и инструменты, видео, иллюстрации, сертификационные требования, способы самопроверки и задания на проработку навыка,

мне нужен помощник
Поделиться
Отправить
§04.001

Типографика

Подбор шрифтовых сочетаний

must!

любые проекты

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

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

Хороших кириллических шрифтов мало, а сами буквы в наборе смотрятся однообразнее латиницы. Яркие, качественные и бесплатные шрифты приходится собирать по одному. Часть этой работы взяли на себя Google Fonts, Бихенс и сайты шрифтолюбителей (в двух последних случаях приходится уточнять лицензию, которая не всегда разрешает коммерческое использование).

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

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

Cостав

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

Начертания: разные степени жирности и тонкости, курсив. Капитель и small caps (в латинице встречаются чаще). Маюскульные и минускульные цифры

В вебе нужно освоить способы задания кегля: pt, em и rem, %, px.

§04.002

Типографика

Дизайн стандартных текстовых блоков

must!

любые проекты

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

Cостав

Нужно уметь задавать пропорции основных элементов: картинки, фото, логотипа или иконки; заголовка и подзаголовка; лида/интро и основного текста; кнопок, ссылок, тегов и других дополнительных элементов.

Нужно уметь выбирать выключку и ширину столбца, а также контролировать отступы между элементами

Если это feature-список, столбики должны быть единообразны, а иллюстрации в них не выбиваться из общего стиля.

§04.003

Типографика

Верстка rich-текста

must!

любые проекты

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

Cостав

Заголовки H1–H6, подзаголовки, эпиграф, наборные абзацы, выделенные тексты (напр., плашкой), картинки

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

§04.004

Типографика

Дизайн инлайн-элементов и ссылок

must!

любые проекты

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

Cостав

Ссылки, теги, маркеры, курсивное, жирное и другие начертания, иконки, кнопки, отточие, зачеркивание, «зацензуренный» текст и emoji. К инлайн-элементам также относятся буллиты.

§04.005

Типографика

Акциденция и заголовки

must!

любые проекты

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

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

Cостав

Ручной кернинг, буквица, трекинг (разрядка), лигатуры, стилистические альтернативы, свуши.

Сочетание с графикой (простейший пример — буквы с фото внутри), ненаборная композиция, измененный рисунок букв, а также 3d, анимация и интерактив, внедрение в фон и другие спецэффекты.

§04.006

Типографика

Списки

must!

любые проекты

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

Cостав

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

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

§04.007

Типографика

Вертикальный ритм

must!

любые проекты

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

Cостав
§04.008

Типографика

Корректная верстка

must!

любые проекты

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

Cостав

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

§04.009

Типографика

Швейцарская (международная) типографика

must!

любые проекты

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

Cостав

Шрифт, цвет, сетка или гайды, фото и основные графические элементы.

§04.010

Типографика

Фактоиды

must!

любые проекты

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

Cостав

Цитаты, сноски на полях, примечания.