Типографика *

Испанская студия Atipo провела потрясающую съемку под названием «Fontface». Ребята украсили лица моделей символами различных шрифтов. В итоге получилось весьма симпатично.
Встречаем Гельветику, Кэслон и другие популярные начертания:

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

Вкратце об истории вопроса

В сентябре 2009 года Пол Айриш (Paul Irish) огласил пуленепробиваемый синтаксис для записи деклараций @font-face. Синтаксис был компактным и в то время действовал во всех браузерах. Недавно стали поступать, со временем усиливаясь, жалобы на отказ шрифтов загружаться в Android — поэтому мы стали вместо того рекомендовать синтаксис «Mo' Bulletproofer», сочинённый Ричардом Финком (Richard Fink). К сожалению, синтаксису «Mo' Bulletproofer» требуется двойная запись деклараций, так что поддержка его сложнее.

Синтаксис Fontspring @Font-Face

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

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?') format('eot'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

Что? Я не понял.

Хак Трюк, заставляющий этот код заработать — символ «?» вслед за именем файла EOT. Без шуток.

Как это срабатывает

Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов

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

Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.

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

От переводчика

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

(вторая часть перевода статьи Разоблачение алгоритмов растеризации шрифтов)

Linux

Наследуя худшее

Windows растеризует шрифты плохо, Linux ещё хуже. Во всех Linux-системах, которые я видел, используется FreeType [10] Дэвида Тёрнера, Роберта Вильгельма и Вернера Лемберга. Это отличная библиотека, но способ её использования, к сожалению, нельзя назвать удачным. Типичный скриншот Linux выглядит так:



Вот полный скриншот:
ссылка

Сразу заметна проблема — чёрные пятна в скругленных углах, образовавшиеся в результате сглаживания. Вцелом, можно сказать, что косые штрихи выглядят тяжелее чем вертикальные, что в регультате производит впечатление «грязи». Вы можете возразить, что FreeType и Linux могли бы использовать схожую с ClearType субпиксельную растеризацию, но по мне это не даёт заметных преимуществ.

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

Роберт Брингхерст пишет, что письмо это «твердая форма» языка, результат. Но письмо, конечно же, намного большее, и его происхождение, его эволюция, и то, как оно сплелось с нитями цивилизации несомненно превращает его в удивительную историю. И эта история охватывает около 5000 лет. Мы будем путешествовать на огромные расстояния, встречая императора, умницу Йоркширца, финикийскую принцессу Иезавель, «пурпурных людей»; мы пройдем через пустыни и плодородные равнины, переправимся через океаны. Мы начнем с того момента, когда зародилась цивилизация, пройдем через Средневековье, эпоху Возрождения, при этом обнаружим где же на самом деле возник наш алфавит, как и почему он стал развиваться, и почему же «А» выглядит как «А».

Вначале стоит разъяснить пару терминов. Кодовая страница — таблица заранее известного размера, каждой позиции (или коду) которой сопоставлен единственный символ или его отсутствие. Например, кодовая страница размерностью 256, где 71-й позиции соответствует буква «G». Кодировка — правило кодирования символа в числовое представление. Любая кодировка создается для определенной кодовой страницы. Для примера, символ «G» в кодировке Абрвал примет значение 71. Кстати, простейшие кодировки так и поступают — представляют символы их значениями в кодовых таблицах, ASCII тоже к таким относится.

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

Сейчас я решил написать про дефисоминус (то, что присутствует на наших клавиатурах вместо настоящего минуса и настоящего дефиса, в Юникоде, тем не менее, существующих) и настоящий минус. На «Хабре» была уже по этому поводу прекрасная статья «Чёрточки: только ли тире, минус и дефис?» (да и не она одна), но когда начальник заметил, что с моим появлением в проекте минусы на его страницах визуально преобразились и якобы стали шире плюсов, я почувствовал, что мне могут потребоваться числовые доводы (вот оно, математическое образование), а не только ссылки на авторитеты.

