Я разрабатываю моноширинные пиксельные шрифты для игры, и до сих пор мне удавалось работать только с очень маленькими размерами (самый большой размер, которым я управлял - 5x9), потому что с ними проще всего ошибиться. Часто результаты, которые я придумываю для размеров, даже таких как 7x13, являются блочными и непривлекательными.

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

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

Пиксельные шрифты не сильно отличаются от крошечных печатных шрифтов, когда вы подходите прямо к этому *. Единственным большим исключением является то, что вы знаете, что среда будет делать с пиксельными шрифтами - очень большое преимущество.

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

Когда начать

Каждая проблема дизайна начинается с ограничения. С хорошим шрифтом это [обычно] предполагаемое использование. Где ваш пиксельный шрифт должен соответствовать? Ваша игра выиграет от легкого чтения текста или текст должен остаться в стороне и быть доступным для «расшифровки» только при необходимости?

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

Детали

Вы заметите что-то даже в лучших пиксельных шрифтах: они выглядят ужасно, когда вы подходите ближе и пытаетесь понять их. Они предназначены для «восприятия», то есть пробелы в дизайне заполняются мозгом. Таким образом, два квадрата, выровненные по 45 °, становятся диагональной линией. Иногда дыра в сетке - это «тонкая» линия между двумя толстыми штрихами.

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

Компьютер - наш друг в этой запутанной ситуации: просто держите второе окно открытым, чтобы вы могли видеть все на 100%, чтобы увидеть, как на самом деле выглядит ваш дизайн . Наличие второго монитора для этого «представления реальности» делает вещи намного более удобными.

Размещение в нижнем регистре

Так как вы упомянули необходимость строчных букв в 6 х 12 ...

Вот быстрый пример, который я собрал вместе, чтобы проиллюстрировать конкретные соображения с этим требованием.

Для начала я отрезал пиксель от вашего роста. Работая с такими маленькими размерами, вы заметите, что удобочитаемость выигрывает от более широкого тела персонажа. Заглавные буквы должны быть только немного выше, чем нижний регистр. Посмотрите на 9px Verdana, чтобы увидеть, как широкое тело может улучшить разборчивость.

Символы в нижнем регистре с выдающимися символами часто читаются лучше, если они немного превышают высоту колпачка (как bв моем примере). Моему примеру все еще удается оставаться на теле ростом 11px. Этому способствует тот факт, что длинные разборщики меньше влияют на разборчивость: всего пара пикселей.

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

С высотой x и телом, выделенным для справки:

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

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

Посмотрите на мастеров

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

Классическим примером использования превосходных пиксельных шрифтов является Unibody 8 от Underware . Роман "курсив" в вертикальном положении достигает его эффекта, используя 45 ° выравнивания, чтобы определить угол курсивного шрифта без ущерба для всего шрифта в процессе.

Emigre был одним из пионеров, наряду со Сьюзен Каре в ранней Mac OS.

* Примечание:
Retina - фантастический пример того, как печатный шрифт объясняет неожиданное при крошечных размерах, как я бы назвал его предшественником Bell Centennial .