Как спроектировать веб-сайты с использованием тонких шрифтов, которые будут хорошо выглядеть в веб-браузере?

В последнее время я довольно часто сталкиваюсь с одной и той же проблемой - шрифты в фотошопе даже близко не выглядят со шрифтами, встроенными на веб-сайты.

Очевидно - речь в основном о внешних, сторонних шрифтах, потому что для Helvetica, Arial и т.д. я получаю неплохие результаты. Наиболее проблематичными являются тонкие и высокие шрифты, хотя эта проблема возникает и с обычными шрифтами, если они используются размером менее 16 пикселей (не знаю, почему так часто появляется волшебная рамка на 16 пикселей, с тех пор, как все начинает отлично выглядеть везде).

Здесь у нас есть пример шрифта SkarpaLT размером 14px #000000 — слева вы можете видеть, как он встроен @font-faceв веб-сайт, как он отображается в Firefox в Windows 7. Справа вы можете видеть точно такой же шрифт в точно таком же цвет и размер, как они появляются в фотошопе с использованием различных настроек сглаживания:

пример разбивки - Firefox против Photoshop

Как видите - разница весьма гигантская. В Фаерфоксе:

  • Весь шрифт намного толще, вроде в фотошопе лайт версия, а в фаерфоксе обычный
  • Сглаживание очень странное, на одних буквах (например. О) его почти нет, на других нормально
  • А странно короткая по сравнению с другими буквами
  • О не круглый

Как видите - я пробовал возиться с настройками фотошопа, но пока мне так и не удалось вытянуть результаты, близкие к файрфоксу. Я также предпринял несколько попыток изменить текст в Firefox, чтобы он выглядел ближе к тому, что отображает Photoshop, но ничего не добился.

Поэтому вопрос из двух частей:

  • Есть ли способ, которым дизайнер может предсказать, когда шрифт не будет хорошо себя вести в веб-браузере, даже если он выглядит нормально в FireFox?
  • Как сделать шрифты в фотошопе ближе к веб-браузеру или заставить веб-браузер отображать шрифты ближе к фотошопу?

Короче говоря: как создать веб-сайт с использованием нетрадиционных тонких шрифтов, которые будут хорошо смотреться в веб-браузере?

[edit:] Основные моменты решения: кажется, что единственным хорошим решением является перетаскивание шрифтов , которое позволяет тестировать шрифты в веб-браузере, чтобы действительно увидеть, не создают ли они каких-либо странных артефактов. Ничего особенного, кроме этого, сделать нельзя.

На некоторых рисунках этот экшен можно использовать для создания субпиксельного сглаживания в Photoshop. Это сделает шрифты более четкими и похожими на то, что вы получаете в браузере. Единственная проблема заключается в том, что он создает 3 текстовых слоя, поэтому его необходимо применять после завершения редактирования всего текста.

Fog Creek Software написала хороший пост об иконках на основе шрифтов, которые они используют. Он охватывает @font-face и отображение шрифтов. Вам может быть полезно прочитать blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you
и... как именно помогает информация о встраивании шрифтов? ... Без обид, но я умею вставлять шрифты на сайт. Я также хорошо знаю, что вы можете создавать шрифты с идеальной точностью до пикселя, хотя этот, очевидно, не тот случай — попробуйте использовать его с размером 14. Он ломается. Везде. Как и мой пример.
Марчин - никто не занят. Я, конечно, не предполагал, что вы ничего не знаете о встраивании шрифтов. Я подумал, что часть поста, посвященная форматам шрифтов и методам Fog Creek для исправления несоответствий отображения в операционных системах и браузерах, может быть полезной.

Ответы (3)

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

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

Для тонких шрифтов необходимо учитывать фактический размер в пикселях самых тонких штрихов шрифта заданного размера. Вы также должны учитывать, как этот шрифт был построен. Если приличный хинтинг не включен ниже определенного размера, пиксели, попадающие в контур, будут непредсказуемыми. Могут быть даже дикие различия между двумя очень близкими размерами. Photoshop отлично справится с догадками по всем направлениям; Internet Explorer не будет.

« Суть в том, что вам нужно протестировать веб-шрифты в нескольких браузерах на нескольких системах как можно раньше в процессе проектирования » — есть идеи, как дизайнер, не разбирающийся в HTML или CSS, может это сделать? Потому что оттуда я беру дизайны >_>
Дизайнер должен координировать свои действия с командой разработчиков пользовательского интерфейса на самых ранних этапах. Требования/ограничения разработки не должны ограничивать концепции, но они имеют решающее значение для проработки деталей.
Да, я это прекрасно знаю, и именно так я предпочитаю работать, но вся проблема заключалась в том, что конструкторы находятся в нескольких сотнях миль от нас и вряд ли они смогут координировать разработку на всем пути вместе с Команда разработчиков. Особенно, когда у команды разработчиков есть свои задачи. Я знаю, что можно создать инструмент, который позволил бы имитировать поведение шрифтов в веб-браузере, чтобы на самом деле предсказывать, будет ли шрифт вести себя хорошо или нет, но мне интересно, кто-то еще не сделал что-то подобное?
@MarcinWolny Звучит как достойный отдельный вопрос, который стоит задать. Одно быстрое предложение, о котором я слышал, но не пробовал — fontdragr.com может сработать, поскольку у дизайнера должны быть файлы для любого шрифта, чтобы сделать подделку.
@ user568458 - выглядит великолепно! Это идеально. Должно быть более чем хорошо и достаточно просто для дизайнера, чтобы протестировать шрифты. Ваше здоровье!
Очень классная идея. Однако не уверен, как это решит вопрос для размещенных шрифтов. Это большинство веб-шрифтов, используемых сегодня. Вы не хотели бы тестировать настольный шрифт, в котором будет использоваться размещенный веб-шрифт, поскольку хинтинг будет другим.
@plainclothes обычно веб-шрифты уже оптимизированы для браузеров (отсюда и название: WEBfonts), поэтому вы очень редко сталкиваетесь с какими-либо проблемами с ними. Особенно, если вы используете для них какого-то серьезного провайдера, а не просто случайные вещи, найденные на случайном сайте ;). Проблемы возникают с настольными шрифтами, так как это большинство действительно хороших шрифтов, используемых в настоящее время.
@MarcinWolny Я соглашусь с тем, что с каждым днем ​​таких проблем становится меньше. К сожалению, все еще существуют веб-шрифты от профессиональных фирм, которые плохо оптимизированы для использования в Windows/IE. Недавно я видел шрифты (с лицензией на тысячи долларов!), которые ужасно отображались не менее чем в половине наиболее распространенных размеров. Потребовалась большая работа с литейным цехом, чтобы решить эту проблему.

