Anti-aliasing для текста в браузерах и в Photoshop
Понедельник, 23 июня 2008
Часто, просматривая различные портфолио с макетами сайтов, замечаю, что не все дизайнеры понимают, когда при рисовании к тексту следует применять anti-aliasing, а когда лучше оставить его «как есть».
Вследствие такого подхода, после верстки, в браузере может получиться несколько иной результат, отличающийся от нарисованной версии (это особенно заметно на сайтах с минимумом графики и максимумом контента на страницах).
Да и некоторые клиенты начинают задавать нежелательные вопросы типа: «А почему вы поменяли нам шрифт на сайте? А вот в нарисованной версии был другой!»
Что же такое anti-aliasing и когда его следует применять? Попробуем разобраться.
Немного теории
Определенение с ru.wikipedia.org
Сглаживание (anti-aliasing) — технология, использующаяся в обработке изображений с целью сделать границы кривых линий более гладкими, убрав «зубцы», возникающие на краях объектов. Сглаживание было придумано в 1972 в Массачусетском технологическом институте в Architecture Machine Group, которая позже стала основной частью Media Lab.
Другими словами, в изображении, а в нашем случае — у текста в браузере, края будут слегка размыты, чтобы заставить глаза видеть более плавные переходы линий. Реализовано это с помощью градиентного пиксельного перехода от основного цвета (текста) до цвета фона.
Хочется отметить, что применение сглаживания к шрифту небольшого размера увеличивает нагрузку на глаза, и скорее затрудняет чтение, чем улучшает.
Как это выглядит в жизни
Специально для этой цели, написал небольшое приложение на JavaScript, запустив которое в нескольких браузерах, можно будет сделать для себя некоторые выводы.
Итак, тестируем отображение шрифтов в браузерах и применение к ним сглаживания.
Вот лишь несколько простых наблюдений на основе данного приложения:
- к большинству стандартных гарнитур (Arial, Tahoma, Verdana, Times New Roman, Georgia) сглаживание применяется начиная с размера в 17-18 px, причем насыщенность начинает значительно отличаться от предыдущей;
- к шрифту Courier New в обычных начертании и насыщенности сглаживание не применяется вообще;
- текст меньше 9 px является нечитаемым;
- в Opera не устанавливается размер шрифта меньше 9 px;
Уверен, что можно найти еще много особенностей между различными гарнитурами и их отображением, если проявить немного наблюдательности и терпения :) Теперь подобрав размеры шрифтов для заголовков и основного текста на страницах, вы сможете легко узнать, как на самом деле их будет видеть пользователь.
Разбираемся с Photoshop
Photoshop предлагает нам на выбор несколько вариантов anti-aliasing'а: Sharp, Crisp, Strong, Smooth.
В работе эти методы выглядят примерно так (увеличение 300%):
В нормальном размере (100%):
Теперь сравним как отличаются методы сглаживания реализованные в Photoshop от, например, сглаживания в браузере Mozilla Firefox 3. Скриншот из Anti-alias tester для шрифта Arial:
Возможно разница на примере не очень заметна, но в реальных работах для разных шрифтов она существенна. На мой взгляд, наиболее похожи на пример из браузера методы Crisp и Smooth. Именно их я чаще всего использую в работе. Хотя на практике случаи могут быть разными.
В общем тестируйте, сравнивайте и используйте в своих макетах. Удачи в работе!
Новости блога
Установил в блоге плагин Nofollow Free, который убирает в ссылках комментариев атрибут nofollow (и еще про nofollow) для комментаторов с количеством сообщений больше пяти. Возможно это подтолкнет некоторых посетителей к обсуждению статей общению со мной в комментах. Спамеров и флудеров буду безжалостно банить и модерировать всеми доступными методами!
Сканер блогов:
Денис Судилковский заставляет дизайнеров думать о своей работе правильными мыслями. Начинающий вебмастер делится секретами успеха технологии RSS. Настя Манно пишет о тенденциях в веб-дизайне 2008. Ну а на blogowar'e, я не сдвинулся ни на одну позицию :(
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: Anti-aliasing для текста в браузерах и в Photoshop
- добавьте статью в закладки:
* * *
>> Реализовано это с помощью градиентного пиксельного перехода от основного цвета (текста) до цвета фона.
Градиенты это немного другое. При антиалиасинге рассчитывается процентное отношение между границей и фоном, еще это называют субпиксельным сглаживанием, т. е. разбиваем пиксел на более мелкие части (субпиксели) и считаем какой процент площади этого пикселя должна была занимать граница и так же для фона, исходя из этого процентного соотношения выбирается цвет пикселя.
В скрипте можно еще добавить популярный сейчас «Consolas» и «Calibri».
Да сглаживание шрифтов действительно проблема, не раз сталкивался с ситуацией, когда у заказчика вообще выключено сглаживание шрифтов, потому что ему не нравится стандартное оформление WinXP и он в настройках производительности выбрал «Максимальное быстродействие», а вернуть после этого сглаживание шрифтов не догадался... и начинаются претензии, почему на картинке текст красивый, а в браузере все коряво :-/
Обычно использую сглаживание для заголовков (размер более 18, включительно), а контентный текст набираю без сглаживания вообще.
конец статьи разочаровал — выводов нет, рекомендаций нет.
Octane
Я сначала и хотел написать, что к граничным пикселям шрифта применяются различные уровни прозрачности, за счет чего линии и становятся более «гладкими». Но решил, что не все читатели поймут о чем речь, а слово «градиент» будет более знакомо.
Шрифты добавлю, спасибо.
Николай Громов
Я бы написал рекомендации, но здесь такая ситуация, что лучше один раз разобраться самому и запомнить для себя результат. Для себя я определился, но утверждать, что это единственно верный вариант не могу.
[...] приложению на JavaScript (помните, в прошлый раз мы тестировали anti-aliasing?), которое позволит нам проверить этот подход [...]
Привет! Гиганское тебе спасибо за этот скрипт — он меня буквально спасает! =)) ...Если не трудно, мог бы ты еще разделить шрифты на кириллические и латинские, просто мы дизайнеры работаем либо с теми либо с другими, учитывая, что стандартных шрифтов ограниченное количество.
Justef, без проблем, но это стандартные шрифты для OC, которые изначально идут в двух начертаниях (кириллица и латиница).
Может просто добавить textarea, чтобы была возможность менять текст на свой (в том числе и на латинице)?
Большое спасибо автору за статью, а также за мега-скрипт!!
да, textarea для ввода своего текста очень зарешал бы
[...] проблемным может быть рендеринг отображения шрифта (совсем не так, как это выглядит в Photoshop), то во втором, применяя Italic, мы можем получить [...]