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

Пусть расцветают сто цветов, пусть соперничают сто школ. Этим лозунгом первого китайского императора Цинь Ши Хуана хочется поднять волну народного негодования стремления к появлению как можно большего количества шрифтов с веб-лицензией, которые поддерживают кириллицу. Сто школ в данном случае — различные словолитни и сервисы, предоставляющие встраиваемые шрифты.

В настоящее время подобные сервисы активно развиваются. Крупнейший из них, Typekit, содержит на данный момент 376 шрифтов от более чем 30 производителей. Но вот незадача: Typekit пока поддерживает только подмножество Latin-1, хотя и работает над добавлением поддержки других подмножеств Unicode.

Что же прямо сейчас делать нам, пользователям кириллицы?

Оригинальное название статьи, «Designing for the switch» содержит игру слов и говорит а) о разработке дизайна в эпоху перемен — перехода к нормальной поддержке подгружаемых шрифтов у всех пользователей, и б) о нюансе «моргания», смены шрифта при его подгрузке с помощью @font-face. Вообще говоря, на русском языке достаточно мало информации об опыте и нюансах использования @font-face, поэтому этим переводом я предлагаю начать генерировать более-менее содержательное информационное поле на эту тему. Heath

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

Да, мы были избалованы. Чтобы использовать Вердану, Джорджию или Камбрию, нам не приходилось думать.

Однако дизайнерам долгое время казалось, что им нужно большего. Мы хотим использовать любой шрифт, который нужен нам для нашего дизайна. Мы много нехорошего натворили, пытаясь достигнуть этой цели — например, помещали текст в картинку. Люди поумнее придумали вспомогательные инструменты типа sIFR или Cufón. С совсем недавнего времени большинство браузеров поддерживает @font-face. Плотина открывается. Это рассвет новой эры веб-типографики, и мы обязаны ступать в неё с осторожностью.

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

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

Со временем возможно появятся похожие таблички с правилами расстановки пробелов, знаков препинания и по оформлению текста в целом.

Вводим:

а и б
1 и 2

Получаем:

а и б
1 × 2

Возможно, в исходниках перепутаны коды символов, и преобразование адресовано букве «х». Багу уже года три, не меньше, указанный в разделе «О программе» email не реагирует. Приходится перед типографированием оборачивать «и» между цифрами в <span>.

Эта статья написана Джоном Даггеттом(John Daggett) — сотрудником компании Mozilla, который много работал с дизайнерами шрифтов и web программистами чтобы улучшить положение шрифтов в web. Статья представляет из себя поверхностный обзор новых возможностей и содержит некоторые примеры применения WOFF(Web Open Font Format). Полный список других работающих в этой области организаций вы можете найти на официальном блоге Mozilla (архив).

В Firefox 3.5 мы включили поддержку (архив) подключения шрифтов формата TrueType и OpenType. В Firefox 3.6 мы включим поддержку нового формата шрифтов Web Open Font Format или WOFF, который имеет два основных преимущества перед сырыми TrueType и OpenType:

 — это сжатый формат, значит вы увидите намного меньший объем загружаемых данных, чем при использовании сырых TrueType или OpenType;

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

Амперсанд является вещью присущей в основном латинской типографике, но тем не менее штука это красивая. В этом коротком очерке я расскажу о том, как можно использовать амперсанд на веб-страницах как в текстовой, так и в нарисованной (pre-rendered) форме.

Недавняя блогозапись, являющая собою азбуку веборазработчика, стала для меня поводом перечитать блог «I Love Typography». И что же? — тотчас, во блогозаписи «Encyclopædic type» от 29 августа, мне повстречалася новость о важном недавнем событии: начинается создание сетевой энциклопедии Typedia, которая будет содержать сведения о шрифтах и словолитнях, коллективно накапливаемые сообществом.

