Мало кто знает, что в 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 году, Эмиль Рудер, знаменитый швейцарский типограф, написал о современных ему материалах для печати то, что мы могли бы легко сказать о наших современных веб-сайтах:

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

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

Идея

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

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

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



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

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



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

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

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

Часть V

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