И я провёл замеры дефисоминуса и минуса (а сравнения ради и плюса) в ряде гарнитур, популярных у общественности или среди меня лично: Times New Roman и Arial Unicode (все замеры дали одинаковые результаты), Linux Biolinum и Linux Libertine (то же самое), Georgia, Tahoma, Verdana, Calibri, Code2000, Либерастика, Arial, Courier, Courier New. И вот что я установил.

Конечно, начальнику показалось. По контрасту с обычной практикой использовать вместо минуса дефисоминус. На самом деле ширина настоящего минуса в части названных гарнитур (в том числе в используемой в проекте Tahoma) в точности соответствует ширине плюса, а в остальных ближе к ней, нежели у куцего дефисоминуса. Заметно шире плюса он только в Code2000 и Linux Biolinum/Linux Libertine, а в Courier New с шириной плюса неожиданно точно совпадает ширина именно дефисоминуса.

Однако, есть и ещё один довод: высота расположения в строке. Во всех названных гарнитурах, кроме Courier, минус находится на одной высоте с плюсом, а дефисоминус — только в некоторых, а в популярных Times New Roman и Arial заметно ниже (аж на два пикселя при размере шрифта 16px).

В целом, с минусом, по-моему, всё ясно. Его применение диктуют не только семантические, но и визуальные соображения.

Сегодня стала доступна новая версия Unicode. Версия 6.0.0 промышленного стандарта кодирования, обработки и представления текста, так же является первой версией выпущенной исключительно онлайн.

Новый стандарт привносит множество изменений, включая свыше 2000 новых символов, новые свойства и файлы данных, некоторые корректировки в существующие символы и некоторые изменения в самом тексте стандарта. Новые литеры включают в себя: более 1000 специальных символов; знак индийской рупии – новый официальный символ валюты; более 200 объединенных идеограмм используемых на территории Китая, Тайваня и Японии; три новых начертания – Mandiac (классический язык Иранского региона), Batak (Суматра и Индонезия) и Brahmi (северная Индия), а так же улучшенную поддержку африканских языков.

Частью этого огромного числа новых символов являются так называемые символы Emoji. Похожие на смайлики, они ведут свое происхождение из японских мобильных коммуникаций и на сегодняшний момент получили большое распространение в регионе Восточной Азии. Набор Emoji включенный в Unicode 6 был взят из набора символов используемых тремя самыми популярными мобильными операторами в Японии. Этот набор включает в себя такие эмоции как “Улыбка с рогами” (“Smiling face with horns”), “Сбитый столку”, “Поцелуй кошки с закрытыми глазами”. Все их можно найти по этой ссылке (.pdf).

Вы можете ознакомиться со стандартом Unicode по этой ссылке. Или узнать про Emoji на официальной странице Unicode.

Под катом таблица с символами Emoji.

Пожалуй, этот способ тестирования вида шрифтов окажется поинтереснее прежнего:

_{Источник — вон тот мой комментарий, оставленный в обсуждении нового шрифта Ubuntu. Панграмма демонстрирует именно этот шрифт на фоне фотографии Сандры Буллок, сделанной папарацци.}

k_s интересуется: «Я один не догнал логику разрыва ссылки на три части?»

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

Текст той ссылки в HTML-коде записан так:

Например, wayawm baṣal эта ссылка yawm ʿasal выглядит разорванной

Браузер отображает арабский текст справа налево:

Например, laṣab mwayaw эта ссылка lasaʿ mway выглядит разорванной

Теперь обозначим в HTML-коде саму ссылку:

Например, wayawm baṣal эта ссылка yawm ʿasal выглядит разорванной

Браузер отображает арабский текст в прежних местах, причём части ссылки так и остаются частями ссылки:

Например, laṣab mwayaw эта ссылка lasaʿ mway выглядит разорванной

Упражнение: ткните мышью перед ссылкой, и, нажимая Shift+вправо, расширяйте выделение по одному символу. Так проще разобраться в соответствии между логическим и визуальным порядком символов.

Например, ويوم بصل эта ссылка يوم عسل выглядит разорванной

