Галочка — мощнейший культурный и бытовой символ. Галочка универсальна — в мире её понимают одинаково. Каждый знает, как нарисовать «птичку» от руки.

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

По моей просьбе дизайнер бюро Михаил Нозик подробно исследовал вопрос. Предоставим ему слово:

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

• Вооружаемся знанием у арт-директора. Выводим общие принципы:
• Чтобы галочка была энергичной и сбалансированной, левый хвостик должен быть в 2-2,5 раза короче правого.
• Если галочка располагается рядом со строкой текста, её нужно опустить чуть ниже базовой линии строки. Наклон хвостиков должен дружить с наклоном диагональных штрихов букв.
• Оптический центр галочки находится не в середине, а на нижнем кончике. Это особенно важно учитывать, если галочка располагается внутри какой-нибудь формы, например кружка.

Установка приложения на маке. Галочке тесно в кружке, оптический центр не совпадает с центром круга:

При этом на сайте Эпла галочки стоят хорошо:

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

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

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

Классифицируем галочки:

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

   

   
   

   Галочка на Гугль-диске:

   

   
   

   Логотип Бёрдвью:

Почти все готовые галочки из шрифтов противоречат принципам:

Бесконечно ужасная галочка из фотостоков:

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

   Виндоус Фаервол:

   

   
   

   Геометрическая галочка чекбокса из Виндоус 95—2000…

   

   
   

   …неудачно попыталась стать шрифтовой в Виндоус 7:

   

   
   

   …А в Виндоус 8 снова стала геометрической:

   

   
   

   Их всех побеждает своими пропорциями и правильным расположением галочка на Маке:

   

   
   

   Неплохая геометрическая галочка в андроиде:

   

   
   
3. Каллиграфические галочки написаны вручную двумя быстрыми движениями:

Пробуем нарисовать галочку каждого типа.

Шрифтовая галочка

Начинаем с любимой шрифтовой галочки Артёма:

Галочка крутая, но не дружит с надписью: наклон, скругления не отсюда.

Смотрим другие готовые галочки из шрифтов:

Очень длинный левый хвостик и слабое тоненькое окончание у правого. Примечательно, что именно Дином набрана надпись «Принят». Насколько не сочетаются галочка и шрифт!

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

Из-за чересчур сильного наклона левого хвостика галочка заваливается налево, на нижнем и правом кончике повисли сомнительные капли.

Геометрическая галочка

Начинаем с прямоугольных форм:

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

Каллиграфические галочки

Исправляем все ошибки предыдущих версий и совершаем новые:

Левый хвостик длинноват, к тому же непонятно истоньшается кверху. Маркерные прожилки нарисованы неправильно: на левом хвостике маркер идёт вниз с сильным нажатием — прожилки внизу быть не может.

Исправляем прожилки, но галочка выглядит так, будто её рисовали три часа, а не быстрым движением.

Смотрим фотографии нарисованных галочек и перерисовываем форму, усиливаем разницу между толщиной правого и левого хвостика, детализируем прожилки:

Завершающим штрихом сжимаем галочку по горизонтали, чтобы она подружилась с диагональным штрихом в «И»: