Как печатной типографии пользуется плодами высоких DPI славой, гордостью показывая свои красивые изгибы и тонкости, его на экране коллегой остается душит громоздких пикселов, живущих в мире неровными краями, искаженные букв и поправили засечки.До появления на дисплее производители выпускают доступные 200 или 300 PPI мониторы, we’ придется полагаться на программное обеспечение для достижения исправить эти problems.

Войти анти-aliasing: следующая лучшая вещь в мире с более высоким разрешением мониторов.Концепция сглаживания довольно проста: добавить полупрозрачные пиксели по краям букв, чтобы сгладить внешний вид “ лестницы step” effect.

Тем не менее, многие факторы и технологии определения фактической эффективности процесса: намекая, субпиксельной рендеринга, возможности программного обеспечения и операционных характеристик системы, чтобы назвать несколько.Здесь, we’ будем смотреть на то, что Вы, как дизайнер может сделать, чтобы улучшить результаты сглаживания с Photoshop, Flash и CSS.Кроме того, we’ объясню ограничений аппаратных средств, браузеров и операционных systems.

Technologies

Aliased против Anti-Aliased

Требуется только беглого взгляда, чтобы понять, что сглаживание является чрезвычайно важным, чтобы сделать текст читаемым.За редкими исключениями, сглаженный текст может значительно уменьшить нагрузку на глаза, не говоря уже, что он делает глифы гораздо ближе к их предполагаемого дизайна.В связи с этим, Дизайнеры должны решить how, а не if сглаживание, должно быть used.Это решение основано на ряде факторов, которые надо учитывать в процессе от проектирования до delivery.

42pt “ Goudy Oldstyle Bold”: псевдонимы и сглаживанием versions

Шрифт Hinting

Большинство двигателей рендеринга текста полагаться на намекая, чтобы точно определить, какие области глифов должны быть сглажены. Шрифт намекая, или инструктаж, использует таблицы математических инструкций для выравнивания букв к пиксельной сетке, и определить, какие пиксели должны быть grayscaled.Хотя большинство программного обеспечения обеспечивает автоматическое намекая использованием стандартных алгоритмов, в идеале этот процесс будет сделано вручную по типу конструктора и встроенные в file.

Проще говоря, эти рабочие инструкции, изменяя положение структурно важные моменты, такие, как те, что вдоль сплайнов или у основания стебля, и приведения их в пиксель границы.Промежуточные точки, затем перемещаются в зависимости от их отношения к основной пунктов.Использование открытых источников редактор шрифтов, таких как FontForge, позволяет просматривать и редактировать font’ Sнамекая информации.Посмотрите, как много работы уходит на производство четкий символ, ваша оценка тип шрифта дизайнеры и инженеры, безусловно, increase.

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

Просмотр подсказки для Goudy Oldstyle’ S “ H” использованием FontForge.

Subpixel Rendering

Каждый пиксель на стандартный монитор состоит из трех компонентов: красного, зеленого и синего.Яркость каждого из этих суб-пикселей управляется независимо, и из-за их небольшого размера, наши глаза смешать три в один сплошной цвет пикселя.Типичные сглаживания множества четных значений для каждого из этих субпикселей, в результате полного оттенки серого пикселей. Subpixel рендеринга использует индивидуальность каждого отдельного компонента цвета и использует его для увеличения воспринимаемой разрешение monitor.Это позволяет пикселя, чтобы взять на визуальный вес от соседних пикселей, тем самым позволяя типа должны быть сглажены с меньшим шагом.Оказание типа таким образом, может производить тонкие изменения цвета видны по краям glyphs.

Subpixel оказания опирается на идеально ровные сетку пикселей, что делает ЖК-панелей единственным типом монитора, на котором эта техника работает постоянно.ЭЛТ-мониторы страдают от неточностей и странно распределение пикселей, что делает субпиксельной оказания чрезвычайно трудно снять.Даже ЖК-мониторы имеют различия в их расположением субпикселей, которые должны быть учтены, а некоторые мониторы расположены в порядке RGB, а другие приказал BGR.

Subpixel оказания тройки воспринимается разрешение путем установки каждого компонента цвета separately.

Subpixel оказания производит более желательным результатам, чем стандартные рендеринга, но принимает цвет fringes.

Input

Как дизайнеров и разработчиков, у нас есть ограниченный контроль над тем, как тип, в конечном счете видит конечный пользователь, но с помощью соответствующего метода доставки, мы можем обеспечить оптимизированное представление.Тем не менее, we’ будете выглядеть здесь, на три наиболее распространенных способа, в котором текст передается пользователю:HTML, изображения и SIFR.Каждый из этих методов имеет идеальное использование, что, при правильном применении, может значительно увеличить четкость и, таким образом, общее пользователь experience.

HTML Text

HTML-текст, несомненно, составляют большинство текст, найденный в Интернете.До недавнего времени дизайнеры не было абсолютно никакого контроля над сглаживанием с клиентскими технологиями.CSS 3 представляет две новые способы управления HTML текст поставляются: шрифт-гладкой and@font-face.