---

Арабская пословица «yawm ʿasal wayawm baṣal» означает «День — как мёд, а день — как лук.»

В комментариях к блестящему топику «Как выглядит китайская клавиатура» высказали интересную идею: рассказать про набор текста в разных языках с необычной письменностью.

Арабам относительно повезло: у них лишь 28 букв — даже меньше, чем в русском. Каждой букве можно назначить отдельную клавишу, и ещё останутся свободные. Зато с их письменностью возникают свои сложности, неведомые китайцам.

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

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

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

Западные дизайнеры не чувствуют наши буквы и делают порой серьезные ошибки. У них отлично получается латиница, но точности контура маловато для качественной шрифтовой работы — надо чувствовать. На мой взгляд, самая качественная западная кириллица у Luc(as) de Groot. Даже крупные и именитые западные агентства выпускают на рынок шрифты с никуда не годной кириллицей, что еще сильнее показывает всю драматичность ситуации. Я выборочно расскажу о том, что мне попадалось на глаза.

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

В «Smashing Magazine» 12 августа выложили гиперссылки, ведущие к тридцати бесплатным шрифтам, и краткий обзор их.

Но у читателя Хабрахабра всякая западная подборка, начинающаяся с круглого числа, должна вызывать естественное недоверие: не прибавили ли к ней чего-нибудь для одного только ровного счёта?… Пристально взглядываясь в эту тридцатку, трудно не подметить, что недоверие оправданно и даже дважды оправданно.

Во-первых, выпишем оттуда названия шрифтов по порядку в столбик да пронумеруем:

_{1) Piron
2) St Ryde
3) Nobile
4) Mr Jones Book
5) Pigiarniq Inuktitut
6) St Marie
7) Code
8) VAL Stencil
9) akaDora
10) Arcus
11) Crimson Text
12) Acid
13) Real Origami
14) Quadranta
15) Balonez Fantasia
16) Juice
17) Geomancy Typeface
18) Prociono
19) Edelsans
20) Neu Eichmass
21) Ingleby
22) Ibarra
23) Notice 1: Packaging Symbols
24) Notice 2: Navigation symbols
25) Notice 3: Cloth Symbols
26) Glyphyx
27) Free Symbol Signs Collection
28) Rally Character Set
29) Oblik Serif Bold
30) Paranoid
31) 01.BASE}

Как видно, счёт-то не такой уж и ровный. (Хорошо ещё, что обсчитались в нашу пользу.)

Во-вторых, из «тридцати» представленных шрифтов шесть («Notice 1: Packaging Symbols», «Notice 2: Navigation symbols», «Notice 3: Cloth Symbols», «Glyphyx», «Free Symbol Signs Collection», «Rally Character Set») являются попросту сборниками монохромных значков, а не символов какого-нибудь алфавита. Ещё девять шрифтов («01.BASE», «Paranoid», «Oblik Serif Bold», «Neu Eichmass», «Geomancy Typeface», «Balonez Fantasia», «Quadranta», «Real Origami», «VAL Stencil») обладают такими выдающимися декоративными особенностями начертания, которые делают их пригодными только для оформления заголовков, лозунгов и других крупных надписей — да и то не всяких.

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



Ingleby — прекрасная антиква (со вкусными очертаниями буквы «a», например), которую разработал David Engelby. Идёт в четырёх начертаниях (обычное, курсивное, полужирное, полужирный курсив). Бесплатно для всех видов использования, но требует упоминания автора шрифта.

_{Шрифт лежит на dafont.com — это, насколько я понял, не очень полезно, потому что сайт не поддерживает многопоточное скачивание шрифтов (а значит, и докачку после обрыва).}

Клип к песне, который за 5 дней набрал полтора миллиона просмотра на YouTube.


