Работа от SitePoint / Наталья Бальская
Представьте, что у вас проблемы со зрением или у вас проблемы с чтением. В браузер встроена настройка размера шрифта, поэтому вы увеличиваете размер шрифта по умолчанию и начинаете просмотр. Как ни странно, текст на большинстве сайтов все еще кажется маленьким, поэтому вы возвращаетесь к настройкам браузера и увеличиваете размер шрифта до огромного. Вы возвращаетесь на сайт, на котором вы были, и … ничего. Настройка не влияет.
За последние несколько лет мы научились использовать и постепенно принимали относительные единицы для типографского контента. Вместо использования пикселей для таких свойств, как font-sizeremem
Многие разработчики по-прежнему устанавливают «начальный» font-sizehtmlbodypx Если вы не полностью понимаете (и цените) относительные единицы, это может быть удобно для вас, поскольку все emrem
/* A body containing a font-size with absolute value */
body { font-size: 14px; }
/* The h1 will be 2em relative to 14px */
h1 { font-size: 2em; }
К сожалению, это начальное значение не удобно для некоторых пользователей. Вы видите, что настройка браузера, о которой я упоминал ранее, устанавливает только базовый размер шрифта. Каждая используемая вами абсолютная единица измерения ( pxptinch
/* Fictional browser setting */
html { font-size: 18px; }
/* The absolute unit in the body overwrites the browser setting */
body { font-size: 14px; }
В результате пользователи, которые изменяют настройку размера шрифта в браузере, все равно будут видеть текст в 14px
Многие сайты, даже громкие, виновны в этом грехе:
Разница между масштабированием и размером шрифта
Я получаю один из аргументов: «Масштабирование работает, разве это не одно и то же?»
Практически во всех браузерах есть возможность увеличения, которая увеличивает всю страницу. Технически это увеличивает каждую единицу, кроме процентов. Это отлично подходит для слабовидящих, как пользователей, страдающих остротой зрения (четкость). Большую часть остроты зрения можно исправить с помощью очков, но во многих случаях это невозможно.
Однако изменение размера шрифта в браузере изменяет исключительно базовый размер шрифта. Некоторые люди имеют идеальное зрение, но имеют расстройства чтения, такие как дислексия. Фактически, 3-7% населения страдают от дислексии, но до 20% могут испытывать ее симптомы. Увеличение размера шрифта может уменьшить серьезность симптомов. Почему они должны увеличивать страницу, когда они имеют возможность изменять только размер шрифта?
Правильный путь
Абсолютные единицы — плохие парни здесь. Если мы используем относительные единицы, такие как %em По умолчанию 1em16px Итак, если вы действительно хотите использовать размер шрифта не по умолчанию, вы можете установить font-size.875em87.5%14px
/*
These are equivalent:
- font-size: 100%;
- font-size: 1em;
- absent font-size property
*/
body { font-size: 1em; }
/* If the users changes the browser setting, both the body text and h1 text will scale accordingly */
h1 { font-size: 2em; }
Сайты делают все правильно:
Вывод
Абсолютные единицы для типографских свойств — распространенная практика в отрасли. Вероятно, потому что это явно, тогда как относительные единицы требуют некоторого рытья, чтобы выяснить, почему глубоко вложенный элемент может иметь другой вычисленный font-size
Проблема в том, что это серьезный недостаток доступности. Чтобы сделать Интернет идеальным для людей с нарушениями зрения или с нарушениями чтения, мы должны использовать относительные единицы.