Проблема мелкого шрифта на высоких разрешениях и изображений, размытых браузерным масштабированием

24.09.2013

Экраны с высокими разрешениями сейчас есть у заметной доли пользователей интернета: 1920x1080 — около 7%. При этом физически диагональ не всегда большая, окно браузера же часто развернуто на весь экран. В этом случае шрифт на многих сайтах очень мелкий, читать практически невозможно.

Стало интересно, как с этим справляются пользователи. Проверил статистику четырех сайтов. Посмотрел показатель отказов для разных разрешений, и оказалось, что для 1920x1080 серьезных отклонений от среднего не наблюдается. Максимум, что попалось, 75% отказов против среднего 71%. Да и мало ли чем это может объясняться.

Разница в продолжительности просмотра обнаружилась только на одном сайте, зато составила целую минуту — две минуты против трех. Это уже может быть серьезным сигналом.

Но в целом видно, что люди научились справляться с мелким шрифтом. Как? Масштабированием на уровне браузера? Не верится, что все умеют. Прищуриваются? Уж больно мелко выглядит Arial 13px.

Недавно обратил внимание, что новые браузеры учитывают размер шрифта, заданный на уровне операционной системы. Но часто ли люди настраивают этот параметр?

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

Как вы решаете эту проблему? Минимум, можно увеличить базовый размер шрифта (например, перейти с Arial 13px на 14px).

И еще об одной проблеме: новые браузеры, учитывая размер шрифта в настройках операционной системы, по умолчанию масштабируют все изображения на сайтах. К сожалению, размытые картинки выглядят заметно хуже оригиналов. Вот, к примеру, плач пользователей Firefox. IE под Windows 8 тоже себя так ведет.

Есть идеи, как с этим бороться? Думаю, можно выводить на страницах изображения большего размера и ограничивать max-width. Но хотелось бы более простого и универсального решения.

Комментарии

xandeadx, 24.09.2013 22:08

подпишусь на комментарии.
у самого в браузере стоит дефолтный масштаб — 125%

Дмитрий Сергеев, 24.09.2013 22:56

Лично для себя масштабирование можно отключить. По крайней мере находил инструкцию для FF. Но не выход ведь.

xandeadx, 25.09.2013 07:17

мне так удобно :) иначе глаза устают

xandeadx, 24.09.2013 22:20

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

Дмитрий Сергеев, 24.09.2013 22:55

Хотя бы знать текущий уровень зума браузера.

Вот кстати нашел старый вопрос http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level... . Там есть ссылка на гитхаб, и видно, что проблема не решается просто и универсально.

Дмитрий Сергеев, 24.09.2013 23:11

80+% пользователей фейсбука не использует браузерный зум https://plus.google.com/+PaulIrish/posts/gg8xiDMcS2t

Княгиня, 25.09.2013 12:19

Со шрифтами есть вариант: адаптивный дизайн средствами css (в ие8 не раб, в ие10 не было возможности проверить). Соответственно, для мобильников и, наоборот, для больших экранов указывать больший размер.

А для картинок - даже и не знаю. С max-width надо работать аккуратно, чтобы картинки не оказались деформированы; кроме того, большие картинки весят больше (это, конечно, новость :) ), для мобильников плохо. Да, и ещё для ускорения загрузки желательно указывать размеры - это, опять же, создаёт сложности с управлением размером через css. В общем, думаю, что здесь нет общего решения, надо выкручиваться в каждом случае отдельно.

Артём Сапегин, 30.09.2013 11:48

У меня стоит увеличенный шрифт в браузере (Хром), но это не работает на большинстве сайтов. Если задать размер шрифта в пикселях, то он так и будет отображаться. Зато картинки не увеличиваются.

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

Артём Сапегин, 30.09.2013 11:50

Княгиня, для мобильников нужно, наоборот уменьшать: http://ia.net/blog/responsive-typography-the-basics/