Как сделать пиксельный шрифт
Обновлено: 08.07.2024
Сделал в качестве упражнения такой вот пиксельный шрифт для набора супермелким кеглем. Перед разработкой поставил для себя несколько ограничений:
- 1. Строчные высотой 3 пк (не считая выносных элементов).
- 2. Прописные высотой 4 пк.
- 3. Символы не больше 5 пк по ширине и высоте.
- 4. Расстояния между буквами кратны пикселю.
- 5. Читаемость важнее эстетики, но эстетика тоже важна.
В дополнение к этому сделал кернинг всех символов, дополнительную разрядку в словах, набранных прописными, и парочку лигатур.
Какие тут явные косяки? В каком продукте в теории пригодился бы такой шрифт? Как вам строчный твёрдый знак, октоторп, восьмёрка и знак доллара?
Вы поменяли местами причину и следствие. Сделать шрифт просто так, чтобы потом спросить, где он может пригодиться, всё равно, что сделать для мобильных устройств, чтобы потом думать, какому сайту нужна будет такая страница.
Вы правы, читаемость важнее эстетики, но в данном случае ваши ограничения — это и есть эстетика. Поэтому сразу возникает множество вопросов:
Я честно не понимаю, что это за знаки, угадать их можно лишь по порядку перечисленных глифов. В некоторых ситуациях знаки угадываются стоящих рядом в предложении:
Но в некоторых даже окружение не помогает точно идентифицировать знак:
Перед началом работы над шрифтом стоит детально изучить, что уже сделали до вас. Например, на Майфонтсе есть шрифт Тригоми. Автор шрифта ставил похожие ограничения, но не обозначал максимальную ширину и высоту знаков. И в целом это выглядит гораздо лучше:
У вас получилось классическое противоречие: нужно сделать формы знаков различимыми в супермелких кеглях, но есть жёсткие технические ограничения. Сейчас не видно, что вы смогли разрешить это противоречие.
Возникает вопрос: зачем вы поставили именно такие ограничения? Почему не попробовать увеличить высоту или ширину знаков?
Может быть, вы или ваши друзья сделали восьмибитную игру для ностальгии, или вам нужно сделать листовку А6 или А7, продвигающую музей игровых автоматов. Можно предположить, что в таких случаях пиксельный шрифт будет полезен. Но низкой различимости знаков придётся переделывать сам шрифт: нужно радикально переосмыслить, что в вашей задаче будет ограничением, а что — эстетической фишкой.
Ещё на вашем месте я задалась бы вопросом: а нужен ли вообще шрифт? Сама по себе задача интересная, но я бы попробовала для начала решить её в другом формате, например, сделать летеринг для того же плаката.
Шрифт нужно постоянно тестировать в конкретных задачах, иначе есть риск сделать миллионный шрифт, которым никто не будет пользоваться.
P. S. Это был субботний совет о шрифте в дизайне. Хотите знать всё о выборе шрифтов для проекта, о подборе шрифтовых пар, о каллиграфии, летеринге и создании собственных шрифтов? Присылайте вопросы.
Категория "Пиксельные шрифты" создана для удобства пользователей сайта AZfonts. В ней собраны как новые, так и проверенные временем, отлично зарекомендовавшие себя шрифты.
В категории представлены самые популярные бесплатные и платные пиксельные шрифты. Все шрифты с платной лицензией можно купить в два клика. Любой бесплатный шрифт вы можете скачать и установить свободно. Пожалуйста, не забывайте обращать внимание на статус бесплатного шрифта: бесплатный для персонального или бесплатный для коммерческого использования.
Сейчас все уже привыкли к тому, что в печати и на экране используются одни и те же шрифты, выглядят они примерно одинаково, а иногда у экранных шрифтов даже больше возможностей. Но так было не всегда.
Первые наборные шрифты для печати появились в Европе в середине XV века — до этого люди писали книги и документы руками или вырезали на деревянных досках в зеркальном отражении целые страницы. Технологию более или менее удобного тиражирования букв изобрёл Иоганн Гутенберг. Шрифт существовал в виде комплекта металлических или деревянных литер — в натуральную величину, больше литер для часто встречающихся букв, меньше — для редких.
Это наборная касса, в которой лежат металлические литеры. В каждом отделении — одна буква, в самых больших более популярные (типа а, о, е), в самых маленьких редкие буквы и знаки препинания. Вот эти примерно 20 кг металла — один шрифт в одном размере.
На самом деле ещё в начале 1990-х годов встречались типографии, в которых большими тиражами печатали книги с металлических литер.
Литеры в XX веке, конечно, делались уже не так, как во времена Гутенберга или Гарамона, а механическим способом. Но тем не менее, это были физические объекты. То есть и процесс изготовления шрифта, и процесс его использования ещё 30–40 лет назад мог происходить без участия компьютера.
Это книга 1992 года издания (ниже — фото выходных сведений). По выпуклым следам на незапечатанных местах страницы видно, что она напечатана методом высокой печати — с металлических литер под давлением.
Гарнитура Литературная, печать высокая. А с фотополимерных форм из последней строки напечатана обложка.
При этом те же 40 лет назад будущие основатели Adobe уже работали над языком PostScript и одноимённым шрифтовым форматом. А ещё тогда шрифты могли храниться в виде фотографий или цифровых растровых изображений.
А способ делать и хранить шрифты в векторной форме разработал и представил в 1975 году профессор Петер Каров из компании URW.
Это был IKARUS — программный пакет для автоматизированного проектирования шрифтов.
«Практически первой гарнитурой, спроектированной в 1979 году с помощью пакета IKARUS, был замечательный шрифт ITC Galliard Мэтью Картера в 8 начертаниях. Дизайнеры, с которыми работала [студия] ITC, рисовали только основные буквы латинского алфавита, цифры и знаки препинания в нескольких основных начертаниях (обычно самых светлых и самых жирных), а остальные несколько сот знаков латиницы и промежуточные начертания гарнитуры разрабатывали сотрудники Карова.
Тут важно понимать, что даже когда программы для разработки шрифтов начали работать на персональных компьютерах, а не только на больших промышленных, речь шла именно о разработке шрифта на экране, а не о его использовании на том же экране. Векторные шрифты, похожие на современные, были нужны для последующей печати (или, например, плоттерной резки). А для использования на экране, например, в интерфейсе, они не слишком подходили. У компьютеров Apple 1980-х были монохромные дисплеи 512×342 или 640×480 пикселей.
В их интерфейсе использовался пиксельный шрифт. Его высота от верха выносного элемента буквы b до низа выносного элемента буквы g составляла 12 пикселей, из них на строчную букву типа n или x приходилось 7 пикселей.
Этот шрифт называется Chicago, его спроектировала Сьюзен Кэр (Susan Kare) и он оставался системным шрифтом Apple до 1997 года.
В условиях экранов и производительности 80-х и первой половины 90-х пиксельный шрифт для интерфейса был единственным возможным разумным решением. Но что происходило, если нужно было отобразить на экране в мелком размере — например, в программе вёрстки — векторный шрифт?
Пиксели на ранних монохромных электронно-лучевых трубках были округлыми, довольно крупными и неделимыми.
Пиксель либо светился, либо нет. Сейчас этот режим отображения шрифтов на экране называется Black&White или Bitmap и используется довольно редко.
Когда векторная буква в режиме Black&White накладывается на растровую сетку экрана, алгоритм отображения по умолчанию такой: пиксель, центр которого оказался внутри контура буквы, становится чёрным, а пиксель, центр которого оказался снаружи — белым. Если контур совпал с растровой сеткой удачно, получится что-то вроде пиксельного шрифта. А вот если неудачно, то даже не всегда получится узнать букву.
Чтобы избежать этого эффекта, шрифтовые технологи встраивают в шрифт специальные инструкции для операционной системы — хинты (hints). Хинтинг улучшает отображение шрифта на экране в мелких размерах или при низком разрешении, когда размер пикселя сопоставим с размером буквы. Реально хинтинг помогает, когда высота строчной буквы (типа х или а) от 5 до 30 пикселей — мельче всё равно не прочитать, а крупнее операционная система справится сама.
В режиме хинтинга Black&White приходится для каждого размера букв контролировать положение пикселей вручную.
Размер букв при хинтинге ещё называют ppem — pixels per em, то есть количество пикселей на кегль — от верха выносных элементов в буквах типа h до низа выносных элементов в буквах типа g. На картинке пиксели расставляются для ppem 12, на основную часть буквы приходится шесть пикселей и ещё по три — на выносные элементы.
Когда Мэтью Картер проектировал шрифты Georgia и Verdana для Windows 95, он сразу учитывал и то, как буквы будут выглядеть на мониторе.
На этой фотографии 1993 года видны сразу три важные вещи: векторный контур буквы, то, как она будет отображаться на экране в режиме Black&White в 14 ppem и интерфейс MacOS с пиксельными шрифтами.
Ещё одна важная деталь для шрифтов, которые в первую очередь предназначены для использования в мелком размере на экране: у них обычно крупные строчные знаки, достаточно широкие буквы и — особенно важно — просторные межбуквенные расстояния. Классический пример — сравнение шрифтов Verdana и Tahoma. Рисунок у них одинаковый, но Verdana должна была работать на экране, а Tahoma — печататься на принтере.
Откуда берётся эта разница?
Если наложить векторные буквы на растровую сетку, то в большинстве случаев ни толщина штрихов, ни межбуквенные расстояния не будут целым числом пикселей. Есть два варианта, как с этим быть дальше.
Нижняя надпись — это ручная адаптация логотипа под текстуру петель для вязания. В ней толщины штрихов и межбуквенные расстояния одинаковые (и кратны модулю), но из-за этого надпись стала заметно длиннее, а формы знаков местами отличаются от оригинала.
Иногда современные шрифты делаются с расчётом на то, чтобы хорошо ложиться на пиксельную сетку, как Input Mono Дэвида Джонатана Росса.
Благодаря этому в нужном размере шрифт выглядит идеально, но если его немного увеличить или уменьшить — будет уже не так хорошо.
Где сейчас используются пиксельные шрифты или режим растрирования Black&White или Bitmap?
На табло и в бегущей строке, в вязании и вышивке крестиком, в ретро-играх, а ещё в некоторых специфических интерфейсах. Удивительно, но в Word шрифты в выпадающем списке тоже растрируются в этом режиме.
Обратите внимание на разницу между относительно старыми шрифтами (Calibri, Baltica), которые были к нему адаптированы, и новыми, которые в режиме Black&White уже никто не обрабатывал.
1. Создайте новый документ 400 на 200 пикселей и залейте его черным фоном.
2. Напишите белым жирным шрифтом надпись. В примере использовался шрифт Swis721 BlkExBt (в уроках нашего сайта используются шрифты скачать для фотошоп ), размер шрифта 100 пикселей.
3. Растрируйте слой с текстом (Cлой –> Растрировать –> Текст).
4. Примените размытие по Гауссу (радиус размытия в примере 4,0)
5. Объедините слой с предыдущим (Ctrl + E),
6. Дублируйте слой (Ctrl + J),
7. Примените фильтр Оформление –> Мозаика (размер ячейки от 7 до 15 пикселей):
8. Уменьшите непрозрачность верхнего слоя на 50%,
9. Примените Фильтр –> Резкость –> Резкость 3-4 раза
10. Теперь окрасим эффект при помощи цветового баланса : Слой –> Новый корректирующий слой –> Цветовой баланс. Подвигайте ползунки и окрасьте текст в любой цвет.
Читайте также: