Как стать автором
Обновить
9

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

Играем с шрифтами

Сначала показывать
Порог рейтинга
Уровень сложности

Знак рубля для самых популярных шрифтов

Время на прочтение1 мин
Количество просмотров152K
Несколько дней назад я столкнулся с проблемой: мне нужно было внедрить знак рубля на сайте, основным шрифтом на котором был 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
Всего голосов 136: ↑97 и ↓39+58
Комментарии169

Величие шрифтов

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


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

Читать дальше →
Всего голосов 71: ↑61 и ↓10+51
Комментарии16

Дырявый Ecofont экономит краску

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

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

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

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

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

Ecofont via Lifehacker
Всего голосов 86: ↑76 и ↓10+66
Комментарии50

Favicon и заголовок окна

Время на прочтение2 мин
Количество просмотров7.5K
imageВозможно, у вас вызовет сомнение тот факт, что иконка сайта и заголовок окна имеют какое-то отношение к веб-типографике, спешу вас заверить. Имеют! Как корешок книги к её обложке. Не буду лить воду и сформулирую правила оформления иконки и заголовка окна, созданые для повышения удобства при навигации по вкладкам.
Читать дальше →
Всего голосов 114: ↑105 и ↓9+96
Комментарии58

Истории

Раскладка клавиатуры с AltGr

Время на прочтение1 мин
Количество просмотров33K

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


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


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

Читать дальше →
Всего голосов 38: ↑36 и ↓2+34
Комментарии43

Сервис расстановки переносов

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

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

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

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

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

Эта статья уже со­дер­жит рас­став­лен­ные пе­ре­но­сы. Из­ме­няя раз­мер ок­на бра­у­зе­ра, мож­но уви­деть, как ра­бо­та­ет сер­вис.
Всего голосов 86: ↑84 и ↓2+82
Комментарии108

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

Время на прочтение8 мин
Количество просмотров11K

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


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

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

Читать дальше →
Всего голосов 63: ↑57 и ↓6+51
Комментарии71

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

Время на прочтение10 мин
Количество просмотров12K

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


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

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

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

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

Мне бы хотелось в рамках нескольких статей поговорить на тему подготовки макетов для показа клиентам, а также о том, какие трудности поджидают дизайнера на пути утверждения макета.
Читать дальше →
Всего голосов 124: ↑104 и ↓20+84
Комментарии95

Совмещенные «типографские» раскладки для нескольких языков

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

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

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

После этого, я вспомнил еще и о белорусских братьях, у которых наверняка были те же проблемы, что и у меня. Для них я подготовил еще два варианта раскладок — русскую с белорусскими буквами и обратную ей — белорусскую «типографскую» с отсутствующими русскими буквами. И напоследок, я совместил и украинские, и белорусские буквы в одной русской раскладке, дабы помочь тем, кто пишет на всех трех языках.
Читать дальше →
Всего голосов 90: ↑88 и ↓2+86
Комментарии43

Рождение Droid'а

Время на прочтение1 мин
Количество просмотров1.1K
image

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

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

По следам Forbes.
Всего голосов 53: ↑48 и ↓5+43
Комментарии35

Динамическая типографика

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

Ниже представлены примеры того, на сколько может быть захватывающей типографика в движении.
Читать дальше →
Всего голосов 26: ↑20 и ↓6+14
Комментарии12

95% веб-дизайна составляет типографика

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

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


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

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


Включите воображение (замените «печатный» на «интернет») и это звучит как описание работы информационного дизайнера. Задача информационного дизайнера и есть «разделять, организовывать и интерпретировать эту массу печатных изданий таким образом, что у читателя будет шанс найти то, что интересно ему».
Читать дальше →
Всего голосов 98: ↑84 и ↓14+70
Комментарии27

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн

Использование OpenType в Веб-Типографике

Время на прочтение4 мин
Количество просмотров1.3K

Идея


Недавно пришла в голову такая идея: почему OpenType не поддерживается напрямую в современных браузерах и как получить текст, восприимчивый к OpenType фичам но не являющийся в то же время картинкой?
Читать дальше →
Всего голосов 30: ↑27.5 и ↓2.5+25
Комментарии38

Десять смертных грехов веб-типографики

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

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

Free Image Hosting

Если вам нужно прервать мысль, то делайте это с помощью символа (alt+0151), а не парой знаков «минус». Это, пожалуй, главный источник раздражения для всех редакторов.
Читать дальше →
Всего голосов 173: ↑140.5 и ↓32.5+108
Комментарии96

Как найти нужный шрифт, не зная его названия?

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



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

Конечно, нельзя рассчитывать, что эти источники дадут вам 100 процентную уверенность в том что вы найдете нужный шрифт, но что помогут, так это точно.
Читать дальше →
Всего голосов 139: ↑131 и ↓8+123
Комментарии28

Веб-типографика сегодня. Часть V

Время на прочтение12 мин
Количество просмотров28K
Часть IЧасть IIЧасть IIIЧасть IVЧасть V — Часть VI

Часть V



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

Читать дальше →
Всего голосов 2: ↑2 и ↓0+2
Комментарии121

Церковники воссоздали шрифт Ostrog

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



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

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

Краудсорсинг шрифтов

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

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

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


Читать дальше →
Всего голосов 36: ↑33 и ↓3+30
Комментарии26

Публичная порка он-лайн типографов (часть 1)

Время на прочтение1 мин
Количество просмотров1.7K
Последний раз подобное мероприятие проводилось очень давно, и к сожалению в порке участвовали далеко не все кандидаты.
Читать дальше →
Всего голосов 41: ↑34 и ↓7+27
Комментарии55
Изменить настройки темы

Вклад авторов