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

Время изменилось. Теперь в одиночку можно написать приложение для миллионов человек. Не нужно думать ни о хостинге, ни о дистрибуции, ни о масштабируемости — облака сделают всё за вас.

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

Стоит сейчас какому-нибудь «Энгри бёрдз» написать «2-е птицы», и все молодое поколение будет неправильно наращивать окончания у числительных (на самом деле, наращиваются только порядковые числительные: «2-й дом», «1-му победителю», но «2 птицы»).

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

Поговорим сегодня о внимании к деталям на одном практическом примере (будет много картинок).

Пожалуй, самое удивительное из мест брошенного завода «Красный Аксай» — типография.

Общий вид производственных помещений одно из крупнейших предприятий России в области разработки и производства почвообрабатывающей техники.

Всем привет.

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

Дизайнер-шрифтовик Иван Гладких, более известный как Джованни Лемонад (Jovanny Lemonad), сегодня объявил о выходе нового шрифта «Imperial», отличающегося одновременным употреблением квадратных, круглых и треугольных форм.

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


 

Специально для использования в Firefox OS организация Mozilla разработала новый шрифт Fira, который сейчас выложен в свободный доступ.

Fira отлично подходит для мобильных устройств с небольшим экраном.


Сравнение Meta Pro и Fira Mono (справа) в редакторе

Шрифт выпущен в нескольких вариантах: моноширинный Fira Mono и обычный Fira Sans. Для последнего созданы начертания разной жирности: Fira Sans Bold, Fira Sans Light, Fira Sans Medium и Fira Sans Regular, чтобы его было удобно применять в заголовках/подзаголовках/тексте в интерфейсе программ.

Согласно правилам типографики, контент страницы хорошо читается, если в строке от 45 до 75 символов. При разработке адаптивного дизайна это сложно реализовать только лишь с помощью Media Queries. Появился jQuery плагин FlowType, который помогает добиться такого соотношения при любом размере экрана и ширине окна.

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

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

Книга «Основы стиля в типографике» (The Elements of Typographic Style), которую стоит рекомендовать всем начинающим дизайнерам, начинается со слов:

Типографика существует, чтобы отдавать должное содержанию.

Если и можно уместить все знания о типографике в одну фразу, то это именно она. Контент может кричать или шептать. Так же и шрифты, могут быть «громкими» и «тихими». Буквы, и в частности глифы, их различия, позволяют придать тексту много оттенков.

Правильное сочетания букв позволяет максимально ярко передать настроение текста. А лучше всего это умеют делать дизайнеры логотипов!

Пожалуй, самый популярный логотип, который демонстрирует «владение буквами» — это логотип FedEx, разработанный Линдоном Лидером (Lindon Leader). На первый взгляд, это обычное применение Futura Bold. Однако если присмотреться, видно, как были изменены буквы «E» и «x», чтобы образовалась стрелка:

Смена операционной системы или устройства, если вы пишете на каком-нибудь не очень распространенном языке, например, башкирском — это всегда сложности. Поэтому, люди до сих пор сидят на Windows XP, с криво прописанными в реестре кастомными раскладками и столь же кривыми «башкирскими» шрифтами. Ведь хоть и криво, но работает. Много лет и я сидел на Windows и как-то даже не вспоминал о существовании проблемы, но пересев на Mac, обнаружил, что по умолчанию в OS X башкирской раскладки нет. Пошел искать кастомную в Интернете, где меня тоже ждало разочарование. Как же так, вроде столько лет прошло? В итоге, как это уже однажды было с Android, решил сделать все самостоятельно.

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

При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — Web Design is 95% Typography (автор Oliver Reichenstein).

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

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

…Чтобы упростить работу и ускорить выполнение задачи, я использовал достижения техники на всю катушку — сложные регулярные выражения, пакетная обработка файлов, предварительно настроенные на очистку текстов от мусора формы, плагины редакторов для форматирования кода — все пошло в дело. Но с каждым днем все более очевидным становилось, что мы делаем двойную работу — кто-то потратил массу времени, чтобы «намусроить» в тексте, а теперь я привожу его к первоначальному состоянию! Конечно, гораздо проще было бы изначально делать текст более чистым.

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

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

Привет, Хабр!

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

На прошлой неделе Instagram представил слегка переработанный логотип, внеся в оригинальный вариант едва заметные, но существенные изменения, пишет The Verge. Новый логотип был разработан Макки Сэтэдэем, типографом из Денвера и другом сооснователя Instagram Кевина Систрома.

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

Если вы когда либо задумывались, можно ли как то автоматизировать генерацию шрифтов для вэба или вам надоело заходить на Font Squirrel каждый раз, то, как говорится, добро пожаловать под кат.

Предупреждение: ничего не поделаешь, но кириллица во всех гарнитурах, рассматриваемых в статье (кроме Proxima Nova), отсутствует.

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

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

24 августа нынешнего (2012) года дизайнер-шрифтовик Михаил Череда из города Екатеринбурга выложил на сайте Behance свой шрифт Casper, разрешив скачивать его свободно — по лицензии SIL OFL 1.1.

С тех пор Casper минимум дважды упоминали на Хабрахабре ([1], [2]).

А вот на сайте Google Web Fonts его как не было, так и нет.

И это печально.

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

Словолитня exljbris, известная своим шрифтом Museo с необычною формою засечек на концах вертикальных линий, выпустила его вариант Museo Cyrillic с кириллицею и продаёт на Fontspring.

Бесплатно там раздаётся основное начертание, то есть прямое (не наклонное) и с жирностью 500 единиц (не особенно жирное). Вот скриншот его:



Производители, вероятно, имеют расчёт на то, что пользователи распробуют это начертание бесплатно, а затем начнут приобретение остальных начертаний (по 30 долларов за штуку) или закупят всё семейство (за 148 долларов).

Применение веб-шрифтов становится все популярнее: согласно HTTP Archive, за последний год число сайтов, использующих дополнительные шрифты, выросло вдвое — с 6 до 12%.

Слабым местом веб-шрифтов является производительность, однако ситуация постепенно меняется в лучшую сторону: появляются более совершенные методы сжатия, улучшается поддержка браузерами, unicode, отдельные наборы шрифтов и т.д.

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

Разработчикам фронтенда бывают нужны символы для быстрого прототипирования страниц. Вместо того, чтобы потратить время на поиск или отрисовку символа, его возможно найти в шрифте, например, Arial или Helvetica и создать временный элемент интерфейса. Иногда нужно посмотреть и использовать символы редкого языка, иероглифы. Многообразие символов уже имеется в некоторых шрифтах некоторых ОС, остаётся «лишь» выбрать. В программах и самой ОС есть средства просмотра и выбора символов любого шрифта системы (пример). Но не всегда эти средства удобны и не всегда предоставляют нужную информацию. Становится нужен хотя бы один онлайновый сервис, чтобы взять, и быстро (попытаться) найти подходящее. Раньше помогал поиск таблиц юникода в интернете, но удручал их вид, редкость и слабая оформленность. И тут недавно появляется сервис, в котором создатели решили исправить ряд досадных интерфейсных недостатков поиска.

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

• Windows XP: 133
• Windows Vista: 191
• Windows 7: 235
• Windows 8: 400 +

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