Why use REM Typography in Webflow

Summary

This 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

00:00

🔲 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.

05:03

🔄 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.

10:05

📏 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.

15:06

📝 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.

Keywords

💡Typography

Typography refers to the art and technique of arranging type to make written language legible, readable, and appealing when displayed. In the video, typography is the central theme, with a focus on how different CSS units affect the presentation and responsiveness of text on the web. The script discusses how using pixels, ems, and rems can impact the design and accessibility of web typography.

💡Pixels

Pixels are absolute units in CSS used to define the size of elements on a webpage. The video explains that pixels maintain a consistent size regardless of the viewport or other elements' sizes. For example, a measurement of 50 pixels will always display as 50 pixels, making it simple but inflexible for responsive design.

💡ems

Ems are relative units in CSS that scale based on the font size of the element's parent. The script clarifies that ems compound, meaning that if an element's font size is set in ems, it will scale relative to its parent's font size, which can lead to complex calculations and nested scaling effects.

💡rems

Rems, or root ems, are similar to ems but are based on the root HTML element's font size, typically 16 pixels. The video demonstrates that rems provide a more accessible and scalable approach to typography, as they do not compound like ems and allow users to adjust the browser's font size without affecting the layout.

💡Accessibility

Accessibility in web design refers to the practice of making websites usable for people with disabilities. The video emphasizes the importance of using rems for font sizes and other elements to allow users to resize text according to their needs, thus improving the site's accessibility.

💡Viewport

The viewport is the visible area of a web page. The script introduces the concept of using viewport width as a unit to scale typography and other elements proportionately with the screen size, which is part of the Wizardry method discussed in the video.

💡Wizardry Method

The Wizardry method is a design approach that uses viewport units to create fluid and responsive typography. The video explains that by setting the body font size to one viewport width and using ems for other elements, designers can create a layout that scales with the viewport, maintaining proportions across different devices.

💡Fluid Design

Fluid design is a layout approach that allows elements to resize and adapt to different screen sizes. The video mentions Finnsuits' Fluid Responsive method, which involves using custom breakpoints and a tool to generate CSS that makes elements scale fluidly without manual coding.

💡Compounding Effect

The compounding effect in the context of ems refers to how the scaling of one element affects the scaling of its child elements. The video uses this term to explain why ems can be complex, as changes to a parent element's font size will affect all child elements set in ems, leading to a cascading scale.

💡Unitless

Unitless values in CSS are numerical values without a unit, such as line-height in the video. The script mentions setting line-height to a unitless value, which scales proportionally with the font size of the element, providing a way to adjust spacing without fixed units.

💡Cognitive Load

Cognitive load refers to the mental effort required to process information. The video praises Webflow for allowing designers to convert pixel values to rems directly in the workflow, reducing the need for manual calculations and thus reducing the cognitive load on designers.

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