Why use both px and rem in font-size?

[CharlieL]

When adopting the Enterprise-pro theme to client needs I studied some other themes
regarding font-size.

In order to learn more, I studied the CSS for one of the latest themes: Infinity Pro, and I
found that the font-size was set twice in both px and rem
Like this:

body {
	background-color: #fff;
	color: #000;
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 1.75;
	margin: 0;
} 

This reappears in h1 -- h6 and other special texts.

It would have been very interesting to get some insight into why it
is written that way and also if the order between px and rem is critical.
Could you please reveal some reasons for making it that way?

[Susan]

I believe it's related to accessibility and for font rendering on newer browsers versus older browsers. I got that information from here (link)

Here's further discussion on the subject: https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

In terms of order, you will find that the StudioPress themes place elements in alphabetical order, so px displays before rem. It's not critical that it is in alphabetical order - it's just neater 🙂

[CharlieL]

Thanks, Susan for the useful links! Yes, it seems to be issues with IE that causes this doubling of measures.
There was one comment in the first link saying: "the only real reason to use (r)em is so IE users can resize
the text?" But other comments bring a lot of confusion to which strategy to follow.

Therefore it would have been interesting to hear the incitement for the developers of the Infinity Pro theme
to use both measures, or maybe that´s against their policy. However, it is always better to have some deeper
insights on the themes one is working with. It is of great value when choosing a theme for a new site.

The tutsplus.com-link was also good. I have to read it again to fully comprehend the content. I have not used rem
before so there are some new things to me to be used to.

Thank you, Susan, for commenting.

[Author]

Posts