Идея

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

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

1. Использование дефисов вместо тире em-dash.



Если вам нужно прервать мысль, то делайте это с помощью символа (alt+0151), а не парой знаков «минус». Это, пожалуй, главный источник раздражения для всех редакторов.

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



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

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

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть V

Очевидно, что в сфере высоких технологий развитие зачастую происходит быстро и бурно. Так произошло и со средствами отображения информации. В течении каких-то двух-трёх лет обычные ЭЛТ-мониторы почти целиком и полностью были вытеснены стремительно дешевеющими ЖК-собратьями. Что позволило существенно улучшить как геометрию отображения, так и цветопередачу, а также снизить утомляемость глаз за счёт отсутствия вредного мерцания. И если несколько лет назад подобное утверждение в пользу TFT-панелей можно было бы оспорить, то теперь этот факт не вызывает ни у кого сомнений: ЖК-дисплеи намного лучше для повседневной работы рядового пользователя. В связи с этим фактором возникла необходимость поиска качественно новых алгоритмов отображения шрифтов. Одно из таких решений пусть не сразу, но всё же получило определённое признание в среде пользователей, и на сегодняшний день является чуть ли не самым популярным на современных платформах. Речь, конечно же, о технологии рендеринга ClearType, которая послужила причиной разработки новых веб-ориентированных шрифтов…

Сообщество славянской типографики создало и выложило в свободный доступ церковнославянский шрифт Ostrog. Его можно скачать в вариантах TrueType (TTF), «дольний» TrueType (TTF), Type1 и «дольний» Type1.



Шрифт разработан на основе старопечатных изданий г. Вильно и Острога второй половины XVI века. Создателем шрифта предположительно является Пётр Мстиславец, белорусский типограф, который приехал в Москву и помог российскому первопечатнику Ивану Фёдорову напечатать его первую книгу. Затем Мстиславец вернулся в Беларусь (ВКЛ) и соорудил там свою типографию. В Беларуси книгопечатание было известно за полвека до этого, так что типография стала далеко не первой.

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

Краудсорсинг проникает в разные немыслимые области. Взять, к примеру, разработку шрифтов. Раньше этим занимались специализированные компании или вынужденно переквалифицированные дизайнеры, вроде сотрудников студии Лебедева. В результате мы получаем или закрытый продукт, недоступный для сообщества дизайнеров, или непомерно дорогой. Типичная стоимость коммерческого шрифта колеблется в районе $30-40.

Слава богу, теперь всё меняется благодаря краудсорсингу. Разработка шрифтов оказалась отличным применением для концепции UGC, как показывает пример онлайнового редактора шрифтов и сервиса FontStruct.

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

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

Основы web-типографики пришли к нам из далекого 1991 года, еще от небезызвестного Tim Berners-Lee :)

Если оглянуться назад, в страшные времена царствования IE 1.0, то web-типографика (я не говорю о web-дизайне) находилась в зачаточном состоянии. На данный момент, ситуация иная. Мы имеем достаточно средств, для грамотного оформления текста на web-странице.

Cуть web-типографики заключаться не просто в выборе нужного шрифта и умение отличить начертание одного шрифта от другого.


Рис. 1: Как показали последние опыты, 90% тренированных обезьян правильно отличают шрифт Helvetica.

Мы поговорим о web-типографике как о рецепте, содержащем четыре основных компонента. Если вы когда-нибудь пытались приготовить суфле, то скорее всего, смогли ощутить насколько важен рецепт его приготовления.

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

Линда Фэйн собирает статистику по предпочтениям внешнего вида текстового блока на специальной страничке «Text Prefs».



На странице нужно повыбирать шрифт и понажимать на кнопки увеличения/уменьшения кегля шрифта, межстрочного расстояния и ширины колонки, создав наиболее удобочитаемый для вас на данном мониторе блок текста. Чем сильнее мы пропиарим эту страничку Линды, тем полнее будет статистика (пусть и англоязычную, но это уже будет хоть что-то; может быть, кто-то надумает сделать кириллическую?).

После того, как статистика будет опубликована, обязуюсь доложиться в этом блоге. Ссылка была обнаружена через блог I Love Typography, за что спасибо Джону Бордли.

Сегодня Дизайнер Всея Руси совершил типографический наброс на вентилятор в своём личном блоге в Livejournal.

