Это перевод статьи rems and ems, and why you probably don’t need them David Gilbertson.

Наверняка вам приходилось слышать, что для задания размеров текста и блоков на вашем сайте вы должны использовать em или rem единицы, а не эти старомодные пикселы.

Еще, верояно, вы слышали слова “доступное”, “гибкое” и думали, что это звучит довольно не плохо. Возможно, вы даже думаете, что использование пикселей это любительский ход.

Ну, у меня есть для вас отличные новости. Вам не нужно портить свою жизнь с этими надоедливыми единицами.

Пиксели это не плохо. На самом деле, пиксели действительно хороши для определения размера.

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

#1 Это лучше для доступности

Или более конкретно: «используйте rem, и ваш макет будет лучше масштабироваться, если пользователь изменяет масштаб на устройстве».

Люди склонны думать о доступности. На днях я видел вопрос (комментарий на YouTube) - кто-то ищет инструмент для тестирования доступности. Что-то «более тщательное», чем просто факт соответствия WCAG.

У меня есть решение:

А если у вас есть 30” монитор, то вы обладаете абсолютно универсальной моделью для тестирования.

Моя точка зрения: вам не нужны глубокие знания и причудливые инструменты для разработки, если rem и em «лучше для доступности» - просто представьте, что вы с плохим зрением. Если у вас ужасное воображение, оберните экран в пленку. Конечно, доступность это не только читаемость, но аспект читаемости - это то, о чем мы говорим сейчас.

А теперь спросите своего незрячего “я”, какую из этих трех вещей вы бы сделали, чтобы сделать ваш компьютер “более читаемым”:

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

2. Будете зумить веб-сайты с мелким текстом;

3. Измените стандартный или минимальный размер шрифта в настройках вашего браузера. (Подсказка: это будет работать на Википедии, но не будет работать на medium.com, не будет работать на Facebook, не будет работать в Twitter, не будет работать на Amazon, не будет работать на eBay … это подсказка).

Я не знаю как вы, но если бы у меня были проблемы при чтении мелкого текста, я бы увеличил размер шрифта по умолчанию для ОС и забыл об этом.

Давайте копнем глубже.

Для исследования я набросал простой демонстрационный сайт. Три секции, которые вы можете видеть, повторяют один и тот же HTML и CSS, за исключением того, что все единицы в верхней части являются пикселями, средний - все em, а нижний - все rem.

Вот как они все выглядят при масштабе по умолчанию (когда 1em = 16px).

А вот как выглядит в Chrome под Windows с системным увеличением шрифтов до 150%.

А теперь я выставлю системное увеличение шрифтов в 100% и увеличу зум браузера.
Это для сайта, который считает размер шрифта 12px для основного текста навигации приемлемым (ведь так больше помещается в экран!). Не будем показывать пальцем…
Но, это Amazon с 13px размером шрифта для для всего текста и 12px для навигационной панели. Нехорошо!

К счастью, производители браузеров не разделяют презрения Amazon к пожилым людям и позволяют увеличить zoom при помощи комбинации клавиш и колесика мышки.

У меня орлиное зрение, но даже я масштабирую некоторые сайты. Я даже масштабирую Chrome DevTools, ведь у него 12px шрифт по умолчанию.

(Примечание: если вдруг для вас размер шрифта Википедии маловат, или вам не нравится как мелкий текст растягивается по всей ширине страницы, в 2013 году я написал Skinny – расширение для Chrome, которое ограничивает по ширине текст и делает его крупнее)

Вернемся к проблеме. Давайте посмотрим на примеры, когда браузер увеличивает масштаб на 150%.

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

И, наконец, давайте рассмотрим вариант смены резмера шрифта браузера по умолчанию. Начнем с Firefox (без zoom):

А теперь выставим минимальный размер шрифта в 20px:

Полоска навигации в примере с px стала немного уже и текст заголовка увеличился незначительно.

А теперь выставим в Chrome размера текста в “Большой”.

Ага! Вот тут мы видим сущесвтенное различие. Загловок, размер которого был жестко определен 18px не изменил рамеров, также не поменалась ширина навигационной панели, которая ограничена 100px по ширине.

Вам может показаться, что это безаговорочная победа rem, но это не так.

У нас нет данных о том, пользуются ли люди изменением размера текста в браузере, но у нас есть несколько неоспоримых фактов:

