On this Webflow lesson we learn to setup our Global Styles ( Playground ). How to size our headings correctly in Webflow and the difference between EMs & REMs units on Webflow.
Take a moment to download this Webflow Template so you can practice, experiment and use however you want!
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
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
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.
Access our premium community including bonus tutorials, project files & weekly resources.UNLIMITED ACCCESS