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

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

Выбираете шрифт? Можно сделать это просто отвечая на вопросы «да» и «нет», благодаря блок-схеме авторства Julian Hansen.



Ссылка на полную версию картинки:
julianhansen.com/files/infographiclarge_v2.png (1983×1402)

Шрифты классические, но, я думаю, каждый может открыть для себя нечто новое в этой схеме.

Интересуюсь историей, веду краеведческий форум о Риге, где часто необходимо цитировать источники. Порой нужны старые буквы – дореволюционная кириллица, „ŗ”, „ō”, и другие. В клавиатурных раскладках их нет, character map неудобен – собрал редкие буквы и лигатуры (сросшиеся буквы) на одной странице «для своих» по типу copypastecharacter.com.

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

Многие помнят, как в конце прошлого года мы тут порадовались появлению паратайповского бесплатного шрифта PT Sans, содержащего все символы кириллических алфавитов народов России, а также буквы имперской письменной речи («ѣ», «ѵ», «і», «ѳ»).

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

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

Во-первых, помимо простого набора шрифтов, для скачивания теперь предлагают особый Web-набор, содержащий версии всех шрифтов этой гарнитуры в форматах EOT (для браузера IE) и WOFF (для Файерфокса, например). В том же архиве лежит готовый пример (HTML+CSS) использования этих шрифтов, причём я проверил и убедился, что пример вполне соответствует той полезной рекомендации, которую Пол Айриш (Paul Irish) составил.

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

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

Кернинг сочетания «*.*» продолжает в этом шрифте оставаться ужасным, но в остальном развитие шрифта заслуживает громких и искренних апплодисментов.

Новое поколение браузеров поддерживает HTML 5, а вместе с ним, кроме всех полезных нововведений, и возможность использовать любые шрифты на веб-страницах. Когда только об этом стало известно, счастью многих веб-дизайнеров (а особенно тех, кто работает еще и с печатью) не было предела. Еще бы, раньше шрифты, подходящие для использования в вебе, можно было пересчитать на пальцах одной руки, а теперь бери и ставь вообще любой шрифт!

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

Сегодня я обнаружил, что IDN wiki годится не только для того, чтобы пугать неподготовленных людей неожиданной работоспособностью странных доменных имён (таких, как http://пример.испытание/). В этой вики есть и страница «Fonts», на которой предлагают скачать шрифты, пригодные для написания и чтения текстов на шестнадцати языках: амхарском, арабском, бенгальском, греческом, китайском, корейском, кхмерском, русском, тайском, тамильском, урду, фарси, хинди, японском и паре еврейских (иврит и идиш).

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

Microsoft выложила в публичный доступ новый шрифт под названием IbarraReal. Шрифт бесплатно лицензируется для пользователей легальных копий Windows XP/Vista/7. Шрифт доступен в вариантах: Bold, Bold Italic, Italic, Regular.

Как написано по ссылке, этот шрифт отражает испанскую культуру:

Кино сорок седьмого года про то, как создается книга. От рукописи до кандидата для вашей полки. Кино на английском — но там несложно, да и не обязательно.

Особенно интересно посмотреть на ту часть процесса, которая (формально) сейчас может быть выполнена каждым из вас. Я про набор на линотипе и сборку страницы. Да, да — набрать текст в ворде и поменять начертание шрифта и его размер, чтобы «влезло на сорок страниц», вы и сами сейчас можете. А дальше процесс не поменялся — отдадите в типографию (вам же нужно не десять копий, а трехтысячный тираж в твердой обложке), полученные страницы выводят на металл и… Людей поменьше теперь используют, а операции те же.

via

PS: Получилось как бы продолжение предыдущего постинга про Гуттенберга.

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

В настоящее время подобные сервисы активно развиваются. Крупнейший из них, 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. Кому надобно, пользуйтеся.