27 октября 2009

Как подобрать шрифт к графике?

Статьи

font_match5
Как подобрать шрифт, подходящий к вашей графике? В логотипе ли или в любом другом оформлении. Как вы выбираете, чем руководствуетесь?
Мы относимся к шрифту как к чему-то, что читают. А на самом деле буквы шрифта — это графические изображения. А, Б, В — это линии, углы и изгибы — изображения, с которыми мы ассоциируем звук и смысл.
Вот почему шрифт так выразителен. В то время как сам алфавит представляет информацию, напечатанные слова могут казаться игривыми или серьезными, старомодными или современными, вызывающими доверие или недоверие. То, как написано послание, его начертание интерпретируется нашим мозгом как нечто сказанное с той или иной интонацией, с теми или иными чувствами. Забавное упражнение на эту тему: когда разговариваешь с человеком, мысленно представить, “каким шрифтом” он говорит. (развивает чувствительность.)

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

Анализ изображения

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

font_match1
Пропорции и массы БОЛЬШИЕ и влияют на всё остальное. Пропорции могут быть обманчивыми, так что советую рисовать ограничительный прямоугольник. Нарисуйте его, не верьте своим глазам.
Наша девушка:
• прямоугольная
• асимметричная
• со смещенной вправо наклонной осью

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

font_match2
Из-за того, что мы привыкли только идентифицировать изображение (”это девушка в плаще и берете”), а не видеть их на самом деле, это упражнение может сначала показаться поиском лиц в облаках. Но присмотритесь…их там много. ;)

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

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

Подборка шрифта

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

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

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

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

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

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

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

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

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

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

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

font_match5
Конец!

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

Вам может быть интересно:
Правила удобочитаемости
Гид по веб-типографике
Как работает наше зрение (на примере шрифтов)
Классификация шрифтов
Шрифтовая терминология


Рубрики: ,

[ Комментариев: 4 ]

4 комментариев на “Как подобрать шрифт к графике?”

  1. Андрей пишет:

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

  2. Полина (admin) пишет:

    Спасибо, очень приятно это слышать!
    На самом деле достаточно отличать друг от друга основные типы шрифтов. Например, почитайте на эту тему такие статейки: http://ifont.ru/n21-29.html (на этом сайте шрифты и скачать можно хорошие)
    http://kak.ru/columns/wordletter/a7621/

    А также единожды обзавестись набором шрифтов ParaType, и жизнь станет сказкой. :)

  3. Андрей пишет:

    шрифты ParaType – это просто мечта. только полный набор стоит дороговато. то, что есть в сети ;) мне не очень подходит. в них нету национальных букв.

  4. Полина (admin) пишет:

    Андрей, я вам кое-что скинула на почту ;)
    (если вы конечно адрес правильный указали)

Написать комментарий