As a rule of thumb, most JS topics take too long for me to debug/help in, so you might want to rely on other JS experts. I try to pop in with simple advice or simple topics since it doesn’t take a while.
Here is what I have now in main.css
/* Basic CSS Reset */
html, body, address, blockquote, div,
form, fieldset, caption,
h1, h2, h3, h4, h5, h6,
hr, ul, li, ol, ul, dl, dt, dd, br,
table, tr, td, th, p, img{
margin: 0;
padding: 0;
}
html{
overflow-y: scroll;
}
body{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
line-height: 1.4em;
font-size: 0.9em;
color: #000;
background: #FFF;
}
This seems to work well for me.
How would I incorporate your REM and not break anything?
This isn’t a very pretty example, but give it a look and see if it makes sense. It talks about font-size (rem) and line-height (unitless). Hopefully this answers your initial question and sheds some light on unitless line-height.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="rem tester">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem tester</title>
<!--
Two Issues:
(1) The rem unit of measure is proportional to the font-size of the <html> element, not the font-size of the parent element.
(2) Unitless line-heights are applied in proportion to the font-size, not the same height for all font sizes.
Play with the numbers.
-->
<style type="text/css">
/* Basic CSS Reset */
html, body, address, blockquote, div,
form, fieldset, caption,
h1, h2, h3, h4, h5, h6,
hr, ul, li, ol, ul, dl, dt, dd, br,
table, tr, td, th, p, img {
margin: 0;
padding: 0;
}
html {
overflow-y: scroll;
font-size: 90%; /* adjusts the base default font-size of the page, if desired */
}
body {
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
/* line-height: 1.4em; /* sets a fixed line height for all font sizes */
line-height: 1.4; /* proportional line height matches font-size */
/* font-size: 0.9em; /* FYI: .9em = 90% */
color: #000;
background: #FFF;
}
h1 {
font-size:2.5rem;
text-align:center;
}
span {font-size:2rem;}
h1 span {
display:block;
font-weight:normal;
}
p.firesale {font-size:1.5rem;}
</style>
</head>
<body>
<h1>This h1 tag is the title of something special<span>This span is within the h1 tag</span></h1>
<p class="firesale">This paragraph tag is our <span>span - Fire Sale - span</span>!! Did you notice that the font-size of the spans is the same? Their size is not relative to their parent container.</p>
<p class="firesale">(1) The rem unit of measure is proportional to the font-size of the <html> element, not the font-size of the parent element.</p>
<p>(2) Unitless line-heights are applied in proportion to the font-size, not the same height for all font sizes. Notice that the space between these lines is relative to the font size. So what, you say, that's to be expected. Yes, but you have set that line-height to 1.4, which is taller than the default (approx 1.2). You can change it in one place to 1.5 (for example) and it will affect all of this text.</p>
</body>
</html>
1 Like
Good job, and thanks for the effort!!
So my body font-size: 0.9em equals html font-size: 90%??
Also, where are the “gotchas” at?? (Everything has some downside!)
Actually, it was just a simple comparison of ems to percents since both units of measure are relative to their parent container. What I meant was .9em is equivalent to 90%. 1.5em is equivalent to 150%. etc. However, the answer to your question is “yes”. Just remember that ems are relative to their parent (which can be the html element) and rems are always relative to the html element.
“caniuse” says there currently aren’t any:
but older versions of several mobile browsers might not be fully compatible with rem.
1 Like
Other than a few potential issues support looks extremely good
IE 9, 10 and 11 do not support rem units when used in the "line-height" property when used on :before and :after pseudo elements (https://connect.microsoft.com/IE/feedback/details/776744). Borders sized in "rem" disappear when the page is zoomed out in Chrome. Reportedly does not work on Android 4.3 browser for Samsung Note II or the Samsung Galaxy Tab 2 on Android 4.2. Chrome 31-34 & Chrome-based Android versions (like 4.4) have a font size bug that occurs when the root element has a percentage-based size.
Thanks for the demo and explanation. (You too, @RyanReese .)
For now I will hold off using these since my site is done and I’m not into breaking things. But when I start a new website, I will give REM a go! 
What is the reason you shouldn’t use pixels to size fonts on webpages?
Because it disrespects the users settings.
If you set the html font-size to 14px then that is an absolute value and if I have set my browsers’ default text to 18px so I can read easily then you have over-ridden it straight away.
If on the other hand you set the html font size to a percentage, em or rem then text is sized based on what my default user setting is and not on the browsers default.
I tend to ensure that readable body text is sized fluidly but I will often use pixels for larger headings or where I need to ensure that ‘unimportant’ content matches up with the design if needed.
Designers (and clients) love pixels because they can say “Hey you’re 1 pixel out” when in truth in does not matter a jot because visitors couldn’t care less as long as they can read the content and the page looks good.
2 Likes
I gave an example of a font size. I’m not sure where you think I recommended using px in your layouts? I see where the confusion was, but mine was purely an example of a font size. Just FYI, e.g. = example.
Paul (and I) both do not recommend px font sizes. That practice should have been stopped years and years and years ago.
Sorry, that is the way I was reading a lot of the responses in this thread up top, and it is why I was pushing back on REM.
It seems @ronpat gave a solid answer in Post #23 above…
Yes, percentage font on the HTML element is a solid choice. Something that will adjust accordingly (on the HTML element) is fine. Percentages do that.
As you can see from Rons code, he then uses REM to set different font sizes on different elements. All the REMs base their values off of the HTML elements font size (since they use REM.)
It’s a solid example. Ron gave very good code which was clear and concise. Study it.
1 Like
Thanks for the clarification! 
I was re-reading this thread and wanted to make sure I understand what you would recommend.
@ronpat, suggested the following code as solution to my OP which complains about font-size inheritance getting really messy…
html {
overflow-y: scroll;
font-size: 90%; /* adjusts the base default font-size of the page, if desired */
}
body {
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
/* line-height: 1.4em; /* sets a fixed line height for all font sizes */
line-height: 1.4; /* proportional line height matches font-size */
/* font-size: 0.9em; /* FYI: .9em = 90% */
color: #000;
background: #FFF;
}
h1 {
font-size:2.5rem;
text-align:center;
}
Would Ron’s code address my issue of not wanting multi-inheritance on font-size, but also meet your requirement of not wanting to override a user’s personal browser settings?
Thanks.
Yes, that code is fine as it does not change the default that the user has selected (other than reducing it down to 90% initially).
Rems do not have compounding issues but are only supported in IE9+ so if you are worried about older browsers then you will need a fallback with em/% or px.
You can usually avoid compounding issues anyway by not specifying the em/% font size directly on elements that may be nested. e.g. don’t say ul {font-size:90%} because uls are often nested. Apply the font-size to a parent element that is unlikely to be nested perhaps.
1 Like
If I decide to use rem on other elements, then what would be the difference of using % vs em on the html element?
Same effect?
Still accessible?
Where I have gotten into trouble is when I need to style a <p> that is nested.
I suppose if I had more generic styles/sizes it would less of an issue, but I want my web pages to look just right, and that seems to mean that I end up styling lots of things differently on a given page.
% and em are the same thing when referring to font-size and are interchangeable. 1.2em is the same as 120%.
‘p’ elements can’t be nested so if you had applied em or % to a p element you can be safe in the knowledge that it can’t compound.
Consistency is the key. You shouldn’t need to continually style things differently.
You can when you give the div it is inside a font-size: 0.9em 
When you have a really complicated layout with lots of nested sections, then it does become complicated.
Maybe if I master RWD, it will teach me to design things in a more simple way?
But for my own website, when you are trying to cram an enormous amount of info into a small space, it requires lots of custom styling.
Paul specifically says about applying it to a p{}…
To be honest, probably no. RWD only is about taking your website, and making it adaptable for tablet/mobile (any size screen). It’s not about changing markup or anything like that. RWD is very simple and doesn’t involve that much.