Как стать автором
Обновить
1.5

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

Играем с шрифтами

Сначала показывать
Порог рейтинга
Уровень сложности

Шрифты «за изгородью»: форматы EOT Lite и WebOTF

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

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

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

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

[EOT Lite]

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

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

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

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

Тенденции мировой типографики

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

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

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

В конце исследования мы собрали большое количество данных, которые мы оценили и подготовили для этой статьи. Основываясь на статистике, мы выделили несколько приблизительных рекомендаций для работы с набором. Пожалуйста, отметьте, что полученные правила хоть и часто, но далеко не всегда могут быть восприняты как непреложный закон.
Отвечаем на вопросы
Всего голосов 74: ↑67 и ↓7+60
Комментарии43

Типограф для TinyMCE

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

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

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



Описание
Всего голосов 38: ↑37 и ↓1+36
Комментарии30

Эволюция письменности – часть I: рукопись

Время на прочтение3 мин
Количество просмотров14K

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

Переписчики были значительной частью любого процесса публикации. Представьте, сколько времени требовалось на то, чтобы переписать книгу, слово за слово, с использованием орнаментов имея только простые инструменты. Старая рукопись настолько важна, что даже сегодня некоторые компьютерные шрифты имитируют ее. Давайте теперь разберемся, как письменность прошла путь от глины к прекрасной рукописи.
Читать дальше →
Всего голосов 81: ↑74 и ↓7+67
Комментарии32

Истории

Типограф Евгения Муравьева для TinyMCE

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

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

image
При нажатии на кнопку не отображается никаких всплывающих окон, текс молча типографируется.
Читать дальше →
Всего голосов 51: ↑44 и ↓7+37
Комментарии37

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

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

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

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

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

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

Список пошёл.
Всего голосов 160: ↑137 и ↓23+114
Комментарии85

Новая версия веб-типографа Студии Муравьёва

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

Пояснение


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

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


Сейчас он включает в себя множество умных правил, которые время от времени улучшаются и становятся более продуманными. Типограф обрабатывает тексты не только по классическим законам (неразрывные пробелы, правильные кавычки, свисающая пунктуация и др.), но и по взятым канонам из «Справочника издателя и автора» Мильчина А. Э. Любители типографики должны это оценить.
Читать дальше →
Всего голосов 78: ↑66 и ↓12+54
Комментарии62

Типограф (плагин к редактору FCK)

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

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

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

Плагин делался первоначально для себя и так как к посту не было ни одного коммента, то и не правился.
Типограф для FCK.
Типограф для FCK.Форма типографирования
Всего голосов 48: ↑39 и ↓9+30
Комментарии36

Алматинские дизайнеры способствуют внедрению символа тенге

Время на прочтение1 мин
Количество просмотров2K
Дизайн-студия «Сатори» в марте этого года представила первый шрифт, содержащий символ тенге, а сегодня при поддержке ведущих казахстанских дизайн-студий объявила о запуске сайта symbol.kz, на котором собрана вся информация о символе казахстанской валюты и все необходимое для ее использования.
image
Всего голосов 50: ↑35 и ↓15+20
Комментарии103

Плагин Типограф для FireFox

Время на прочтение1 мин
Количество просмотров1.3K
Плагин Типограф для FireFox, написанный Максимом Мазиным, теперь поддерживает веб-сервис проекта http://typograf.ru

Читать дальше →
Всего голосов 58: ↑55 и ↓3+52
Комментарии34

«Безопасные» шрифты

Время на прочтение1 мин
Количество просмотров38K
Задался недавно вопросом, какие шрифты можно без зазрения совести и страха развалить дизайн сайта использовать на последнем.

Нашел несколько полезных ссылок, спешу поделиться с теми, кто еще не успел найти подобное.
пять штук
Всего голосов 62: ↑50 и ↓12+38
Комментарии34

Читаем пальцами — 2

