Всем доброе утро! Работая над дизайном блога, и подправляя верстку, я заметил что атрибут font-size может быть задан четырьмя способами. Я и до этого не без труда справлялся с настройкой , а тут все стало совсем плохо. О том какой вариант значений выбрать и зачем они вообще нужно такое разнообразие и поведает данный пост.
Какая из этих четырех единиц лучше всего подходит для веб? Вопрос это не простой и поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.
Единицы измерений
1. «Ems» (em): «em» — это масштабируемая единица измерения, которая используется в веб-документах. «em» равна текущему размеру шрифта (установленному в настройках), например, если font-size в документе 14pt, то 1em равен 14pt. Единица «em» масштабируема по своей природе, так 2em будет равен 28pt, 0.5em будет равна 7pt и т.д. Использование «em» очень популярно из-за масштабируемости и возможности применять в мобильных устройствах.
2. Pixels (px): «px» — это единица которая имеет фиксированный размер, используются на экранах. Один пиксель равен одной точки на экране. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб текста. Проблема в том что, к примеру, 18px на экране iPhone — совсем не читаемо, в то время как на ноутбуке очень даже подходящий размер.
3. Points (pt): «pt» — это единица используются в печатных СМИ. Один «pt» равен 1 / 72 дюйма. «pt», все так же, как и «px», не могут масштабироваться из-за того, что имеют фиксированный размер единицы и.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя.
В чем же разница?
Очень просто понять разницу между единицами, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. Давайте посмотрим, что произойдет, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.
Как вы можете видеть, «em» и «%» увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и «%» предпочтительнее в использовании для текста веб-документа.
«em» против «%»
Уже есно что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.
В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c «%» на «em» (то есть body {font-size: 1em;}), вы, должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда пользователь меняет «Размер шрифта» в настройках своего браузера.
Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем «%», а при установке «Largest» наоборот «em» отображается гораздо большим, чем «%». И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется довольно резко.
Итоги
В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в «%» позволяют отображать текст для пользователей более последовательно и читабельно. При смене параметров пользователя, текст в «%» изменялся в разумных пропорциях, что позволяет сохранить читаемость контента, доступность, и дизайн.