Евгений Тартаковский
23 июня 2010

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



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

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

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

P. S.

Я веду практический курс «Пользовательский интерфейс и представление информации». Дата следующего курса пока неизвестна.

 
Мы напишем вам, когда будет открыта запись. Без спама.

Поделиться

Комментарии

Алексей Грицук
23 июня 2010

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

Алексей Егоров
23 июня 2010

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

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

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

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

Дмитрий Зелинский
23 июня 2010

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

Александр Дебкалюк
24 июня 2010

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

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

Андрей Петров
24 июня 2010

Когда-то Фаерворкс умел отображать текст с системным сглаживанием: 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

Евгений Тартаковский
25 июня 2010

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

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

Вячеслав Мацнев
14 июля 2010

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

Александр Дебкалюк
14 декабря 2010

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

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

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

Пётр Егоров
14 декабря 2010

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.





Недавно всплыло

Расскажите об управляемости: программа 1 2 1 4