Время на прочтение2 мин
Количество просмотров1K
Я не уверен, интересно ли это Хабралюдям, но решил рассказать о том, что было сделано на www.Braille.ru, в том числе с вашей неоценимой помощью (например в комментариях к моему первому топику на эту тему).

И снова здравствуй, HabraHabr!
в title расшифровка

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

Читать дальше →
Всего голосов 46: ↑45 и ↓1+44
Комментарии27

Создатель Comic Sans

Время на прочтение1 мин
Количество просмотров20K

«Знаете, я просто хочу спросить — зачем? Какого черта люди выбирают Comic Sans? Это просто поражает. Ведь существует более 200 шрифтов в Mac OS X и Windows Vista, в смысле, среди них есть куча шрифтов, которые намного лучше для чего угодно. Но люди по-прежнему выбирают Comic Sans для наиболее отсталых, неуместных целей. Я создал Comic Sans, чтобы заполнить окошко для слов собаки-помощника в Microsoft Bob. Потом отдел маркетинга взялся за него и они включили этот шрифт в OEM версию Windows 95. Вот тогда моя проблема и началась.

Я не знаю, сможете ли вы понять, каково это, когда твоя жизнь определяется самым неуместно используемым шрифтом в истории. Меня представляют как „парня, который создал Comic Sans“, и я думаю, у людей инстинктивно негативная реакция на это.»

VINCENT CONNARE, создатель Comic Sans
Всего голосов 210: ↑200 и ↓10+190
Комментарии100

Ближайшие события

7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
22 – 24 ноября
Хакатон «AgroCode Hack Genetics'24»
Онлайн
28 ноября
Конференция «TechRec: ITHR CAMPUS»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань

Читаем пальцами. Тексты азбукой Брайля своими руками

Время на прочтение1 мин
Количество просмотров7.7K
Вы хоть раз видели визитку, пригодную для понимания слепого человека? А брошюру? А расписание автобусов на автобусной остановке?

HabraHabr - привет!
в title расшифровка
Читать дальше →
Всего голосов 102: ↑96 и ↓6+90
Комментарии79

Имеет ли веб-типографика значение?

Время на прочтение4 мин
Количество просмотров2.3K
За последнее время ситуация с типографическим оформлением сайтов потихоньку начинает улучшаться, но «средняя температура по больнице» растёт очень неуверенно. И в беседах с разными людьми я не раз слышал вопрос: «А зачем вообще заморачиваться с типографикой на сайте?»

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

Почему же это так?
Всего голосов 55: ↑41 и ↓14+27
Комментарии56

Рецепты хорошей типографики

Время на прочтение7 мин
Количество просмотров57K
Судя по результатам голосования, которое я проводил в своём блоге, большинство пользователей никак не типографируют тексты перед публикациями (НЛО не считается). Те, кто работают над текстами, в большинстве своём делают это вручную, поэтому я решил попробовать собрать воедино рецепты экранной типографики, дабы не забывать самому и напомнить другим. Не думаю, что статья будет чем‐то новым для опытных верстальщиков. Новички узнают, профи исправят :)

Содержание

  1. Дефисы, тире, минусы и другие палочки
  2. Кавычки и чёрточки
  3. Скобки
  4. Многоточие
  5. Заголовки, списки

Читать дальше →
Всего голосов 154: ↑133 и ↓21+112
Комментарии92

Гарнитура Прейскурант

Время на прочтение2 мин
Количество просмотров2.7K
С момента принятия Нацбанком РК графического символа валюты Казахстана прошло два года, а символ до сих пор практически не используется. В основном из-за того, что по сей день не существовало шрифтов, содержащих этот знак. Однако, невозможно было создать новые шрифты с символом тенге, или включить его в уже существующие, по той причине, что до недавнего времени он не был внесен в универсальный набор символов (UCS) Юникода.

Теперь, когда нам точно известно что символ тенге внесен в UCS (код U+20B8), мы имеем возможность создавать шрифты, содержащие этот знак.

Читать дальше →
Всего голосов 44: ↑39 и ↓5+34
Комментарии65

Вклад авторов