Am I using Rem and Em the Right way?

HTML & CSS
1

html {
font-size: 100%;
}

.div {
font-size: 1rem; 1rem=16px;
}

.div2 {
font-size: 1em; 1em=14px;
}
P.S: In case of em we don’t need to put any font-size in html {}.

So am I correct? This is the way I do it or I am doing any wrong?

Thank you

2

If you’re doing 1rem/1em, you don’t need to include it because the font-size will be cascade down, so unless you’ve changed a font-size on a parent container, the size from the html declaration will carry through.

Now there are elements which by default carry a font-size other than 1em, especially the heading elements (h1-h6) but most will default to the size of the parent container unless otherwise specified…

3

I’m not really sure what you are asking, but:-

So far, so good.

Saying 1em is a bit pointless, as text will default to 1em.
True that 1em = 16px by default in most browsers.

Not sure where you get 14px from.
You need to show the html too, to see this in any context.
The short version, rem is relative to the base font size on the document, 1em, 16px, 100%.
em is relative to the current font size on the parent element, which could be anything.

1 Like
4

If you’re doing 1rem/1em No… that was just an example I showed here… I always use 1 type of unit in one project. I gen. use Rem since I am reading thar its best to use rem.

So I think I am correct the way I am using rem.

5

OK so REM is calculated based on Root Element
html {font-size: 100%;}
div {font-size: 1rem;} 16px here.

And EM is calculated based on Parent Element.
div {font-size: 16px;}
div h1 {font-size: 2em;} 32px here.

Am I correct?

6

Yes, but to see it in context, we need html too.

<div class="mytext">
    <h1>A Title</h1>
     <h2>Sub Title</h2>
    <p>Some text.</p>
</div>

html { font-size: 100% } /* 16px */

.mytext {
    font-size: 1.5em; /* 24px or 1.5 x 16 */
}

.mytext h1 {
   font-size: 2em; /* 48px or 2 x 24 */
}
.mytext h2 {
   font-size: 2rem; /* 32px or 2 x 16 */
}

It is a matter of preference, or what is suitable in the circumstances.

7

Thank you I got it…

But it seems both rem and em are not responsive. I mean they dont auto adjust when viewport size is reduced or increased.

It seems I have to say Bbye to them and say Hello to VW, VH and Vmin.

8

Do you need the text to change size to be responsive?
Text is naturally responsive since it wraps.
Making text smaller on small screens can make it hard to read and therefore inaccessible to many.
Though screen dependant font-size can be good for headers sometimes, but I would not use it for body text.
Also using vw alone can be a bit extreme, though it can be tamed with calc.

2 Likes
9

Ohh I see… Thanks for the helpful advice and cautioning me. Yes my main prob atm is those big header texts we put in big banners or sliders. Need to test and tweak.

10

A good trick with headers is to use calc to combine vw with em to stop the size of vw getting too extreme

font-size: 2em; /* fall-back needed for old browsers */
font-size: calc(1.3em + 2vw);

It may take some trial and error to get the right balance between em and vw to get the text a nice size on all widths. But it is better behaved than using vw alone.

1 Like
11

Makes sense to me.

So what this code does is that incase the font size is becoming tooo small in smaller viewports, a 1.3em will be added with 2vw so that the text stays legible.

Am I correct?

1 Like
12

Yes, the text will always be 1.3em plus a little more, so can’t get too small to read, which sometimes happens if you use font-size: #vw
It will also stop it going super-sized on big screens.
You need to tweak the balance between both values to get the look you want.
More em and less vw, means less growth/shrink, closer to a fixed value.
Less em and more vw, means more growth/shrink, a more dynamic sizing.

2 Likes
13

Thank you much :slight_smile:

14

Yes, in fact you will find that for mobile the main body of content should in fact be larger than for desktop in many cases as anything less than 16px is not easily readable on mobile.

1 Like
15

Note:
We should always use Rem’s or Em’s for font sizes. This article describes why.

2 Likes
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.