Этого ждали редакторы, корректоры, верстальщики, веб-девелоперы и блоггеры. Типоргаф должен был обновиться ещё в январе, но обновляется только сегодня. Итак рад представить вам Типограф 2.0!

Перевод занятной статьи On diacritics (David Březina) из блога I love typography.

Проблема диакритических знаков, используемых в центральной Европе, не очень то и актуальна для большинства из нас (со своими чёрточками и точечками над «Й» и «Ё» вроде бы нормально разобрались), но для дизайнеров, работающих с зарубежными клиентами, будет весьма познавательно. Да и вообще, как говорится, для общего развития…

По поводу ошибок и прочего — ругайте переводчика (то бишь меня). Но не сильно. Пишу и перевожу как могу :)

Публикуется с разрешения автора.

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

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

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

Скачать можно:

Шрифт, Open Type, MS Windows 1251 Cyrillic, ~50 Кб.
Образец шрифта, PDF, ~90 Кб.

Мало кто знает, что в HTML есть специальный символ для «мягкого» переноса — ­. Работает он так: если попадает на конец строки — появляется символ переноса, если не попадает — ничего не отображается. Очень удобно, но, к сожалению, вручную вставлять в текст такие символы — занимает слишком много времени. Сегодня обнаружил интересный сервис для автоматической расстановки.

Работая над второй версией Типографа я всё больше прихожу к мнению что делаю что-то не так. Попробовал разобраться в причине и вот что понял для себя. Я отклонился от основной идеи создания Типографа — помощь в изучении типографики и вёрстки. Сегодняшний проект не помогает глубже изучить вопрос, он только ещё больше плодит безграмотность.

На сайте Ильи Бирмана появилась вторая версия его замечательной типографской раскладки.
Судя по дате создания файлов в архиве, новый продукт вышел 26 декабря ушедшего года.

Наиболее заметные улучшения:

• Появились стрелочки, которых действительно очень не хватало
• Знак бесконечности — тоже не помешает
• Короткое тире
• Минус
• Буквы дореволюционной орфографии
• Появилась версия под Мак

Напомню, что сделать свою собственную раскладку под Виндоус можно с помощью MKLC.
Рассмотреть и забрать готовую типографскую раскладку 2.0 можно на сайте Ильи Бирмана.

Несколько дней назад я столкнулся с проблемой: мне нужно было внедрить знак рубля на сайте, основным шрифтом на котором был Arial. Как выяснилось, решение, предлагаемое технологами студии Лебедева, требует создания уникального EOT-шрифта, который по определению содержит лицензионную информацию и работает только на ограниченном числе доменов. Поэтому невозможно было просто стырить шрифт с сайта, где знак рубля уже внедрён. Проблема заключалась в том, что два дня назад в интернете не было нормальных бесплатных TTF-шрифтов со знаком рубля, которые можно было бы переконвертировать в EOT. (ПараТайп сделал отличный бесплатный шрифт с засечками, но несусветнейшее жирное говно без оных, а мне нужен был Arial или что-то очень похожее).

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

Вчера в своём живом журнале Артемий опубликовал запись, в которой дал ссылки на шрифт с 19 начертаниями знака рубля: Arial Regular, Arial Italic, Arial Bold, Arial Bold Italic, Georgia Regular, Georgia Italic, Georgia Bold, Georgia Bold Italic, Tahoma Regular, Tahoma Bold, Times Regular, Times Italic, Times Bold, Times Bold Italic, Lucida Regular, Verdana Regular, Verdana Italic, Verdana Bold, Verdana Bold Italic.

Браво! По-моему, это отличный новогодний подарок. Спасибо!

Забираем здесь: rouble.ttf, rouble.otf

Потрясающе видео «Mankind Is No Island», смонтированное из снимков шрифтов и текстов, снятых на мобильный телефон на улицах Сиднея и Нью-Йорка, получило награду на австралийском кинофестивале Tropfest NY 2008.


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

Шрифт Ecofont — рождение ума человека по имени Колин Уиллемс (Colin Willems), работающего в голландской компании SPRANQ.

Основное отличие шрифта Ecofont от всех остальных — это маленькие неокрашенные кружочки, помещенные внутрь каждой буквы с одной-единственной целью: уменьшить общее количество тонера/чернил, используемых принтером при печати документов. Скажем прямо — реализация проста до невозможности, но возможно как раз по этой причине подобный шрифт появился только сейчас.

Какой объем символа может быть убран, при условии, что читабельность текста сохранится? После множества тестов с различными формами в Spranq пришли к выводу, что лучше всего использовать маленькие круги, а еще после нескольких тестов было обнаружено, что в результате принтер использует на 20% меньше краски — отличное антикризисное решение для корпоративного сектора.

И хотя создатели шрифта и не ставят своей целью его популяризацию, наверняка те, кому идея приглянулась, обратят на него свое внимание. Для печати больших объемов продукции (как в издательском деле) экономия подобного рода наверняка найдет применение.

Позитивный момент из описания шрифта: «The Ecofont is distributed under GPL...»

