REM vs EM – Великий спор. Статья для рассылки.

В поисках развернутого определения относительных единиц em и rem наткнулась на одну занятную статью - REM vs EM – Великий спор за 2016 год (относительно свежую :blush:).

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

Думаю, эта статья исчерпывающе отвечает на вопрос “Когда использовать em, rem или px?” и будет интересна подписчикам рассылки от HTMLacademy (если, конечно, не указывалась ранее).

Но есть вопрос к форумчанам. Цитата из статьи:

На самом деле, плохая затея устанавливать font-size для html в пикселях (px), так как тем самым мы переопределяем установки браузера пользователя.

Вместо этого вы можете выбрать проценты в качестве значения font-size, или просто не задавайте его в html.

Заметка: font-size будет установлен в 100%, если вы сами его не задали.

html { font-size: 100% } /* это значит, что по умолчанию размер шрифта будет 16px*/

Для большинства пользователей (и браузеров), размер шрифта в 100% будет по умолчанию выдавать 16px до тех пор, пока они его не поменяют в настройках своего браузера. Хотя редко кто подобным занимается.

При верстке проекта не всегда font-size основного текста равен 16px.

К примеру, в макете Kidz Master из рассылки за август он равен 14px.

В этом случае я задавала соответствующий font-size для body - как-то сама так решила. Но теперь я не уверена в правильности этого решения.

Как же лучше поступить?
Скорее всего правильнее будет задать font-size: 0.875rem.
Но! Задать его для body или для html (хотя что-то коробит меня в этом варианте)?

Буду рада за ваши мнения по этому поводу.

Спасибо за статью! Почитаем!

Лично для меня не строит вопрос в том какие px или em ед измерения использовать. Я за то, что бы текст был читабельным, причем легко, на любом девайсе.
Был где то целый разбор о читабельности шрифтов для сайтов. От размеров букв, расстояния между буквами, строками. Полиграфия и т.д. Где то на хабре тоже видел, к сожалению не поделюсь.

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

У меня ни один заказчик не знает, что такое “PixelPerfect”, и всем плевать на то как дизайнер сделал текст. Если же вопросы ставить перед заказчиком таким образом, разработка может растягиваться на месяца.
Поэтому надо руководствуясь здравым смыслом, влиять на “дизайнерские” изыски. И не читабельный текст менять на добротный - обосновывая.
Помню только одного заказчика, который меня по шрифтам мучил. Наверное, я не занимался разработкой для какой нибудь газеты из-за этого у меня на сегодня такой подход.

А еще забыл сказать. Где то читал, что задавать стили, а потом их отменять - плохой тон в верстке.
И еще я вот переделывал шаблон от Zerofotur, там тоже, где то em использовались, где то %. Почему именно так для меня загадка.
Меня больше интересуют например такая вещь как 100% размер шрифта по отношению экрана мобильного и по отношению к разрешению например 1920х1600 к примеру. На моб, получается шрифт будет “нормальным”, а на PC очень крохотным?