{"id":9132,"title":"\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0435 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u043e\u0446\u0438\u043a\u043b\u043e\u0432 \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438","url":"\/redirect?component=advertising&id=9132&url=https:\/\/vc.ru\/pochta\/325041-kak-kanadskie-lyubiteli-snegohodov-i-kvadrociklov-otkryli-dlya-sebya-rossiyu&placeBit=1&hash=cd54543b13c8a6083dd50d5669dab69e3e15e40792f9ed69859d5c8934b50d3d","isPaidAndBannersEnabled":false}
Дизайн
Paratype

Шрифт на экране. Часть 1

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

Доцифровые и первые цифровые шрифты

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

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

На самом деле ещё в начале 1990-х годов встречались типографии, в которых большими тиражами печатали книги с металлических литер.

Литеры в XX веке, конечно, делались уже не так, как во времена Гутенберга или Гарамона, а механическим способом. Но тем не менее, это были физические объекты. То есть и процесс изготовления шрифта, и процесс его использования ещё 30–40 лет назад мог происходить без участия компьютера.

Это книга 1992 года издания (ниже — фото выходных сведений). По выпуклым следам на незапечатанных местах страницы видно, что она напечатана методом высокой печати — с металлических литер под давлением. 
Гарнитура Литературная, печать высокая. А с фотополимерных форм из последней строки напечатана обложка.

При этом те же 40 лет назад будущие основатели Adobe уже работали над языком PostScript и одноимённым шрифтовым форматом. А ещё тогда шрифты могли храниться в виде фотографий или цифровых растровых изображений.

Это исходник для фотонаборного шрифта — стеклянная пластина с прозрачными буквами
А это большая редкость — шрифты для цифрового фотонабора (Demos и Praxis Герарда Унгера, середина 1970-х, взято из книги «Великие шрифты»). Шрифт хранился в памяти ЭВМ в виде растрового изображения, а для печати эти изображения засвечивали на фотоплёнке.

А способ делать и хранить шрифты в векторной форме разработал и представил в 1975 году профессор Петер Каров из компании URW.

Это был IKARUS — программный пакет для автоматизированного проектирования шрифтов.

«Практически первой гарнитурой, спроектированной в 1979 году с помощью пакета IKARUS, был замечательный шрифт ITC Galliard Мэтью Картера в 8 начертаниях. <...> Дизайнеры, с которыми работала [студия] ITC, рисовали только основные буквы латинского алфавита, цифры и знаки препинания в нескольких основных начертаниях (обычно самых светлых и самых жирных), а остальные несколько сот знаков латиницы и промежуточные начертания гарнитуры разрабатывали сотрудники Карова. <...>

Расцвет IKARUS продолжался до широкого внедрения персональных компьютеров и настольных издательских систем, до изобретения сегодняшних шрифтовых форматов PostScript и TrueType. Пакет IKARUS оказался слишком дорогой и сложной системой для персональных компьютеров». (В. Ефимов. Предисловие к русскому изданию книги П. Карова «Шрифтовые технологии. Описание и инструментарий» М. Мир, 2001)

Фотография интерфейса IKARUS 

Тут важно понимать, что даже когда программы для разработки шрифтов начали работать на персональных компьютерах, а не только на больших промышленных, речь шла именно о разработке шрифта на экране, а не о его использовании на том же экране. Векторные шрифты, похожие на современные, были нужны для последующей печати (или, например, плоттерной резки). А для использования на экране, например, в интерфейсе, они не слишком подходили. У компьютеров Apple 1980-х были монохромные дисплеи 512×342 или 640×480 пикселей.

В их интерфейсе использовался пиксельный шрифт. Его высота от верха выносного элемента буквы b до низа выносного элемента буквы g составляла 12 пикселей, из них на строчную букву типа n или x приходилось 7 пикселей.

Этот шрифт называется Chicago, его спроектировала Сьюзен Кэр (Susan Kare) и он оставался системным шрифтом Apple до 1997 года.

Превращение векторного шрифта в пиксельный. Режим Black&White

В условиях экранов и производительности 80-х и первой половины 90-х пиксельный шрифт для интерфейса был единственным возможным разумным решением. Но что происходило, если нужно было отобразить на экране в мелком размере — например, в программе вёрстки — векторный шрифт?

Пиксели на ранних монохромных электронно-лучевых трубках были округлыми, довольно крупными и неделимыми.

Пиксель либо светился, либо нет. Сейчас этот режим отображения шрифтов на экране называется Black&White или Bitmap и используется довольно редко.

Когда векторная буква в режиме Black&White накладывается на растровую сетку экрана, алгоритм отображения по умолчанию такой: пиксель, центр которого оказался внутри контура буквы, становится чёрным, а пиксель, центр которого оказался снаружи — белым. Если контур совпал с растровой сеткой удачно, получится что-то вроде пиксельного шрифта. А вот если неудачно, то даже не всегда получится узнать букву.

Иллюстрации из статьи на сайте Microsoft:

Чтобы избежать этого эффекта, шрифтовые технологи встраивают в шрифт специальные инструкции для операционной системы — хинты (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 уже никто не обрабатывал.

Продолжение следует

0
5 комментариев
Популярные
По порядку

Было очень интересно почитать. Спасибо за статью!) Жду продолжения

3

Александра, большое спасибо за статью. Продолжайте!

2

Всегда читаю и смотрю ваши лекции и статьи с удовольствием

1

Недавно была тоже очень интересная статья про шрифты. Там рассказывали про историю. Спасибо за полезный контент.

0
Читать все 5 комментариев
Использование YOLOv5 для задачи детекции

Ликбез по нейронным сетям

VELES BLOG Рассказываем как себя вести, чтобы заработать с Veles
Почему аренда самоката стоит как каршеринг и зачем отказываться от франшиз: интервью с главой Whoosh Дмитрием Чуйко Статьи редакции

До продажи бизнеса есть ещё «как минимум» два года, а пока Whoosh подумывает о запуске в Европе и учится сам собирать электросамокаты.

Сооснователь и гендиректор Whoosh Дмитрий Чуйко
Как я стал резидентом ОЭЗ «Технополис Москва» — опыт компании «ХайТэк»

Опытом работы на территории особой экономической зоны столицы делится генеральный директор НТЦ «ХайТэк» Алексей Алясев.

Пресс-служба ОЭЗ «Технополис Москва».
«Она похожа на соль — улучшит любое блюдо, если не переборщить»: как инженер-пианист создал гитарную педаль Big Muff Статьи редакции

Майк Мэтьюс бросил работу в IBM, чтобы дарить гитарам звучание, как у Хендрикса и The Rolling Stones, и придумал «золотой стандарт» педалей с искажением: её в своих записях использовали Pink Floyd, The White Stripes и Depeche Mode.

Майк Мэтьюс Vintage Guitar
Модемы, роутеры и интернет-центры Yota можно приобрести на Avito, OZON и «СберМегамаркет»
Как канадские любители снегоходов и квадроциклов открыли для себя Россию

«Важно найти свою нишу и быть готовым к тому, что ничего не получится».

Китайский стартап по производству сельскохозяйственных роботов FJDynamics привлёк $70 млн Статьи редакции

Компания хочет упростить ручную работу в строительстве и садоводстве.

Российско-швейцарская WayRay представила свой первый прототип электромобиля с AR-остеклением Статьи редакции

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

WayRay Holograktor WayRay
null