Ecofont via Lifehacker

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

Под катом замечательное видео от VFS об азах типографики, в очень интересной форме.

Мне, как обычному пользователю, надоело каждый раз переключать русскую раскладку для набора символов типа: [ ] { } < >, одного-двух символов латиницы и т. п. Мне кажется, что в этом я не одинок, и решил поделиться достаточно простым способом (для Windows).

На Хабре упоминалась клавиша AltGr и о том, что с ее помощью можно вводить различные спецсимволы. Ничего создавать я не хочу, поэтому качаем готовую раскладку(UPD: 404, см. ниже), устанавливаем, и добавляем раскладку «Русская (AltGr)» (Язык и региональные стандарты > Языки > Подробнее)

Все, теперь вместо Ctrl + Shift (или Alt + Shift) можно удерживать AltGr. Надеюсь, кому-нибудь будет полезно.

Не­дав­но ком­па­ния Qlikworld вы­ло­жи­ла не­боль­шой сер­вис рас­ста­нов­ки «мяг­ких» пе­ре­но­сов. Он на­хо­дит­ся по ад­ре­су — www.plazoo.com/ru/tools.asp

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

Сер­вис рас­став­ля­ет пе­ре­но­сы с уче­том воз­мож­но­го из­ме­не­ния раз­ме­ра ок­на вы­во­да.

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

До­пол­ни­тель­но, в этом сер­ви­се есть воз­мож­ность по­смот­реть стра­ни­цу су­щест­ву­ю­ще­го сай­та с уже рас­став­лен­ны­ми пе­ре­но­са­ми. Ра­бо­та­ет, прав­да, не для всех сай­тов, но в це­лом мож­но по­лу­чить пред­став­ле­ние, ка­кой вид мо­жет иметь кон­крет­ный сайт пос­ле его об­ра­бот­ки.

Эта статья уже со­дер­жит рас­став­лен­ные пе­ре­но­сы. Из­ме­няя раз­мер ок­на бра­у­зе­ра, мож­но уви­деть, как ра­бо­та­ет сер­вис.

Готовим макет для клиента. Часть II: Если гладить, то как?

Часть I: Гладить или нет?
Часть II: Если гладить, то как?

Итак, в первой части мы рассмотрели доводы «за» и «против» экранного сглаживания. Теперь давайте обратимся к практическим примерам и поговорим о некоторых тонкостях подготовки макета для демонстрации заказчику.

Готовим макет для клиента. Часть I: Гладить или нет?

Часть I: Гладить или нет?
Часть II: Если гладить, то как?

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

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

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

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

Долгое время у меня в системе было установлено 3 раскладки — английская, русская и украинская. Так как, преимущественно, я использую английскую и русскую, лишнее переключение раскладки меня стало раздражать, и украинская раскладка была снесена. Для редких случаев, когда она была нужна, я устанавливал ее заново. Но проблема решилась лишь частично. Когда украинский был нужен — его не было под рукой.

Совсем недавно я подумал, почему бы не дополнить типографскую раскладку Бирмана недостающими буквами из украинского алфавита (коих всего 4). Вооружившись Microsoft Keyboard Layout Creator, я создал такую раскладку. Теперь, для набора украинских букв мне стоит лишь зажать правый альт и набирать их как обычно (ї = Alt + ъ, Ї = Alt + Shift + ъ, ...)

Порадовавшись немножко, я создал еще и обратную раскладку на основе украинской — для тех, кто пользуется преимущественно украинским языком (ы = Alt + і, ...). Кроме того, получившуюся украинскую раскладку я дополнил всеми типографическими цацками раскладки Бирмана, так что все сочетания значков остались на старых местах.

После этого, я вспомнил еще и о белорусских братьях, у которых наверняка были те же проблемы, что и у меня. Для них я подготовил еще два варианта раскладок — русскую с белорусскими буквами и обратную ей — белорусскую «типографскую» с отсутствующими русскими буквами. И напоследок, я совместил и украинские, и белорусские буквы в одной русской раскладке, дабы помочь тем, кто пишет на всех трех языках.

Мы непрестанно жалуемся на отсутствие единства дизайна в телефонах с надписью Google, но правда в том, что есть один элемент, гармонично воспринимаемый по всей ОС: шрифт Droid. Журнал Forbes рассказал читателям о результате интенсивной, двухлетней коллаборации между студией Ascender и Google.

В процессе создания типографов носило между пузыреподобным, конфетным стилем Cute и острым, заточенным Techno, прежде чем возникло нечто нейтральное и приятное. Это единственный, пока, шрифт в телефоне (приложения тоже будут его использовать) т.к. единственный присутствует в SDK в трех вариантах: с засечками, без засечек и моноширинном. Хорошо, что над ним поработали, а не похалтурили.

По следам Forbes.

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

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

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

Информационный дизайн это типографика

В 1969 году, Эмиль Рудер, знаменитый швейцарский типограф, написал о современных ему материалах для печати то, что мы могли бы легко сказать о наших современных веб-сайтах:

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

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