Layout & Design

Framer Update: REM Sizing for Responsive Type

Benjamin

3:54

12K views

May 1, 2025

About this lesson

The April update introduces REM sizing, making responsive design in Framer easier than ever. REM is a font-size unit based on a default value—typically 16 pixels—that allows you to design type scales relative to that base value. This base value can even be customized per Breakpoint, making all text layers using REM responsive out of the box. When using Layout Templates, this gives you a single place to define both your Breakpoints and base sizes per Breakpoint. You can then tweak either of them without having to redo any of your Text Styles. This update also brings big performance improvements to Framer. The entirety of the app should feel faster, from menus to quick actions. Find our full changelog here: https://framer.com/updates/april-update-2025/

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Yo, my name is Benjamin and I'm excited 0:03to introduce REM to Framer. REM is a 0:06font size unit based on a default size 0:10which in browsers often is 16 pixels.0:14REM allows me to design a type scale 0:16relative to that value. So 1 RAM would 0:19equal 16 pixels and 1.25 RAM would equal 0:2520 pixels. In Framer, you would 0:27typically use textile break points for 0:29your responsive typography. But these 0:32have two downsides. One is these values 0:34are pixelbased and thus have no relation 0:37to one another. And two is the 0:40breakpoint values here are not 0:42inherently linked to the break points on 0:45your canvas. This means if I change the 0:48break points, I also need to go ahead 0:50and manually update each and every break 0:53point in each and every text style. REM 0:58can fix both of these issues. For this 1:00demo, I'll go ahead and delete these 1:03text break points. Instead, let's first 1:06have a look at our layout template. As I 1:09mentioned, REM needs a root or a base 1:13value in browsers and in framer. This is 1:1616 pixels. You can find this value on 1:20any breakpoint and it's especially 1:22useful when defining it within a layout 1:26template as this ensures it's consistent 1:29across all pages of your sides with a 1:32single click. You don't have to even 1:35adjust this value. If you like the 16 1:37pixel default, you can keep it as is and 1:40start using RAM directly. However,1:43customizing it can have benefits. We can 1:46even define a base value for each break 1:49point of our site, making every single 1:52text layer that uses RAM inherently 1:55responsive. So, I'm using 16, 18, and 20 1:59pixels. Here, my heading does not use a 2:02text style, so I can go into the size 2:05property and set it to rem directly. And 2:09I'll go ahead and set it to four. And 2:12just like that, we have made our heading 2:15responsive. The values are always linked 2:18to the actual break points. They will 2:21work on any given page. And we can start 2:24designing a type scale without having to 2:27worry about break points. So we can 2:29start bringing over our paragraphs and 2:32our headings to rem. And all we have to 2:35do is set the size to rem and pick a 2:38value to start. We can set both to one.2:43And then have a look at our break 2:50points. This looks okay, but maybe our 2:53headings can be a bit bigger. So, I'll 2:57try to use 1.2 instead of 3:00[Music]3:02one. Nice. That feels a bit better. And 3:06again, it's responsive out of the box.3:08Now, at any point, we could go back into 3:11our layout template and decide we only 3:13want two break points for all our text 3:16styles. So, we can go ahead and set the 3:19base value in the phone breakpoint to 18 3:22pixels as well, matching the tablet 3:24value with a base value of 20 pixels for 3:28desktop and 18 pixels for tablet and 3:32phone. And that's the magic of RAM. It's 3:35simpler yet more flexible as well. Thank 3:39you for watching and stay tuned for more 3:42updates coming soon.

TeachesResponsive Design Typography

Also coversBreakpoints Layout Templates Templates Text Styles

Watch on YouTube ↗

‹ Choosing the right plan for your Framer site (Fundamentals Lesson 28)

Utilizing Collection Lists in Framer (CMS Lesson 4) ›