Школа
Интерфейс

В Фотошопе шрифты выглядят иначе чем в браузере

Добрый день! При разработке макета сайта в Фотошопе шрифты выглядят иначе, чем в браузере, как при включённом, так и при выключенном антиалиасинге. Подскажите, пожалуйста, как добиться наибольшего сходства, и как обстоят дела с рендерингом шрифтов в Индизайне?

Евгений Тартаковский
22 июня 2010
👁 3709   🗩9
Интерфейс

В Фотошопе шрифты выглядят иначе чем в браузере

Добрый день! При разработке макета сайта в Фотошопе шрифты выглядят иначе, чем в браузере, как при включённом, так и при выключенном антиалиасинге. Подскажите, пожалуйста, как добиться наибольшего сходства, и как обстоят дела с рендерингом шрифтов в Индизайне?

Евгений Тартаковский
22 июня 2010
👁 3709   🗩9
Илья Бирман
Арт‑директор и соавтор курса «Пользовательский интерфейс и представление информации»
Полезно
  
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Евгений, это не имеет большого значения.

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

Если вы делаете макет в Фотошопе, полезно бывает выставить режим сглаживания «шарп». Индизайн, по моим наблюдениям, рендерит шрифты очень близко к этому (ну, может быть, немного светлее). Шрифт выглядит немного грязноватым, заставляя нас не забывать увеличивать интерлиньяж, да и вообще делать более лёгкие текстовые конструкции. В результате в браузере всё выглядит отлично.

ИнструментыСглаживание шрифтов
Полезно
  
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

На то он и макет, а не веб‑страница, чтобы выглядеть «иначе». Он проходит несколько итераций: от словесного описания и блок‑схемы до реальной сверстанной ХТМЛ‑страницы. Если говорить про Фотошоп, то можно было бы сделать имитацию растеризации под стандартные браузеры и ОС, ведь алгоритмы не секрет.

Заставлять Фотошоп рендерить «как браузер» — гиблое дело.

Во‑первых, как правильно сказал Илья, у каждого браузера свои методы рендеринга, вплоть до философии. И всё бы ничего. Как предложил Алексей Грицук, можно было бы добавить набор методов рендеринга текста, «как в популярных браузерах». Но…

Во‑вторых, вступает в игру субпиксельный рендеринг, который сильно зависит от устройства вывода (дисплея). Т. е. воспроизвести его правильно можно только в динамической системе (открыть файл в Фотошопе, например, чтобы он отрендерил правильно под текущий дисплей). А в статике — нельзя (на растровой картинке останется застывший образ с одного дисплея, совсем не обязательно подходящий для другого).

Если не встречалось, то можно посмотреть:
http://habrahabr.ru/blogs/browsers/69442/ — про разные подходы;
http://habrahabr.ru/blogs/typography/44657/ — про дизайнера и заказчика (в ракурсе темы, конечно).

Можно тестировать отображение шрифтов в онлайн‑сервисах, www.typetester.org, например.

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

Чтобы не подбирать потом более удачный шрифт, нужно тестировать в процессе дизайна.

Когда‑то Фаерворкс умел отображать текст с системным сглаживанием: System для Виндоуса и Quartz для Макинтоша. Начиная с версии ЦС4 этой весьма полезной функции нет, и не известно появится ли она опять.
http://www.projectseven.com/…/testing/fwcs4/font‑smoothing

Нашёл, что в Фаерворксе ЦС4 можно использовать специально созданные стили для имитации, но они есть только для чёрного текста на белом или сером фоне и для белого текста на чёрном или сером фоне:
http://www.idux.com/…/11/26/simulate‑cleartype‑text‑in‑adobe‑fireworks‑cs4 (http://www.idux.com/…‑text‑in‑adobe‑fireworks‑cs4)

Спасибо за оперативность. Однако жаль.

Потому что при создании макета новостного ресурса текста очень много, и то, как показывает его Фотошоп, по‑настоящему пугает. Что касается сглаживания «шарп» — мелкий шрифт (10‑12 п) становится тяжёлым. Кстати, в Иллюстраторе попробовал накладывать эффект растеризации, и получается нечто похожее на изображение в браузере, только без клиартайпа.

Если очень нужно, чтобы текст был как в браузере, разумно сверстать текст в ХТМЛ, сделать скриншот и подложить его отдельным слоем в Фотошопе.

60% посетителей нашего сайта не используют сглаживание шрифта. Потому мы с дизайнеров требуем макеты без сглаживания.

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

Важно знать аудиторию.

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

Если это вас пугает, используйте крисп.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы