Рубрика «типографика» - 14

в 6:26, , рубрики: adobe, freetype, Google, open source, патенты, типографика, шрифты, метки: , , , ,

image Проект FreeType — это библиотека, которая используется для растеризации шрифтов и операций над ними. В частности используется для отображения шрифтов в X11.

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

Дальше — больше. В конце 2012 был объявлен сбор денег на развитие проекта. А в июне 2013 фандрайзинговая кампания успешно завершилась, принеся проекту 20 тысяч долларов. Тем временем компании Adobe (которая раньше мешала техническому прогрессу своими патентами!) и Google совместно внесли ряд улучшений, которые, в частности, значительно улучшили работу приснопамятного хинтинга на всех поддерживаемых проектом платформах. Вместе с рядом других улучшений это привело к выпуску новой версии — FreeType 2.5.

Читать полностью »

в 3:17, , рубрики: адаптивный дизайн, веб-дизайн, Веб-разработка, типографика, метки: ,

image

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

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

в 12:29, , рубрики: веб-дизайн, дизайн, Дизайн в IT, логотипы, типографика

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

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

Типографика существует в честь контента.

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

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

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

в 13:23, , рубрики: mac os x, Блог компании ADV/web-engineering co., клавиатура apple, локализация, раскладка, раскладка клавиатуры, типографика, метки: , , , ,

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

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

image

Читать полностью »

в 10:27, , рубрики: адаптивный дизайн, веб-дизайн, Веб-разработка, Мобильный веб, типографика, метки: , , ,

Мобильная типографика

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

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

в 8:29, , рубрики: оформление текста, типографика, метки:

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

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

в 8:45, , рубрики: Блог компании UIDG, переводы, типографика

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

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

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

Читать полностью »

в 9:51, , рубрики: Font Awesome, font-face, icons, Иконосказ, рубль, символьные шрифты, типографика, метки: , , , ,

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

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

в 10:42, , рубрики: ClearType, DirectWrite, font-face, truetype, web-дизайн, woff, Блог компании ADV/web-engineering co., веб-дизайн, веб-шрифты, лицензии, лицензия, свободные шрифты, типографика, метки: , , , , , , , , , , ,

20 вопросов про веб шрифты
Привет!

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

Читать полностью »

в 16:17, , рубрики: css, data:uri, html, типографика, метки: , , ,

Задача

ВОШ — эффект, возникающий при стилизации текста подключаемым шрифтом, не установленным на компьютере пользователя. Проявляется, когда подключаемый шрифт ещё не успел скачаться, и стилизуемый текст отображается следующим шрифтом из значения свойства font-family этого элемента. Такое переключение шрифтов также может повлиять на размеры элемента, если они зависят от размеров текста в нём.
Эффект известен также как FOUT — так его назвал Пол Айриш.

При общих моментах, есть и особенности. Например, в Файрфоксе текст, который нужно будет отрисовать нестандартным шрифтом, в течение 3 секунд не отображается, в Хроме тоже есть подобная задержка. Если шрифт успеет скачаться за это время, текст отобразится сразу нужным шрифтом.

На эту тему здесь была такая статья. В ней последствия ВОШ рекомендовалось нивелировать грамотной игрой со шрифтами. К сожалению, иногда подключаются такие шрифты, которые слишком отличаются по характеристикам от стандартных.
Читать полностью »

1...10...131415...20...21
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js