Здесь есть несколько вопросов.

  1. SkarpaLT, по-видимому, разработан как циферблат. Большинство тонких букв предназначены для этого... плакаты, заголовки и т. д. - в основном там, где вы использовали бы их большими. Они не предназначены для использования в качестве небольших текстовых лиц.

  2. Большинство экранов по-прежнему имеют довольно низкое разрешение. Чем меньше шрифт, тем сложнее отобразить его чисто на пиксельном дисплее.

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

Итак, чтобы ответить на ваш вопрос о том, «как»: не надо. Не вставляйте тонкие шрифты на веб-страницы и не используйте их в качестве начертаний текста. Это просто не будет работать очень хорошо.

По вашим конкретным вопросам:

Есть ли способ, которым дизайнер может предсказать, когда шрифт не будет хорошо себя вести в веб-браузере, даже если он выглядит нормально в FireFox?

Нет. Вы находитесь во власти настроек и программного обеспечения, которое вы не можете контролировать (оно находится под контролем конечного пользователя).

Как сделать шрифты в фотошопе ближе к веб-браузеру или заставить веб-браузер отображать шрифты ближе к фотошопу?

Вы не можете. Они используют совершенно разные методы растеризации шрифта.

1. Я не пытаюсь использовать его для простого текста, а как заголовки/пункты меню. И они не всегда имеют размер 24+ # 2. Да, но дело не столько в красивом отображении шрифта, сколько в том, чтобы сделать его похожим для обоих инструментов. Или предсказание артефактов. # 3. Да, я знаю, например. Win 98 или MacOs используют другую механику сглаживания (или не используют ее вообще), но я нацелен на наиболее распространенную платформу — Win7+FF.
@MarcinWolny в вашем вопросе вы показываете тип 14px. Это слишком мало для дисплея, особенно на экране.
упс, извините - см. отредактированный комментарий (нажал [ввод] случайно)
@MarcinWolny Я также добавил немного больше к своему ответу. Суть в том, что на данный момент решения для этого просто нет. При использовании веб-шрифтов вы должны принять определенную степень вариативности. Даже ориентируясь на одну очень конкретную платформу (Win7 + FF), вы все равно зависите от настроек и предпочтений конечного пользователя.
Суть в том, что таргетинг на одну конкретную платформу в основном сводит разнообразие к минимуму. 99% людей, использующих FF с Win7, получат то же, что и я. Просто потому, что очень мало людей когда-либо касались каких-либо пользовательских настроек, связанных с отрисовкой шрифта в браузере. Поэтому я бы предположил, что то, к чему я стремлюсь, это то, что у меня есть на моем ПК (что довольно точно, поскольку он также идеально подходит для моего ноутбука, и я обычно показываю веб-сайт клиенту на нем во время встреч, поэтому звучит как идеальный план).
К тому же - не будем перебарщивать с этими различиями. Единственными реальными отличиями, которые действительно имеют значение, являются шрифты без псевдонимов и рендеринг, похожий на Safari, рядом с этим из Firefox. IE стал немного лучше AA, но все еще в пределах погрешности зрения, так что это не имеет значения, Chrome обычно использует рендеринг, похожий на Safari, и пользователи Chrome больше привыкли видеть странно уродливые шрифты, чем другие;) поэтому я тоже пропускаю это . Отсюда и самая распространенная клиентская платформа в FF с дефолтными настройками Win. +небольшой запас погрешности, но это скорее что-то среднее между резким и сильным рендерингом в PS.
просто будьте осторожны, делая слишком много предположений о нацеливании на одну платформу. Сеть очень важна для изменчивости.
Да, это так, но наведение на одну цель облегчает ее достижение, чтобы потом можно было подумать о прикрытии дополнительных целей. Поэтому я делаю сайты в 1 браузере и одной 1 ОС, потом проверяю и исправляю на других операционках и других браузерах. Полное покрытие всех баз — не что иное, как пустая трата времени.

Если вы гибко подходите к выбору шрифта, вы можете попробовать веб-шрифты Google; Я использовал их на нескольких веб-сайтах без проблем. Некоторые шрифты предлагаются разной толщины, вы можете легко настроить ее одним дополнительным словом в коде.

Как спроектировать веб-сайты с использованием тонких шрифтов, которые будут хорошо выглядеть в веб-браузере?
СпросиСетьПолитика конфиденциальности1y, 0v