Когда я скачал около полугода назад типографскую раскладку Ильи Бирмана — я столкнулся со следующей проблемой: у меня не было «ё» в русской раскладке и, о ужас, «~» и «`» в английской.

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

Вчера мне потребовалось повторить все эти процедуры, но вместо ковыряния в конфигах я нашёл утилиту, которая позволяет в оконном интерфейсе создавать и редактировать раскладки (многие, конечно о ней уже знают):
Скачать утилиту можно с её официального сайта: scripts.sil.org/ukelele

Исправленная версия раскладки

Подправленную мною версию можно скачать (11 Кб).

Установка аналогична оригинальной версии:
Скачайте архив и распакуйте его содержимое в каталог /Library/Keyboard Layouts/
После этого включите раскладки в System Preferences → International → Input Menu

• Russian — Ilya Birman Typography PS/2
• English — Ilya Birman Typography PS/2

После этого советую перезагрузиться.

Замечание

Если возникнут проблемы — оригинальную раскладку Бирмана, наверное, лучше удалить.

Копорация Ascender, компания Carter & Cone и The Font Bureau, Inc., в сотрудничестве с Microsoft, анонсировали проект по разработке расширения гарнитур семейства Georgia и Verdana. Этот проект начат более года назад и первые гарнитуры ожидаются в первом квартале 2010 года.

Изначально гарнитуры семейства Georgia и Verdana были представлены Microsoft для экранного отображения. Разработанные Мэтью Картером (Matthew Carter) и Томом Рикнером (Tom Rickner) (сотрудником Ascender, который выполнил все работы по хинтингу), эти шрифты были выпущены в 1996 году в комплекте шрифтов «Core fonts for the Web», а в дальнейшем поставлялись с дополнением к Internet Explorer 4.0.

Любовь к шрифтам – это болезнь. Скорее всего большинству людей этого не понять – ведь мы живем в стране где вывески и витрины оформлены с такой безграмотностью что порой хочется достать фотоаппарат и сфотографировать это «счастье» да выложить в интернет дабы показать до чего может довести человеческое безразличие. Поэтому человек у которого на столе лежит каталог FontFont и который иногда бурчит что де «неплохо еще вот этот шрифт купить» воспринимается порой как немного «не в себе». Тем не менее, изрядная доля моего времени уходит на то чтобы потеоритизировать на тему того, какие шрифты где уместны, и как выработать свой уникальный стиль для презентаций, веб-типографики и печатной типографики. В этом посте – несколько мыслей насчет того что работает/не работает, и что бы хотелось попробовать.

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

Однако, должен подчеркнуть, что все нижеследующее — только наблюдения и результаты расспросов «местных», но никак не сформулированные правила. Буду рад замечаниям людей, действительно разбирающихся в вопросе.

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

В начале августа были все основания полагать, что будущее типографики в Паутине подлежит скорому и безжалостному выбору между двумя несовместимыми крайностями:

• С одной стороны — реализованные во браузерах Firefox и Opera (а в скором будущем — также и во Chrome) ничем не прикрытые форматы TTF и OTF, которые прекрасно подходят для распространения свободных или хотя бы бесплатных шрифтов, но которые приводят любого правоторговца в ужас и остолбененение, так как позволяют лёгким мановением руки скачать любой такой шрифт и поставить себе в систему невозбранно. Соответственно, для выкладывания собственнических коммерческих шрифтов такие форматы не годятся.
• С другой стороны — понимаемый в Internet Explorer формат EOT (Embedded OpenType), с патентованным механизмом сжатия, с DRM-полями для привязки шрифта к одному и только одному домену Интернета, на сайтах вне которого шрифт вообще не должен употребляться. Соответственно, прекрасная защита так называемой интеллектуальной собственности, зато дичайшие проблемы с лицензированием технологии и с кросс-платформенной её переносимостью.

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

В этот момент коммерческие словолитни пришли к идее «садовой изгороди» (эта ёмкая метафора придумана Владом Левантовским из Monotype, а стала известною в пересказе Ричарда Финка), то есть пожелали иметь такой формат шрифта, который, быть может, не слишком помешает целеустремлённому «пирату», однако всё же не позволяет скачать и установить «сетевой» шрифт к себе в систему прямо и непосредственно — а значит, укажет законопослушному (то есть копирайтобоязненному) пользователю, что так делать нельзя.

Таких форматов появилось две штуки — EOT Lite и WebOTF. И разработан даже особый патч для Файерфокса, который добавляет во браузер поддержку их обоих.

Формат EOT Lite поддерживает крупная шрифтоторговая корпорация Ascender, в рекламных целях изготовившая некоторое забавное подобие пивной этикетки:



Что гораздо важнее, Ascender планирует именно в этом формате продавать многие свои шрифты (а также некоторые чужие).

У формата EOT Lite есть заметное, существенное достоинство: это подмножество стародавнего майкрософтовского EOT, получающееся отказом и от жёсткой привязки к домену, и от собственнического алгоритма сжатия шрифтов. Следовательно, этот формат — пускай и оформившийся только в нынешнем году, причём сравнительно недавно — тем не менее поддерживался Корпорацией Microsoft давным-давно, начиная от версии Internet Explorer 4. Так что этот формат станет невозбранно работать во всех нынешних версиях популярнейшего (майкрософтовского) браузера. А вышеупомянутый патч для Файерфокса, несомненно, обеспечит поддержку EOT Lite и в будущих версиях второго по популярности браузера. Поэтому я согласен с тем мнением, которое Пол Айриш высказал в его подробном развёрнутом анализе нынешней ситуации с вебошрифтами: именно EOT Lite сейчас представляется наилучшим выбором формата собственнических шрифтов для Паутины.

А формат WebOTF получился в итоге слияния двух сравнительно новых предложений (ZOT для сжатия и .webfont для метаданных). Поэтому формат WebOTF предполагает преобразование .OTF-файла методом отдельного сжатия каждой таблицы шрифта путём пропускания её через функцию compress2() из библиотеки zlib. Соответственно, сжатием экономится траффик; и он сэкономится ещё более, если браузеру нужна не каждая таблица, так как тогда он сможет выборочно скачивать их с сервера: размеры и положение (offset) таблиц содержатся в заголовке WebOTF. В конец файла также ещё добавляются XML-метаданные о правах (хотя принуждение к соблюдению указанных там ограничений не предусматривается), а также некоторые двоичные данные (которыми правоторговцы могут помечать файл для дальнейшей идентификации покупателя по файлу, например). Многие правоторговцы склонны поэтому поддержать этот формат с превеликою готовностию; однако отсутствие широкой браузерной поддержки делает его будущее весьма мрачным, мне кажется. Бесперспективняк.

Однако закончу я на радостной ноте, и даже, если угодно, практически полезной ноте. Вышеупомянутый Пол Айриш измыслил краткий джаваскрипт, позволяющий выяснить, есть ли во браузере поддержка @font-face. Кому надобно, пользуйтеся.

 

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

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

В конечном счете, мы выделили 13 общих проблем и вопросов, имеющих отношение к типографическим проектам, и попробовали найти ответы на них в нашем исследовании:

1. Насколько популярны шрифты с засечками и без засечек в заголовках и основном тексте?
2. Какие шрифты используются наиболее часто?
3. Каков средний кегль для шрифта?
4. Каково, в среднем, соотношение между размером шрифта в заголовке и в основном тексте?
5. Чему равно среднее значение интерлиньяжа для основного текста?
6. Каково усредненное соотношение между значением интерлиньяжа и размером шрифта для основного текста?
7. Чему равно среднее значение соотношения между интерлиньяжем и длиной строки?
8. Каковы, в среднем, отступы между абзацами?
9. Каково усредненное соотношение значений отступа между абзацами и интерлиньяжем?
10. Как выделяются стилистически ссылки?
11. Сколько символов обычно используется в строке?
12. Как часто ссылки выделяются подчеркиванием?
13. Как часто используется замещение шрифтов (sIFR и прочие)?

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

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

Примерно год–полтора назад я написал свой плагин для популярного редактора TinyMCE, который умел типографить тексты посредством веб-интерфейса типографа Студии Лебедева. С того времени плагин успешно используется в проектах студий Nimax и Artilleria. После недавнего поста я решил таки его опубликовать, а также немного его усовершенствовал — добавил Типограф тов. spearance, а также Типограф студии Муравьёва. Способ типографирования можно выбрать непосредственно перед «операцией».

Усовершенствованный типограф я сегодня и представляю на суд публики.

• Демка (UTF-8): test.dis.dj/typograf
• Демка (CP1251): test.dis.dj/typograf/cp1251.php
• Качаем по адресу: test.dis.dj/typograf/typograf.zip
• Скрипты самих типографов: test.dis.dj/typograf/typograf-engines.zip (рекоммендую ознакомиться с инструкцией)

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

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

В топике Новая версия веб-типографа Студии Муравьёва был представлен замечательный типограф.

Типограф обрабатывает тексты не только по классическим законам (неразрывные пробелы, правильные кавычки, свисающая пунктуация и др.), но и по взятым канонам из «Справочника издателя и автора» Мильчина А. Э. Любители типографики должны это оценить.

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


При нажатии на кнопку не отображается никаких всплывающих окон, текс молча типографируется.

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

Первая типографская революция произошла во Всемирной Паутине настолько давно, что приходится производить поиски, чтобы установить подробности. Кажется достоверным то, что пишет Ian Graham: в Netscape Navigator 2.0 впервые появился элемент <font> (тогда он позволял задавать только размеры шрифта, и только в условных единицах), а в Internet Explorer 3 у этого элемента появился атрибут face, позволявший задавать начертание, задавать шрифтовое семейство. Википедия подсказывает, что Netscape Navigator 2.0 появился в марте 1996 года, а Microsoft Internet Explorer 3 — в августе того же года. В язык HTML версии 3.2 даже не входил атрибут face, хотя и упоминалося, что такой атрибут существует.

Тринадцать лет назад.

Все эти тринадцать лет для начертания текста сайтов в основном использовались несвободные шрифты, являющиеся частью операционных систем и офисных пакетов. Сайтам приходилося гадать о том, какие шрифты установлены у читателя, а какие не установлены, и какова вероятность того или другого, какие шрифты можно считать безопасными. Сочинялись специальные плагины jQuery и создавались специальные страницы, способные выяснить набор шрифтов на компьютере читателя. Особый дух того времени прекрасно передал despoth, сочинив превосходную серию статей о такой веботипографике, которая основана именно на подборе несвободных шрифтов (часть I — часть II — часть III — часть IV — часть V).

Наконец, это время кончилось: явствуют, зримо явствуют признаки Второй типографской революции, связанной с приходом @font-face.

Джон Даггетт сочинил познавательную статью о том, как все мы совсем скоро (после появления Safari 3.1, Firefox 3.5, Opera 10) сможем использовать загружаемые шрифты во всех популярных браузерах, а не только в одном наиболее популярном.

Марк Пилгрим грубо обрисовал ситуацию с лицензированием собственнических шрифтов. Ситуация эта немало напоминает глухой тупик. Даже создателям прекрасной демонстрации возможностей Firefox 3.5, чтобы изготовить страницу, пришлось специально связаться со шрифтопроизводителями и изготовлять такие особые (усечённые) версии использовавшихся шрифтов, чтобы их не было смысла копировать нелицензионно. А вон там предлагают раздавать особые паутинные обкусанные ужатые копии купленных шрифтов (которые сам покупатель вывешивать не имеет никого права, а только ссылаться). Остроумно. Открывает широкую дорогу в сторону Большого Брата: типа как недавно читальники Kindle удаляли книги Оруэлла за нелицензионность (даже честно купленные — просто оставляя стоимость их на счету покупателя в уплату). Так и тут. Внешний шрифт может неожиданно подохнуть, даже купленный заранее.

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

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

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

Не так давно на Хабре уже заходила речь о нашем новом типографе (см. habrahabr.ru/blogs/typography/66710/). Речь зашла раньше, чем я успел написать этот топик. Нам конечно же очень приятно, что силы, время и душу, которые мы вложили в этот бесплатный продукт кому-то пригодились. Наши первые версии писались в 2007 для форумных систем (о них вы сможете почитать на нашем сайте в разделе типографа, даже скачать можно будет). В конечном итоге мы решили позиционировать его как отдельный независимый продукт, и сейчас я хочу немного рассказать вам о нем.

Пояснение

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

Конкретизируя

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

(Пора выйти из тени)
О моем плагине уже писал товарищ
Теперь можно типографировать 4-мя типографами.
К уже имеющимся
rmcreative.ru/article/programming/typograph, typograf.ru,
Типограф студии Артемия Лебедева.
Добавил ещё один off-line типограф — студии Евгения Муравьева.

Все типографы настроены на работу с UTF-8.

Страница — Типограф для FCKEditor

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