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

Даже относительно ограниченный набор возможностей 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

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

Дизайн-студия «Сатори» в марте этого года представила первый шрифт, содержащий символ тенге, а сегодня при поддержке ведущих казахстанских дизайн-студий объявила о запуске сайта symbol.kz, на котором собрана вся информация о символе казахстанской валюты и все необходимое для ее использования.

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

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

Нашел несколько полезных ссылок, спешу поделиться с теми, кто еще не успел найти подобное.

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


^{в title расшифровка}

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

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

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

VINCENT CONNARE, создатель Comic Sans

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


^{в title расшифровка}

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

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

(кликабельно)

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

Содержание

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

Посмотреть еще 42 портрета »

Про тире в диапазонах

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

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

Привет, уважаемое хабраобщество! Помните классические сьеровские квесты, а-ля Space Quest и Leisure Suit Larry? Так вот, я сейчас занимаюсь их переводом на русский язык и объединением в коллекцию. Главным принципом, которым я руководствуюсь, является работа на максимально возможном качественном уровне.

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

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