про разработку и дизайн шрифтов

Ширина штриха в Normal и Condensed

30 мая 2016, 15:55

На примере шрифта «Победа» расскажу о зависимости толщины вертикального штриха от ширины буквы.

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

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

Через множество «почему?» пришлось пробраться прежде чем появилось предположение: что если Победа выглядит жирной из-за того что в конденсед начертании расстояние между вертикальными штрихами в буквах, меньше чем в нормальном?

Чтобы проверить нужно:

  1. Нарисовать несколько букв для нормального начертания.
  2. Попробовать уменьшить ширину вертикального штриха в конденсед версии.

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

Пробую уменьшить ширину штриха в конденсед версии. Рисую прописные и строчные: DdEeFfHhIiTt. Проверяю в браузере и радуюсь. Буквы стали визуально легче.

Для сравнения

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

Вывод 2. Нужно проводить как можно больше тестов на ранних этапах работы, чтобы не приходилось перерисовывать весь шрифт по новой.

Поделиться
2 комментария
Егор Стремоусов

Сам не пробовал, но на курсе «Свой шрифт» Иван Гладких говорил, что хинтинг руками уже давно никто не делает, а шрифт для веба делается так:

  1. Шрифт генерится в формат TTF
  2. Прогоняется через программу https://www.freetype.org/ttfautohint/

У тебя другой подход был? Расскажи

Миша Панфилов

https://www.freetype.org/ttfautohint/ — не слышал и не пользовался. В описании написано: ttfautohint сделает за вас 99% работы и 1% прийдётся доделать самому. Выходит, что руками всё таки делают :-). Потом обязательно потестирую его.

Однажды пробовал настроить хинтинг в ручную, в фонтлабе. Это какое-то дикое приключение, мне не понравилось. В принципе и сам фонтлаб 5 — дичь, даже если там не хинтингом, а просто дизайном шрифтов заниматься. В итоге выкинул фонтлаб и переехал в глифс апп → https://glyphsapp.com

В глифсе есть функция автохинтинга. Её и использую. Мелочи настраиваю в ручную. Вот туториал https://glyphsapp.com/tutorials/hinting-postscript-autohinting

Егор Стремоусов

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

По ролику о Глифсе (https://glyphsapp.com/get-started) создается впечатление, что это тоже комбайн, в котором придется разобраться. По твоим ощущениям на сколько Глифс отличается в этом плане от Фонтлаба?

Пробовал/смотрел Робофонт? http://doc.robofont.com Что про него думаешь?

Миша Панфилов

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

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

Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter
Популярное