шрифт smooth Font-smooth позволяет управлять when сглаживания используется, но не how it’ S используется; сглаживание методом по-прежнему контролируется user’ среду с.Этот параметр не поддерживается широко, но все же может оказаться полезной, позволяя нам, чтобы включить сглаживание выключено при малых размерах точки — типа, где часто становится размытым.Это может стать вдвойне полезно, когда более сложные и не-браузера безопасных шрифтов, внедренных с новыми @ шрифт лицу rule.

@ шрифт face @ шрифт лицу rule это новая особенность CSS 3, которые дизайнеры ждали лет.Хотя we’ посетили возможность добавлять неясной шрифты в шрифт стеков течение достаточно долгого времени, большинство пользователей don’ т у высокого класса шрифтов на локальных машинах и в конечном итоге с типичной веб-безопасных шрифтов (например, Times New Romanзаменить Adobe Garamond Pro).Позволяя браузера, чтобы импортировать файл шрифта из URL, теперь мы можем служить пользователю любой шрифт we’ бы хотел, не полагаясь на свою библиотеку шрифтов.Это означает, что мы можем служить не только более уникальным шрифты, но также и те, которые лучше намекнул и более legible.

Несмотря на обещание эта функция выполняется, чтобы создать более красивый мир онлайн-типография, мы все еще можем видеть дизайнеры выбирают шрифты, такие как Verdana, которые были разработаны и намекнул, специально для просмотра на экране.Некоторые из наших любимых шрифтов из мира печати просто посмотреть bad при отображении на экране, особенно при небольших размерах текста.Конечно we’ увидите новые сегменты промышленности возникают в результате поддержки @ шрифт лицу, в том числе приток браузер намекнул шрифты доступны через услуги, такие как typekit.

Bickham Script Pro встроенный с помощью @ шрифт лицу и вынесли в Safari 4 и Firefox 3.Обратите внимание на OpenType Swash глифы и лигатуры поддерживается в Firefox 3 !

Текст как Image

Обслуживание текста в виде изображения может иметь ограниченное применение, но она позволяет точно настроить каждую букву, если это необходимо.Photoshop предоставляет пять заданных сглаживание параметров, которые определяют значения пикселей с использованием различных алгоритмов в сочетании с document’ сетку пикселей с.К сожалению, ни один из этих параметров позволяет субпиксельнойrendering, но с помощью опции Free Transform, чтобы подтолкнуть layer’ положение S, вы можете эффективно силе алгоритмы рендеринга в cleaner.Каждый параметр позволяет различное количество происхождение, а некоторые только производить изменения при переводе вдоль оси х.Ниже приведена таблица доступных transformations.

NoneAliased текст, созданный с использованием Ни одна установка, имеет очень ограниченное применение и обычно выглядит лучше всего между точкой размером 9 и 18.Размеры ниже этого диапазона приведет к идентифицированы символов и больших размеров приведет к увеличению веса характером и слишком неровными краями.В зависимости от шрифта, иногда двух различных размеров точки будет оказывать на той же высоте, что приводит к сдвигу в письме расстояние, ширину и х-height.Например, 14pt Arial оказывает 10 пикселей с высоким х высотой 8 пикселей.Arial на 13pts также сидит 10 пикселей в высоту, но имеет х высота всего 7 точек — небольшой, но очень воспринимаемой разницы.Когда плотно отслеживаются, этот параметр может также потребовать ручного кернинга, потому что некоторые буквы будут сидеть пикселя к пикселю друг против other.

13pt 14pt Arial и сделать с той же высоты шапки, но разных х-heights.

SharpSharp установка использует очень плотно облегающие сетки и производит резкие, если не слишком резкий, типа.Построение пикселей с этой установки очень похож на то, как участки установка Нет их, но допускает определенную степень сглаживания.В самом деле, если пиксели расположены друг над другом, вы можете видеть, что большинство твердых пикселей при переходе от Нет, чтобы Sharp.В то время как высота крышки и х высота правило, остаются теми же, вы можете увидеть прибавку в весе характер и ширину. Sharp имеет тенденцию к полностью вырезать тонкие изменения формы от рендеринга и иногда приводит к несовместимым letterforms, так что если шрифт целостность является важной для вас, вы можете попробовать различные setting.

CrispЧеткие параметр обеспечивает большую часть font’ первоначальный вес с кривизной, но и очищает некоторые из неловкой пикселей создан свет засечками и тонкими штрихами — что особенно полезно длябольших размеров точки.С четкой настройки, однако, вы пожертвовать возможностью, чтобы подтолкнуть слоя на у-axis.

StrongСильные настройка пресловутый для добавления ненужного веса шрифта, но он обеспечивает наибольшую свободу с переводом происхождения, с 32 оси х и 16 вариаций на оси ординат.Разнообразие происхождения с этого параметра может прийти в очень удобно при работе со сложными букв.Сильные также может быть полезно при работе с гарнитурой, которая имеет очень тонкий strokes.

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров