Why use REM Typography in Webflow
Summary
TLDRThis tutorial delves into the intricacies of typography units in web design, contrasting pixels, 'ems', and 'rems'. Pixels are absolute, but 'ems' and 'rems' offer scalability and responsiveness, with 'ems' compounding based on parent elements and 'rems' scaling relative to the root element. The video introduces methods like 'Wizardry' for fluid typography and Finnsuite's fluid design tool, emphasizing the importance of 'rems' for accessibility and responsive design. It concludes with practical advice on converting pixel measurements to 'rems' using Webflow's built-in calculator.
Takeaways
- 😀 Pixels are absolute units in web design, meaning they have a fixed size regardless of the viewport or parent elements.
- 🔍 The 'm' unit is derived from print design, where it represented the width of the capital letter M. On the web, 'm' values are relative to the font size of their parent element, compounding with changes in the parent's size.
- 🔄 'ms' compound, which means that changes in the parent element's font size will affect all child elements that use 'm' units, making it difficult to maintain consistent sizing.
- 📏 'rem' units are relative to the root HTML element, making them independent of direct parent sizes, which simplifies design and improves accessibility.
- 🌐 Using 'rem' units allows for better accessibility, as users can change their browser's font size settings, affecting the entire page layout without needing to alter 'px' or 'm' values.
- 🛠️ The 'wizardry' method by Timothy is introduced as a way to scale typography and design elements based on the viewport width, using 'm' units to maintain proportional design across different screen sizes.
- 💧 The 'fluid responsive' method by Finnsuite is a new approach that allows for fluid scaling of design elements without the need for custom coding, by adjusting breakpoints and using a provided code snippet.
- 🔄 When using 'm' units, changing the body's font size to one viewport width (vw) can create a responsive design that scales with the screen size.
- 📐 The 'fin suite' method maintains accessibility by allowing users to zoom in and out, even when design elements are set to scale with the viewport.
- 📝 Webflow provides a built-in feature to convert pixel values to 'rem' units, simplifying the process and reducing the need for manual calculations.
- 🚀 The presenter recommends using 'rem' units more frequently for better user accessibility and design control, suggesting a shift away from traditional 'px' units.
Q & A
What is the main topic of the video?
-The main topic of the video is typography in Webflow, specifically discussing CSS units like pixels, ems, and rems, and how they differ from one another.
Why are pixels considered absolute units in CSS?
-Pixels are considered absolute units because they have a fixed size that does not change based on other elements in the design or the viewport size.
What is the historical significance of 'ems' in typography?
-Historically, 'ems' were used in print to represent the width of the capital letter 'M'. However, on the web, they are defined differently and are relative to the font size of their parent element.
How do 'ems' compound in CSS?
-Ems compound by multiplying the size by the font size of their parent element. This compounding effect can be seen when the parent's font size is changed, affecting all child elements that use ems.
What is the main advantage of using 'rems' over 'ems'?
-The main advantage of using 'rems' is that they are based on the root element's font size, not the direct parent's. This makes them more predictable and less prone to the compounding effect seen with ems.
Why are 'rems' beneficial for user accessibility?
-Rems are beneficial for user accessibility because they allow users to change the browser's default font size, which scales all elements using rems accordingly, without affecting elements using pixels or ems.
What is the 'Wizardry' method mentioned in the video?
-The 'Wizardry' method is a design approach that uses viewport units (vw) to scale typography and layout elements proportionally to the screen size, providing a fluid and responsive design.
What is the difference between the 'Wizardry' method and the 'Fluid Responsive' method by Finnsuite?
-The 'Fluid Responsive' method by Finnsuite allows for fluid and scalable designs by using custom breakpoints and a tool that generates code to make elements based on rems scalable with the viewport, without requiring manual calculations.
How can Webflow be used as a calculator to convert pixels to rems?
-Webflow can be used as a calculator by dividing the pixel value by the default font size (usually 16 pixels) and then appending 'rem' to the result, allowing for easy conversion without a separate calculator.
What is the presenter's recommendation for using typography units in web design?
-The presenter recommends using rems more and more in web design, moving away from pixels for better user accessibility and responsive design.
Outlines
🔲 Understanding CSS Units: Pixels,ems, and rems
This paragraph introduces the topic of typography in web design, focusing on CSS units such as pixels, ems, and rems. It explains that pixels are absolute units, meaning their size remains constant regardless of the viewport size. The paragraph also delves into the origins of ems, traditionally used in print to denote the width of the letter 'M', and how they function differently on the web, being relative to their parent element's size. The concept of compounding effect in ems is introduced, demonstrating how changing the parent element's size affects all child elements set in ems. The paragraph concludes with an introduction to rems, which are based on the root HTML element's size, providing a more accessible and simplified approach to typography that doesn't change with parent elements.
🔄 The Power of rem for Accessibility and Fluid Design
This section discusses the advantages of using rem units for web typography, emphasizing their role in enhancing user accessibility. By changing the browser's default font size, all elements set in rem units scale accordingly, allowing users to customize their reading experience without affecting elements set in pixels or ems. The paragraph also touches on the importance of maintaining design proportions and introduces the 'Wizardry Method' by Timothy, which uses viewport widths and ems to create fluid, responsive designs that adjust according to the screen size. An example is given to illustrate how text and elements can grow or shrink relative to the viewport, maintaining design integrity across different devices.
📏 Exploring the Wizardry Method and Finnsuite's Fluid Design
The paragraph explores advanced techniques for responsive design, such as the Wizardry Method, which involves setting the body font size to one viewport width and using ems for other elements to create a design that scales with the screen size. It also introduces Finnsuite's fluid design approach, which allows for dynamic scaling of elements based on custom breakpoints. The paragraph explains how these methods enable designers to create accessible and fluid designs that adapt to various screen sizes and user preferences, while maintaining design control and preventing users from significantly altering the layout to the point of disruption.
📝 Transitioning to rem for Better User Experience
In the final paragraph, the speaker shares personal insights on the increasing use of rem units in web design, advocating for their adoption over pixels for improved user accessibility. The speaker also addresses the challenge of converting pixel-based designs to rem, demonstrating a simple method within Webflow that eliminates the need for manual calculation. The paragraph concludes with an encouragement for viewers to subscribe for more content and to engage with the video by asking questions and sharing comments.
Mindmap
Keywords
💡Typography
💡Pixels
💡ems
💡rems
💡Accessibility
💡Viewport
💡Wizardry Method
💡Fluid Design
💡Compounding Effect
💡Unitless
💡Cognitive Load
Highlights
Introduction to CSS units: pixels, ems, and rems, and their differences.
Pixels are absolute units, maintaining a constant size regardless of the viewport.
Ems originated from print and are now defined by the size of their parent element in web design.
Ems compound, meaning their size is multiplied by the parent's size, affecting nested elements.
Rems, or root ems, are based on the root HTML element's font size, not affected by parent elements.
Rems provide better accessibility by allowing users to change the browser's font size, affecting the design.
Demonstration of how changing the browser's font size impacts rem-based design but not pixels or ems.
The Wizardry method by Timothy is introduced for fluid typography based on viewport width.
Fluid Responsive by Finnsuite allows for creating scalable designs without custom code.
The importance of line-height in design and how it can be adjusted using unitless values.
How to maintain design proportions by scaling elements based on the viewport using ems.
The potential issues with ems when it comes to user accessibility and zoom functionality.
Transitioning from pixels to rems for better user accessibility and design control.
A practical tip on converting pixel values to rems using Webflow's interface.
The presenter's personal preference for using rems over pixels for improved accessibility.
Encouragement for viewers to experiment with fluid typography methods for responsive design.
Invitation for viewers to subscribe and engage with the content for further questions and support.
Transcripts
in this video we are going to talk about
typography in webflow pixels and why you
probably shouldn't use them everywhere m
and rams what are they and how they work
let's get started
[Music]
hey friends this is kawarza again with
another webflow tutorial so for today
we'll be talking about css units pixels
amps and rams what makes them different
from one another and also this video can
be an introduction to learning wizardry
method by timothy or fluid responsive by
finnsuite if you don't know any of those
don't worry we'll touch on them in a bit
but let's start with pixels
the unit that we all know and familiar
with for the matter of this tutorial we
have this design here ready
the first section being in pixel so
pixels are absolute units um very simple
it means 50 pixels stays 50 pixels
and it doesn't depend on other elements
in the design or on the viewport so if i
change
the size
it won't change the size of the button
if i change
the size of the window right so we know
pixel is pretty simple though m's uh
what is an m
these are actually from the print time
and one m
meant the width of the letter the
capital letter m
but now on the web they are defined
completely differently so the size of um
the unit m is defined by its parent and
um defined by its parent it
it actually means it's
multiplied by the size of its parent so
to put it in practice here uh we have
this h2 heading at 3.5 m and this size
is actually multiplied by 16 pixels
because the the size of the the parent
the the font size is 16 so 16 multiplied
by 3.5 we have 56 pixels that's why
these two look identical uh the browser
at the end of the day uh
renders this as 56 pixels um but what's
really special about ms
is that they compound just this uh
multiplication that i mentioned it
compounds that means uh if we have
another parent uh set in a different set
differently
it will
multiply it but now let's uh choose this
grid and
change this from change the font size
from 16 to be
1.2 m's
and what it does is
now everything inside
here we had 3.5 is now multiplied by 1.2
and then multiplied by its parent 16
pixels and if we change this from 16 to
be 18
everything gets even much bigger because
now it's 18 pixels from here
multiplying by 1.2 and then here for
example we have 3.5 multiplied by 3.5
and it
then renders at this size the same goes
for here the paragraph and even
the bottom margin even uh the padding
everything is in m and everything
compounds i know it gets a bit difficult
to
to keep track on this um and
indeed that's the reason why a ram was
invented so
ms can be really handy if you need
if you really know and
need this compounding effect
which we'll get into in a second but for
the most part
we use rams because they are simplified
and they are more accessible so what
does that mean
so one ram is
it's actually root m so
uh the root is for the html root element
that means
the size of one rem is not coming from
the parent but it's coming from the root
html file
which is by default 16 pixels so
basically we can say if i change
the parent here so this is
3.5 ram again
but if i change the parent from 16
pixels to
20 nothing changes because
the the direct parent uh is not
affecting the text in which is in ram
only the html root element is affecting
this but where would you change this so
if we publish these changes now
note that the pixels and the rams are
equal and we change the m um
section and this is bigger so
why should we use ram
if i go to the browser setting here and
search for font settings or just font
size
just search size
here we have font size
and i can change it from medium
recommended which is 16 pixels uh to
very large this changes the whole
browser setting and the html uh root
file and if we go back to the site now
we see
that this section
has scaled up
quite a lot
even more than the m and the pixel
section stays the same
so if a user decides this is a
this is an accessibility thing if a user
wants to make the font bigger
if we use rem for everything including
the the padding and the
um
including the padding and the margin
everything we allow
users to you know have the option uh to
make the font bigger or smaller
this won't affect ms and won't affect
pixels that's why we are giving users
the freedom um to choose
the font size that they want the default
font size that they want uh you note
that here the height gets messy and
there is also a nice trick here about it
or something that you should all
consider doing
if we go to the body
all pages we can here change the font
height
for this one it's not affecting
this exact element but nevertheless i'll
change this to be 1.2
and then dash this is a unitless
it's not a unit and it's just multiplies
by
the size so 16 multiplied by 1.2 we
don't know we don't need to know the
answer uh to this it's just
that we can set it to be something more
than one point one or one point two
depending on the font uh
for this one it's because because it's a
heading we can change it from the all h2
uh
if we set it uh we change it back 1.3
we need to set it um
exactly on it to specify it and then 1.2
it affects it and now we see it's uh
changed everywhere so published again
and
we can come back to the browser setting
change it back
once
maybe
even to try very small it's for me
really difficult to read now uh but if
somebody for whatever reason wants to
make uh the font really small they can
do it we are giving this freedom
uh but does that mean that
we have
we don't have more
design control does that mean that users
can
uh basically mess up with our design
somehow yes um in a sense they can but
if they really want to go out of their
way and go to the browser setting and
change it they probably have a reason
and we better
allow them to do it but if you want to
develop your design
the way you want it and in proportion to
to the screen size of the user so
basically the typography the the spacing
the sizing everything stays fluid so if
the screen size gets smaller the type
also gets smaller we can scale things
based on m and multiplying them by the
viewport this is basically the wizardry
method um in theory and i'll just show
you an example and
i'll show you how to do it so
taking the
uh flux black friday page uh as an
example
uh by making this section smaller and
bigger you see that the text and
everything even uh the the images
everything gets smaller and bigger so
it stays proportion to the viewport
and changes based on that if you
notice that here the the text actually
stays the same because
and also the button because i didn't
want these to change i just wanted uh
the
the big heading to take almost the whole
space and at the point uh
for example here
exactly here it stops growing so if we
have a huge monitor or the the user is
um looking at this site on a big uh
weather very high density uh high
resolution screen they won't see like a
too too big of a text
it stops growing somewhere so to do that
um we have the m's here just the way it
was
and
as we talked about it it's multiplied by
its parent so for the parent we can say
instead of 18 pixels for example we can
set it to be one viewport width
and now it's
everything is multiplied by one viewport
width and basically
scaling with that that means if i make
my screen smaller you see that the text
gets smaller here too and everything
everything that is based on m gets
smaller and on a much bigger screen it
gets even bigger
in order to stop that we can add a
little bit of custom code so again
wizardry and just with a little bit of
custom code we can
stop it from growing here but it's
probably too much for this video to
discuss that but just you know that you
can have the whole section set to be uh
one view w the font size and then
everything inside of it to be one uh to
be
in m
now this is just for one section and if
you want to develop the entire website
based on wizardry
method uh by the way i'll make sure to
link the video the main video in the
description
uh you can set body all pages to one
view w
and
then use every uh use uh ms for
everything so for the paddings for the
type uh even the size so here the width
and the height you could use ms and
scale everything based on that
so this is
wizardry method
but just the starting point of it and
you can watch the video in detail i
mentioned in the description
but there is also another
method developed by finsweed uh i'm not
really fluent with this one no pun
intended this is a fluid design and
it's it's super new there are not many
videos about it but
what you do here is you play around with
these custom break points
so for example this is desktop then
tablet and the two mobile break points
and you can play around with how much
things uh scale and then you get this
code you don't have to write any code
you just play around with these sliders
you copy the code and you go back to the
design i already have this html embed
element you can just paste in the code i
already have the code here as comment so
this is the code you paste it in and now
suddenly
everything that you had based on ram
becomes
scalable and fluid
the way it works is this code is
calculating the ram and adding it to
viewport that's how i understand it
adding it with viewport uh
unit
and in different
media query so these are essentially our
break points just like these and the way
i showed it you play with them here and
you just change them here
this one probably needs a little bit of
playing around with but it's very
promising uh and i'm actually i want to
try this uh a bit more but again this is
something really new so what we have
discussed here
uh pixels as i mentioned they stay the
same um they are the same everywhere m's
they they are basically
multiplying by their direct parent and
they compound and we use that
compounding effect by setting our body
font size to one view to create wizardry
method and you know scale everything
based on viewport
and rams and
you know finnsuite clientfirst uses ram
for everything and with the new tool
that they have you just basically turn
on a button you just copy the the text
uh the the code paste it in and now
everything is fluid
uh i have to try this a little bit more
but i will also mention this in the
description so you can try it for
yourself
uh one last thing for um to mention here
if i come to here the content um section
in the for the m version
and change the max with
you know from pixel being pixel to be
something like 90 m's
and if i publish again you see something
interesting happens
with m something that is not
really um
user accessible
so reloading here you see this gets
really big and if i zoom in and out the
design stays the same this is
this is exactly that
disabling zoom function but here with
the
fin suite method we still can zoom in
and out and make the text smaller and
bigger which is super accessible so i'm
actually looking forward to using this a
bit more
but i found i still find this method the
visibly one a bit easier maybe because
i'm more experienced with it okay so one
last thing here
i'm personally using rams more and more
every day
moving away from pixels as much as i can
to use ram and adopt it for good forever
for user accessibility
and i would say you should too i know
you might be saying it's a bit difficult
how do i convert the these numbers i
have it in figma in pixels true so for
example here we have this tag this uh
text headline
at 72 pixels how do i know how do i
calculate do i need an uh calculator all
the time with me no actually you don't
you can use uh workflow as a calculator
so here um i'm just changing that to the
default again
we have 72 pixels so we can say 7d2
divided by 16 y16 because the ram uh
assuming that the browser setting is 16
by default we divided by 16 pixels and
we just type rem after it so webflow
does the calculation and enters it in
ram so 4.5 here you go you get it and
you don't need a calculator my math
teacher wouldn't probably approve it
what but we designer we call it reducing
the cognitive load so thank you webflow
for putting that there all right guys
that's it uh thank you for watching guys
uh please consider subscribing if you
haven't already if you have a question
comment them below i'll be there
answering them until next video peace
[Music]
you
Ver Más Videos Relacionados
CSS Units & Sizes Tutorial for Beginners
A CSS Unit Deep Dive - Learn CSS Units & When To Use Them
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 11
Fluid Mechanics Lesson 02F: Manometers
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 10
30 Web Design Tips in 11 Minutes
5.0 / 5 (0 votes)