Anti-aliasing для текста в браузерах и в Photoshop

Иллюстрация к посту "Anti-aliasing для текста в браузерах и в Photoshop"

Часто, просматривая различные портфолио с макетами сайтов, замечаю, что не все дизайнеры понимают, когда при рисовании к тексту следует применять 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.

Выбор типа сглаживания в Photoshop

В работе эти методы выглядят примерно так (увеличение 300%):

Примеры методов сглаживания в Photoshop (увеличение 300%)

В нормальном размере (100%):

Примеры методов сглаживания в Photoshop (100%)

Теперь сравним как отличаются методы сглаживания реализованные в Photoshop от, например, сглаживания в браузере Mozilla Firefox 3. Скриншот из Anti-alias tester для шрифта Arial:

Сравнение сглаживания в Photoshop и Mozilla Firefox 3

Возможно разница на примере не очень заметна, но в реальных работах для разных шрифтов она существенна. На мой взгляд, наиболее похожи на пример из браузера методы Crisp и Smooth. Именно их я чаще всего использую в работе. Хотя на практике случаи могут быть разными.

В общем тестируйте, сравнивайте и используйте в своих макетах. Удачи в работе!

Новости блога

Установил в блоге плагин Nofollow Free, который убирает в ссылках комментариев атрибут nofollow (и еще про nofollow) для комментаторов с количеством сообщений больше пяти. Возможно это подтолкнет некоторых посетителей к обсуждению статей общению со мной в комментах. Спамеров и флудеров буду безжалостно банить и модерировать всеми доступными методами!

Сканер блогов:

Денис Судилковский заставляет дизайнеров думать о своей работе правильными мыслями. Начинающий вебмастер делится секретами успеха технологии RSS. Настя Манно пишет о тенденциях в веб-дизайне 2008. Ну а на blogowar'e, я не сдвинулся ни на одну позицию :(

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 12

  1. Octane, 23.06.2008 в 15:08

    >> Реализовано это с помощью градиентного пиксельного перехода от основного цвета (текста) до цвета фона.

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

    В скрипте можно еще добавить популярный сейчас «Consolas» и «Calibri».

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

    Ответить

  2. Николай Громов (nicothin), 23.06.2008 в 16:39

    Обычно использую сглаживание для заголовков (размер более 18, включительно), а контентный текст набираю без сглаживания вообще.

    конец статьи разочаровал — выводов нет, рекомендаций нет.

    Ответить

  3. rotor, 23.06.2008 в 17:01

    Octane

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

    Шрифты добавлю, спасибо.

    Николай Громов

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

    Ответить

  4. @ text-align: justify. Добро или зло? | rotorweb.ru | Проблемы и решения в Web-дизайне, 30.06.2008 в 13:49

    [...] приложению на JavaScript (помните, в прошлый раз мы тестировали anti-aliasing?), которое позволит нам проверить этот подход [...]

    Ответить

  5. Justef, 29.12.2008 в 16:57

    Привет! Гиганское тебе спасибо за этот скрипт — он меня буквально спасает! =)) ...Если не трудно, мог бы ты еще разделить шрифты на кириллические и латинские, просто мы дизайнеры работаем либо с теми либо с другими, учитывая, что стандартных шрифтов ограниченное количество.

    Ответить

  6. rotor, 29.12.2008 в 18:56

    Justef, без проблем, но это стандартные шрифты для OC, которые изначально идут в двух начертаниях (кириллица и латиница).

    Может просто добавить textarea, чтобы была возможность менять текст на свой (в том числе и на латинице)?

    Ответить

  7. Anton, 10.03.2009 в 13:06

    Большое спасибо автору за статью, а также за мега-скрипт!!

    Ответить

  8. п-п, 17.10.2009 в 16:59

    да, textarea для ввода своего текста очень зарешал бы

    Ответить

  9. @ Стандартные веб-шрифты: курсивы и наклоны | rotorweb.ru | Проблемы и решения в Web-дизайне, 07.01.2010 в 6:28

    [...] проблемным может быть рендеринг отображения шрифта (совсем не так, как это выглядит в Photoshop), то во втором, применяя Italic, мы можем получить [...]

    Ответить

  10. @ Стандартные веб-шрифты: курсивы и наклоны | white wind Стандартные веб-шрифты: курсивы и наклоны |, 09.06.2012 в 13:54

    [...] проблемным может быть рендеринг отображения шрифта (совсем не так, как это выглядит в Photoshop), то во втором, применяя Italic, мы можем получить [...]

    Ответить

  11. @ deepdrop, 30.10.2012 в 20:42

    Так а где все-таки скрипт?

    Ответить

  12. @ Стандартные веб-шрифты: курсивы и наклоны | Просто блог, 19.02.2014 в 11:28

    [...] проблемным может быть рендеринг отображения шрифта (совсем не так, как это выглядит в Photoshop), то во втором, применяя Italic, мы можем получить [...]

    Ответить

Есть что сказать?