• мы точно знаем, что изменение размера шрифта в браузере не влияет на такие сайты как facebook, youtube, amazon, twitter, medium, linkedIn, eBay (а это сайты из Alexa TOP 100.

• таким образом, мы знаем, что если кто-то не может читать 16px текст, но хочет использовать один из этих сайтов он вынужден искать другой метод.

• мы также знаем, что изменение размера текста в браузере не оказывает никакого влияния на остальной интерфейс операционной системы.

• из всего этого мы можем сделать вывод, что если пользователь не может читать 16 пиксельный текст, но хочет читать меню в Excel, почтовом клиенте и системных окнах он должен искать какое-то общее решение.

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

Так что, аргумент “это лучше для доступности” высоан из пальца. Двигаемся дальше…

#2 Контрольные точки для масштабирования при использовании rem/em

Другими словами, если вы указываете контрольные точки в пикселях – они фиксированы и не меняются при увеличении страницы. Ведь пиксель – это пиксель, верно?

Это просто не правда. (Возможно, когда-то так и было, не придумали же это люди)

У моего великолепного сайта-примера, есть контрольная точка 600px. И два варианта в пересчете на em и rem в 37.5. Без зума страницы они все равняются 600px.

Ниже этой точки имя отправителя и тема располагаются один под другим, а выше - выстраиваются в одну линию.

Давайте запустим IE11 для разнообразия. Я увеличиваю страницу до 150%, а затем изменяю размер окна так, чтоб оно стало шириной 900px (для тех, кто не силен в математике, это 600px * 150%).

Как думаете, как поведет себя IE11?

Посчитает ли он, что контрольная точка равна 600px и отобразит страницу как для большого экрана? Или он пересчитает размер на 150% таким образом, что на 900px мы получим отображение как для малого экрана?

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

А это, на минуточку, IE! А как обстоят дела в других браузерах?

Сафари сделал именно то, что я от него ожидал.

Он отмасштабировал мою контрольную точку 600px, но не совсем до 900px. Это не плохо, хотя окно было шире точки 600px, но при увеличении на 150% все три варианта сайта отображались так, если бы они были ниже точки останова.

Так что, если вы все еще беспокоитель о том, что ваши контрольные точки в px не будут масштабироваться при зуме окна – успокойтесь, это не так. Ну или по крайней мене, вам стоит отыскать браузер, который не масштабирует и убедиться, что им пользуются посетители вашего сайта. Предположим, это IE8 и вам нужно его поддерживать и оказывается, он не масштабирует контрольные точки – поздравляю, у вас появилась законная причина использовать rem (не будем сейчас говорить о том, что IE8 не поддерживает ни медиа запросы, ни единицы измерения rem… не будем).

#3 Использование em для ‘динамических’ отступов в тексте

Звучит не плохо, правда? «Зачем менять размер шрифта и padding, когда вы можете использовать em для padding, а затем только изменить размер шрифта?», - слышите вы голос в вашей голове.

Я и сам так делаю. Просто, я люблю точность и потому устанавливаю, скажем, размер шрифта и паддинги для кнопки так, чтоб ее размер был 60px на больших экранах и ровно 50px на маленьких, визуально соответствующих 60px/50px панели заголовка.

И если мне приходится работать с профессиональными дизайнерами, то мне еще нужно поискать такого, которому было бы все равно, какого размера кнопка. Такие вообще существуют?

Но, если вы сами проектируете сайт и не очень заботитесь о том, какого размера эта кнопка и какого размера на ней текст, и хотите, чтоб отступы внутри кнопки увеличивались с увеличением шрифта… в таком случае, использование em/rem оправдано!

Теперь перейдем к одной из наиболее “непонятных” причин использования rem и em (я не знаю, зачем я нумеровал все заголовки).

#4 Создавайте блоки, размер которых можно изменить, просто изменив размер шрифта корневого элемента

Этот пункт появился в статье благодаря статье Design a responsive site with em-based sizing.

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

Это имееет смысл. А еще, “если вы часто убиваее людей, то вам удобно будет возить лопату в багажнике вашего автомобиля”. Это тоже имеет смысл.

Это отличный совет, правда. Но вот только я не могу вспомнить когда последний раз я совершал убийство. Как и не могу вспомнить, когда я в последний раз хотел, чтоб компонент (модальное окно, например) масштабировался по всем параметрам (padding, margin. font-size) в зависимости от одного параметра, размера шрифта.

Вот вам мой совет. Перед тем как начать проект, задайте себе вопрос: нужно ли вам создавать компоненты, которые иногда будут нормального размера, а иногда… на 10% больше по всем параметрам. Если да, то вам нужно следовать рекомендациям из той статьи в блоге. Это именно то, что вы ищите. И положите лопату в багажник… дя, я псих!

Вы можете масштабировать весь текст на своей странице с помощью одного свойства

(Я решил больше не нумеровать заголовки)

Дргуая загадочная причина использовать em выглядит следующим образом: вы определили размер шрифта в своем css всего, например, в 50 местах. Вы хотите чтоб все 50 отображались на большом экране крупнее, а на маленьких экранах мельче, и не хотите писать много медиа запросов. В таком случае, вам лучше использовать rem везде, а затем изменив размер шрифта корневого элемента через медиа запрос… бум! и весь ваш текст поменял размер.

Но, мне кажется, эту технику можно смело отбросить минимум по двум причинам. И вот почему:

1. Предполагается, что вы хотите увеличивать/уменьшать весь текст на вашем сайте для заданной контрольной точки. Заголовки, пункты меню, основной текст страницы, все сразу, по одному и тому же фактору. Это смелый шаг, скажу я вам.

2. Реальная пролема, я вас уверяю, в том, что размер текста определен 50(!) раз. И если вы так делаете, вам нужно приводить в порядок типографику на сайте. О, нет! Вы слышите это? Это стук копыт typography nazzi.

Так вот, если у вас есть отдельный файл для типографики, и у вас есть, скажем, 12 стилей, и для каждого стиля у вас есть разные размеры для 4 размеров экрана, это 48 объявлений размеров шрифтов (и возможно, высот строк). Еще, возможно, padding и letter-spacing. Как сказал однажды Уинстон Черчилль “that’s a lot of stuff”.

Теперь, когда это стало очевидным, вы скажете: “О нет, это много повторений, нам нужно сделать это по-другому. Что угодно, только не повторения”.

Я не согласен. Да, много. Слишком часто я вижу как усложняют приложения ради выполнения этого всемогущего принципа DRY (не повторяй себя). Не стоит недооценивать то, на сколько возрастает сложность при смешивании нескольких единиц измерений. NASA использовали всего две единицы измерения на орбитальном аппарате марса и они все еще не могут найти его.

Не дайте своему сайту потеряться в космосе.

О, и это не просто разные единицы измерений, это зависимость размера текста в одном месте вашей страницы от размера текста в другом месте вашей страницы. Это антипатерн инкапсуляции, он нарушает детерминизм и вообще, может принести много неприятностей.

Так вот, подумайте о своей типографике, настройте ее один раз, сделайте это в пикселях, справьтесь с небольшим количеством повторений, убедитесь, что размер вашего текста стал именно таким, каким вы хотите, и забудьте о нем.

Эта напыщенная статья была гораздо длиннее, но остальное осталось в черновиках и я не стал публиковать их.

В заключение

Я думаю, дела обстоят так: бывают случаи, когда вам необходимо использовать rem и em, они описаны в спецификации. Но, сценариев использования, которые реально полезны, не так много, как может показаться на первый взгляд.

Поэтому, не ищите повода использовать em и rem. Используйте пикселы, а там, где rem и em будет лучшим решением – примените их.

Бонусы на тему единиц измерения

Эти вещи имеют мало общего со статьей, потому, я просто перечислю их без подробного объянения.

1. Если у вас есть два блока с текстом и вы хотите чтоб между ними был пробел, используйте 1ch для отступа (например, padding).

2. Если вы хотите, чтоб цвет фона полностью заливал вашу страницу по высоте, используйте 100vh вместо 100%. Но, если вы используете vh, вам следует тщательнее тестировать на реальных iOS устройствах.

3. Знаете ли вы, что выравнивание по вертикали может быть в процентах? Если вы обнаружите, что vertical-align: super или top не выстраиваются так, как вам нужно, не делайте что-то типа position: relative и top: -3px. Вместо этого попробуйте выравнивание по вертикали: 30%.

4. Когда дело доходит до гибких макетов, не забывайте о flex-grow и flex-shrink. Они могут показаться вам очень сложными для понимания, но оно того стоит.