Всё написанное здесь — попытка выдать скудный личный опыт за универсальные истины.
8 заметок с тегом

типографика

Заглавная буква — это хорошо

24 февраля 2016, 1:27

Дима Гинтофт:
— Женя, привет! Центральная композиция в типографике, хоть и отлично работает, часто скучна до безобразия. Но вот в надписи от неё, похоже, никуда не деться. Кажется, это связано с тем, что в типографике левый флаг — естественная форма текста, а в надписи нет никакого флага. Я две недели пытался написать фразу с вензелями в первых трёх буквах, а в остальных без. Получается, что первые три буквы перевешивают и смотрится всё не очень. У тебя есть удачные примеры асимметрии в надписях?

Дима!

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

Школьная рок-группа делает симметричный логотип, как у Металлики.

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

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

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

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

Нет, ребят. Придумано так себе. О тексте стоит рассуждать иначе.

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

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

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

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

Любой текстовый шрифт подойдёт

19 сентября 2015, 15:42

Михаил Кириллов:
— Здравствуйте, Евгений! Живу на севере Москвы и вижу повсеместно одну и ту же гарнитуру на почти каждом ларьке, магазинчике и других зданиях, где не любят тратить деньги на дизайн. Вопрос в том, какое название у этой гарнитуры и насколько по десятибалльной шкале вы бы оценили её ущербность. Мне кажется изогнутость шрифта не оправдывается никоим образом — читаемость ухудшается, места между символами не остается. Тем не менее, данный шрифт используют во многих местах. Какую бы гарнитуру вы посоветовали использовать подобным заведениям?

Михаил!

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

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

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

Людям, которые не любят тратить деньги на дизайн, я советую взять любой текстовый шрифт. Не какой-нибудь особенный, а «обычный». И не набирать одними заглавными. Это обеспечит нормальную читаемость и современный вид через пять, а то и двадцать пять лет. Как найти такой шрифт — например, сделать выборку с тегами text и cyrillic на myfonts.com.

Пересмотреть сценарий

29 июля 2015, 20:42

Никита Вилков:
— Сделал плакат для своего друга, что скажешь про верстку?

Никита!

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

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

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

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

Поля упрощают чтение

29 июня 2015, 23:53

Дима Гинтофт:
— Что такое поля? Какую функцию выполняют, зачем они? По каким принципам строятся? Какие бывают? Как отличить красивые от уродливых?

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

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

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

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

На экране всех этих проблем нет, а без полей всё равно плохо. Так что ключевым в этом вопросе я считаю именно когнитивный аспект.

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

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

Читать удобно

21 мая 2015, 22:26

Дима Гинтофт:
— Напомни еще раз и основательно так, почему ты любишь крупный текстовый кегль на сайтах?

Дима!

Строго говоря, я люблю на сайтах не крупный, а нормальный текстовый кегль. Такой, чтобы читать было удобно. Но сейчас его приходится называть «крупным» — распространённая норма слишком мелкая.

Если смотреть на вопрос с технической стороны — дело в изменении параметров мониторов. Лет 10-15 назад типичный экран компьютера выдавал разрешение 72—96 ppi. Текст в браузерах не сглаживался. Надписи, набранные 10-м шрифтом выглядели вполне разборчиво, а 12-й уже тянул на комфортное чтение. Сейчас используются экраны с разрешением в пределах 95—135 ppi (данные отсюда). Пиксель уменьшился — уменьшился и заданный в пикселях текст.

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

Получилось не совсем так. Это пиксель превратился из абсолютной величины (светящаяся лампочка в матрице) в относительную — «CSS-пиксель». Устройства с ретина-экранами научились переводить CSS-пиксели в свои собственные. Но «обычные» экраны отображают CSS-пиксели без масштабирования. Можно задавать кегль в «емах» или процентах — это ничего не изменит. На 11-дюймовом Макбук-Эйре (экран с разрешением 135 ppi) текст будет выглядеть почти в полтора раза мельче, чем тот же текст на 21-дюймовом Аймаке (105 ppi). И оба варианта будут сильно мельче, чем на старом добром 15-дюймовом мониторе с разрешением 1024 × 768 (82 ppi). Простое решение в том, чтобы писать крупнее.

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

Собственно, дело не только в размере монитора. Сменилась композиционная парадигма. Раньше веб был сплошь многоколоночным. Дизайнер видел перед собой прямоугольник экрана и старался уместить туда всё. Теперь сайт — это длинная вертикальная колбаса, непрерывный поток информации. Базовый элемент этого потока — основная колонка текста. Единственная или очевидно доминирующая, а значит и занимающая значительную часть ширины экрана. Шире колонка — мы это знаем — крупнее текст.

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

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

Когда можно отказаться от разрядки прописных

14 февраля 2014, 0:11

Искандеру Мухамадееву в бизнес-линче задали вопрос, а он на него толком не ответил. Я знаю более конкретный ответ.

Для чего прописным нужна разрядка? Уравновесить внутрибуквенные просветы с окружающим пространством. Вот сбалансированная надпись:

А вот надпись с «выпирающими», «торчащими» внутрибуквенными просветами. Для простоты везде смотрим на буквы О, С, Ю — они самые показательные:

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

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

Отдельный случай — сверхсветлые начертания. Там штрихи настолько тонкие, что скорее не делят пространство на внутреннее и внешнее, а растворяются в нём. Спорный момент, но явно не криминал:

Если по-простому. Вот так нельзя:

А так можно:

Так нельзя:

Так можно:

Нижнее поле

28 января 2014, 12:44

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

Типографика в архитектуре

25 октября 2013, 17:31

Не смог оставить её в магазине.