p.s. Подскажите, что за шрифт?

   Казалось бы, зачем покупать журналы в их бумажном виде, если все из того, что в них есть, можно гораздо быстрее найти в сети? Все и даже больше. Сам не знаю ответа на этот вопрос и продолжаю покупать некоторые из изданий… ну или забираю журнальчики в офисах компаний, куда все эти бумажки привозят, и где их все равно никто не читает. Признаюсь честно – сам стал читать гораздо меньше, иногда даже просто пролистываю. Вроде бы все хорошо — актуальные темы, наглядная инфографика, интересные устройства, аккуратные обтравленные фотографии и порой смешные заголовки… дисочек даже запишут, если не два. Но… редко счастье бывает полным — то рекламу гигиенических средств на целый разворот сделают, то большую картинку на всю страницу, чтобы «место потратить». То читаешь про знакомый тебе девайс и понимаешь, насколько текст пустой или преукрашенный, но все же «в формате журнала».

   Но относительно недавно был такой журнал, как C'T. Он внезапно появился в России (по-моему, родом из Германии) и спустя всего 7 номеров так же внезапно прекратил свое существование. Но, признаться, это были те 7 журналов, которые я прочитал почти от корки до корки.

Vincent Connare, автор Comics Sans, в своей забавной презентации рассказывает историю появления этого неоднозначного шрифта на свет.

На Linux.org.Ru во блогозаписи «Эпидемия свободных шрифтов» рассказывают о том, что в этом году вышло обновление сразу нескольких свободных (открытых, бесплатных) шрифтов.

Прежде всего это гарнитура «Linux Libertine» (задуманная как аналог «Times New Roman» по размерам символов), и с нею доступная на том же сайте для скачивания в том же наборе файлов гарнитура «Linux Biolinum».

Также обновились сразу несколько свободных гарнитур Arkandis Digital Foundry (это «Berenis-Pro», «Gillius Collection» и «Tribun-Std»), а также шрифт «SwitzeraADF» (он выложен на странице доработок, так как не был с нуля разработан в Arkandis, а является доработкою шрифта «Vera Sans»).

Автор ЛОРовской блогозаписи полагает, что все эти шрифты предназначены скорее для использования в печатаемых документах, нежели в элементах интерфейса приложений. Мне его суждение представляется, однако, слишком категорическим: гарнитура «Linux Libertine» кажется готовою для Паутины, да и гарнитура «Linux Biolinum» вполне сгодилася бы для сайтов, кабы только кернинг у ней был в порядке. Также, по-видимому, в Arkandis полагают их гарнитуру «Berenis-Pro» пригодною к употреблению на сайтах, коль скоро прикладывают её вариант в формате WOFF в том же архиве для скачивания, что и OTF.

Лично меня немало порадовало присутствие в «Linux Libertine» и в «Linux Biolinum» букв добольшевицкой кириллицы («ѣ», «ѵ», «і», «ѳ»), а вот гарнитура «Berenis-Pro» вообще для русского языка менее чем пригодна, оттого что она не просто не содержит букв наших, но и заполнена вместо них пробелами.

На LORе (Linux.org.Ru) сегодня появилась новость о том, что компания PingWin Software (PingWinSoft.Ru) опубликовала объявление о начале открытого бета-тестирования своего пакета свободных шрифтов PingWi Typography (PWT), создававшегося с 2009 года специально для решения проблем с искажением форматирования документов, созданных средствами MS Office, при открытии этих документов в OpenOffice.org.

Гарнитуры, входящие в пакет PWT, разрабатывались «с нуля» в качестве метрических аналогов виндовских шрифтов Tahoma, Arial, Courier, Verdana и Times New Roman (и называются похожим образом: PWT Tahion, PWT Arion, PWT Courant, PWT Verde, PWT Timer); кроме того, шрифты PWT ориентированы на улучшение отображения текста на мониторах с низким разрешением.

Тестовый шрифтовой пакет PWT распространяется по специальной свободной лицензии. Гарнитуры лежат в TTF-виде внутри ZIP-архива.

Обратите внимание: в слове «PingWi» нет конечной буквы «n», но это не опечатка, так и задумано.

Выпуск окончательной версии шрифтового пакета запланирован на сентябрь 2010 года.