EMs vs REMs in Webflow

All right so, the next thing is font sizes
and font units.

I wanna explain to you a little bit of
what the difference is between utilizing

a pixel font size, so the same font size we
used in Figma as of now it's 72px for H1s

48 for H2s and 32 for H3s.

If we were to use pixels, similar to how
we did with Figma we would be using

a fixed size for our typography, and
ideally when it comes to the web

because everything has to be scaled
up and down, the user itself has power

to zoom in and zoom out if they can't see
a text or something like that, they can

start manipulating how font size is
scaled and work.

If we start using pixels for example for
a specific heading, if I click H1 and I

set this to 72px, what's gonna happen
is whenever the user start scaling things

this fixed size it's gonna affect all
other elements around it, which

can end up braking our design,
we don't want to do that so instead

we use a percentage unit or a EM
unit, the way we wanna establish

this percents are by using a little bit
of math, the basic formula is that

every HTML document has a 16px
default so every HTML website is

gonna always default to 16px,
to get to the value of just the

default 16 in EMs is by dividing it
by itself, so 16/16 is always gonna

equals 1, so that's gonna be 1em.

But if we wanna get the 72px in EMs we
have to do something like this 72/16

that gives a value of 4.5, ok so 4.5em is
gonna always equal the 72px.

Right now if I click on the body element
the Body of All pages, right now we

haven't establish the size yet, so he is
trying to find that value based on the

HTML doc 16px, but we can establish
that here, and automatically that 4.5

it's gonna equal 72px but there is a
problem, the problem is that EMs is

actually going to work based on the
relative container, so for example if

on the playground that we created
we were to establish this to be:

I don't know 20px, notice now that the EMs
that we've establish of 4.5 is no longer 72px

instead what is doing it's doing the
math based on the 20px

so that's creating a whole new complicated
set of mathematical equations to rescale

this proportionally, so instead we are
going to be using the unit called REMs

which is not mention here because it's
using the root size, so that's why it's

called REMs it's using the root size
which in this case is always gonna be 16px.

Anytime we make a change to our headings
or fonts sizes or any other element in our

page we wanna make sure that we always
scale using the REMs and that can also be

setup like this.
So, we know for sure that 4.5rem is

gonna equal 72px, because I've changed
here the H1 headings to a 4.5rem it's no

longer adapting or changing scale or
size based the playground of 20px, and

it's looking for that 16px value.

Another thing we wanna look at is space
or line spacing right,

so, if I have another line in my
heading, If I only focus on adding

the font size and not the height,
something like this is bound to

happen, because we haven't establish
what the height is proportionate to the

font size.
All right the way to fix this, line height issue

so if I were to click on any of these
elements right now the line height

is about roughly 140% so it's
proportionate to the 22px, similar

to how that works in Webflow we wanna set
that same height to be proportionate.

A simple fix to do that is by adding a 1
and a dash(-) in front of the 1 and

Webflow will automatically do all the
math for us, so that is something really

handy to know and to do.
But I've actually accidentally added

a heading class by not selecting the
correct All H1 headings.

So, I'm going to reset this, and I'm gonna
delete this heading class, make sure

that you go to your style manager and
clean up all the excess styles that you

might have accidentally created.

I go back in here and select the correct
All H1 Headings and simply add 1, in front

I add a dash and boom... just like that
webflow automatically does the math

for us, same thing with paragraphs if
I wanted to do that with all the paragraphs

I can also select All the Body, All the Body
class and do the same here 1 and a a dash

in front and automatically Webflow starts
to adapt that proportion in the line height.

We can adjust this as well if we wanted to,
so if we select All Paragraphs, and then

select here maybe we don't want this
All Paragraphs to be 20px instead we want

that to be 16px, so we could go with 1rem
which is 16px and then this could be 1-

or we could use maybe 1.2rem and that
starts to space out elements based on this

decimal number right.
1.4 you can start seeing a little bit of

resemblance to how we have it on
our Figma, so the more you experiment

with that the rule of thumb is that you
wanna have 140% difference between that,

you can even use percentage as well
you can say "Ok 150%" and that will

try to match what we have done with
Figma, right over here with the line height.

All right guys let's do the same thing
with the other headings, just make sure

we are using a correct sizing, so this one
would be 48, that would be 48/16 that's

3em, so right there we wanna use REM.

Select all bock quotes, I want this to be 1.75rem
and I want the height to be 140 or 150%.

Just like that...

I think this font size is pretty big, maybe
we wanna scale that down to like 1.5

so it's not so massive.
1.4 looks good.

And I think that italic,
we don't have the italic font installed

Ok, that's too bad.

Wanna make this Italic right there.

All right guys so let's jump into the
next lesson and start styling our buttons.