Так вот, ребята. Знак многоточия состоит из трех точек. «Тук, тук, тук», — именно такие звуки должна издать ваша клавиатура. Ни в коем случае нельзя пользоваться символом, называемым многоточием (…). Этот символ один содержит все три точки в себе. Придуман он для моноширинного набора и экономии байтов, однако пользоваться им для верстки книг, а также газет и журналов — нельзя.

Собственно, половина леммингов начала радостно принимать распоряжение Дизайнера Всея Руси.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть IV

Итак, настала пора выяснить, какие шрифты и с какой долей вероятности могут оказаться установленными в тех или иных операционных системах либо в результате каких-то особых ситуаций (например, при установке пакетов Microsoft Office, Adobe Creative Suite или CorelDRAW! Suite), либо в «девственно чистых» ОС (что, несомненно, наиболее приемлемый вариант). А также узнать, какие из этих шрифтов пригодны для использования и в каких конкретно случаях.

Традиционно, в Web, типографика не является основой дизайна. Но, она может
доминировать, преобладать и быть повсюду! Весьма смело…

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть III

Оказалось, что аж ещё со времён Windows 98 в стандартный комплект включается шрифт под названием Lucida Sans Unicode, который особо нигде не используется. Попробуем заменить им эппловский Lucida Grande.

Многие согласятся, что стандартных Arial, Times, Verdana и т.д. зачастую не хватает.
Тут на помощь вроде как должен прийти css правило @font-face, которое позволяет использовать свой шрифт. Но к сожалению нормальной поддержки браузерами нет. В качестве теста можно использовать http://www.alistapart.com/d/cssatten/stef.html.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть II

Во-первых, увеличились размеры экранов, улучшилась чёткость отображения и качество передачи цветов. В наше время всё реже используются старые ЭЛТ-дисплеи с небольшим разрешением, выпуклым экраном, мерцанием или ограниченной цветопередачей (помните CGA/EGA/VGA?). Фактически, количеством таких мониторов по сравнению с современными плоскими ЖК-дисплеями уже сегодня можно смело пренебречь. Изменились и негласные стандарты de facto и для разрешения: если в самом начале сайты создавались под размер экрана в 640х480 пикселей, потом для 800х600, то сегодня используется стандарт 1024х768. С появлением широкоэкранных (wide) мониторов начал было маячить новый стандарт 1280х960, но большую популярность в последнее время приобрели компактные устройства вроде Asus eeePC или Apple iPhone, так что не исключён факт возвращения в качестве стандарта разрешения меньшего, чем 1024х768. Впрочем, в данном случае это не столь важно, поскольку в любом случае на сегодняшний день разрешение экрана напрямую зависит от его физического размера, а величина одной отображаемой точки достаточно мала по сравнению с пикселями десятилетней давности, что позволяет на любых современных устройствах отображать шрифты одинаково качественно. Это, кстати, приводит и ко второму фактору.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть I

Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

Итак, какова ситуация в области современной веб-типографики и какими способами следует решать возникающие проблемы?

Британский сайт I Love Typography, посвящённый типографике, опубликовал список с примерами отличной типографики. Этот список составлен по итогам II кв. 2008 года. Предыдущие «хит-парады» можно найти здесь и здесь.

Каждый пример сопровождается кратким комментарием, а нажатие на скриншот ведёт на оригинальный сайт.

Seed Conference

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

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

Иногда, работая в текстовом редакторе с моим любимым моноширинным шрифтом Lucida Console, я сталкиваюсь с тем, что не могу отличить неразрывный пробел от обычного или длинное тире от дефисо-минуса. И мне пришла в голову идея изменить шрифт таким образом, чтобы можно было видеть различия между символами.

Уже после публикации заметки о раскладках клавиатуры наткнулся ещё на один перл, мощнейшее дополнение к FireFox с названием abcTajpu (пока что работает только в версиях 1.5 — 3.0b3).

После установки дополнение фактически заменяет клавишу Compose при работе в FireFox. С помощью abcTajpu можно легко набирать всякие хитрые символы (å℃≈Łķē¾Æ) без шаманских плясок с раскладками, а также задавать любые пользовательские замены (например, два пробела заменять на  ).

Прочие статьи о «типографских» раскладках на Хабре:

• Типографика: «Типографские» раскладки клавиатуры
• Убунтариум: И снова о раскладке Бирмана
• Типографика: Решение проблем с типографской раскладкой Ильи Бирмана
• Типографика: Об использовании длинного тире и пр.