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

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

Создатели проекта The Noun Project поставили целью собрать пиктограммы для всех объектов в мире. Коллекцию по мере сил пополняют десятки дизайнеров из разных стран. Все иконки публикуются в формате SVG, под лицензией Creative Commons Attribution 3.0 (CC BY) или Public Domain, разбиты на тематические категории, есть поиск на русском языке.

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

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

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

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

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

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

Примерно год–полтора назад я написал свой плагин для популярного редактора 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 (рекоммендую ознакомиться с инструкцией)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Статья написана в 2009 году, и с тех пор многое изменилось, в том числе появились некоторые альтернативные шрифты для программирования, например, Anonymous Pro.

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

Я выкладываю список из десяти моноширинных шрифтов, готовых к использованию. Некоторые из них идут в комплекте с современными операционными системами, но большинство можно бесплатно скачать из интернета. Отдельные, в том числе Consolas, являются частью коммерческого ПО.

Типографика на Вебе прошла длинный путь с тех пор как Тим Бёрнерс-Ли нажал на рубильник в 1991-ом году. Давным-давно, во времена IE 1.0, выражение «хорошая типографика на Вебе» было, скорее, оксюмороном (сочетанием противоположных по значению слов). Многое успело измениться. У нас есть не только браузеры, которые умеют показывать картинки (ах!); у нас есть возможность оживлять наши веб-страницы, используя великолепную типографику.