Tips & tricks
- Responsive
- Text
Tips & tricks
- Responsive
- Text
Tips & tricks
- Responsive
- Text
The Key to Achieving Responsive Text in Framer
In this Framer tutorial, I'm revealing the new way to handle responsive text that most people don't know about. Forget manually setting sizes for every breakpoint - now you can scale your entire typography system with a single value. You'll learn how to use REM units to create perfectly responsive text that automatically adapts to any screen size.
Posted by
Nandi
Table of contents
The old way: Manually setting sizes for each breakpoint
Before this update, the only way to make text responsive was by manually assigning different font sizes to each breakpoint inside a text style. Let’s say you had an H1 heading. You’d go into your text style settings and define:
The old way: Manually setting sizes for each breakpoint
Before this update, the only way to make text responsive was by manually assigning different font sizes to each breakpoint inside a text style. Let’s say you had an H1 heading. You’d go into your text style settings and define:
The old way: Manually setting sizes for each breakpoint
Before this update, the only way to make text responsive was by manually assigning different font sizes to each breakpoint inside a text style. Let’s say you had an H1 heading. You’d go into your text style settings and define:
The old way of setting breakpoints.
The old way of setting breakpoints.
The old way of setting breakpoints.
48px for desktop
43px for tablet
38px for mobile
48px for desktop
43px for tablet
38px for mobile
48px for desktop
43px for tablet
38px for mobile
Text changing with breakpoints.
Text changing with breakpoints.
Text changing with breakpoints.
Not only did you have to do that every time for every text style, but if you ever wanted to make a global change (like scaling everything down for mobile) you’d have to update each breakpoint individually. And it gets worse.
These breakpoints aren’t linked to your actual responsive canvas settings. So even if you changed your tablet breakpoint from 810px to 600px, your styles wouldn’t reflect that automatically. The breakpoints in the styles are tied to fixed min-width values, which means there’s a disconnect between your layout and your typography.
Also styles only work on static text layers. If you’re using dynamic components like Staggered Cycle to animate words, you can’t apply text styles to them, which means you lose responsiveness altogether unless you manually set the font sizes. That’s a lot of work for something that should be seamless.
The new way: Base font sizes + REM units
Framer’s new method is beautifully simple: you define a base font size at the breakpoint level and then use REM units (like 1rem, 2rem, etc.) for your typography.
Not only did you have to do that every time for every text style, but if you ever wanted to make a global change (like scaling everything down for mobile) you’d have to update each breakpoint individually. And it gets worse.
These breakpoints aren’t linked to your actual responsive canvas settings. So even if you changed your tablet breakpoint from 810px to 600px, your styles wouldn’t reflect that automatically. The breakpoints in the styles are tied to fixed min-width values, which means there’s a disconnect between your layout and your typography.
Also styles only work on static text layers. If you’re using dynamic components like Staggered Cycle to animate words, you can’t apply text styles to them, which means you lose responsiveness altogether unless you manually set the font sizes. That’s a lot of work for something that should be seamless.
The new way: Base font sizes + REM units
Framer’s new method is beautifully simple: you define a base font size at the breakpoint level and then use REM units (like 1rem, 2rem, etc.) for your typography.
Not only did you have to do that every time for every text style, but if you ever wanted to make a global change (like scaling everything down for mobile) you’d have to update each breakpoint individually. And it gets worse.
These breakpoints aren’t linked to your actual responsive canvas settings. So even if you changed your tablet breakpoint from 810px to 600px, your styles wouldn’t reflect that automatically. The breakpoints in the styles are tied to fixed min-width values, which means there’s a disconnect between your layout and your typography.
Also styles only work on static text layers. If you’re using dynamic components like Staggered Cycle to animate words, you can’t apply text styles to them, which means you lose responsiveness altogether unless you manually set the font sizes. That’s a lot of work for something that should be seamless.
The new way: Base font sizes + REM units
Framer’s new method is beautifully simple: you define a base font size at the breakpoint level and then use REM units (like 1rem, 2rem, etc.) for your typography.
Setting REM units.
Setting REM units.
Setting REM units.
Let’s break it down:
Set your base font size per breakpoint
Select your desktop breakpoint and look for the Typography section in the right panel. You’ll now see a Base field, that’s your root font size. For example, set it to 20px on desktop, 18px on tablet, and 16px on mobile.
Use REM in your text styles
Instead of defining your text size in pixels, switch to rem. So your H1 might be 2.4rem, and Body could be 1rem. Since 1rem = your base font size, all your text will scale proportionally when breakpoints change.
Apply a layout template
To keep your base font sizes consistent across pages, set them inside a layout template. Framer lets you create these from the Assets panel under Templates. Define your typography base sizes once in the layout template, and every page that uses it will inherit them automatically.
This means you now have a single point of control for responsive typography. Want all your text a bit larger on mobile? Just increase the mobile base size. Done.
Make it the default
If you’re serious about consistency, start every project by setting up a layout template with your base font sizes. This becomes your foundation, and every page will follow its rules.
It might take two extra minutes up front, but it’ll save you hours in the long run. Responsive text doesn’t have to be a pain. With base font sizes and rem units, Framer has made it dead simple to create typography that scales beautifully across all devices, without the manual labor. Now that you know the key, go update your styles and let Framer do the heavy lifting.
Let’s break it down:
Set your base font size per breakpoint
Select your desktop breakpoint and look for the Typography section in the right panel. You’ll now see a Base field, that’s your root font size. For example, set it to 20px on desktop, 18px on tablet, and 16px on mobile.
Use REM in your text styles
Instead of defining your text size in pixels, switch to rem. So your H1 might be 2.4rem, and Body could be 1rem. Since 1rem = your base font size, all your text will scale proportionally when breakpoints change.
Apply a layout template
To keep your base font sizes consistent across pages, set them inside a layout template. Framer lets you create these from the Assets panel under Templates. Define your typography base sizes once in the layout template, and every page that uses it will inherit them automatically.
This means you now have a single point of control for responsive typography. Want all your text a bit larger on mobile? Just increase the mobile base size. Done.
Make it the default
If you’re serious about consistency, start every project by setting up a layout template with your base font sizes. This becomes your foundation, and every page will follow its rules.
It might take two extra minutes up front, but it’ll save you hours in the long run. Responsive text doesn’t have to be a pain. With base font sizes and rem units, Framer has made it dead simple to create typography that scales beautifully across all devices, without the manual labor. Now that you know the key, go update your styles and let Framer do the heavy lifting.
Let’s break it down:
Set your base font size per breakpoint
Select your desktop breakpoint and look for the Typography section in the right panel. You’ll now see a Base field, that’s your root font size. For example, set it to 20px on desktop, 18px on tablet, and 16px on mobile.
Use REM in your text styles
Instead of defining your text size in pixels, switch to rem. So your H1 might be 2.4rem, and Body could be 1rem. Since 1rem = your base font size, all your text will scale proportionally when breakpoints change.
Apply a layout template
To keep your base font sizes consistent across pages, set them inside a layout template. Framer lets you create these from the Assets panel under Templates. Define your typography base sizes once in the layout template, and every page that uses it will inherit them automatically.
This means you now have a single point of control for responsive typography. Want all your text a bit larger on mobile? Just increase the mobile base size. Done.
Make it the default
If you’re serious about consistency, start every project by setting up a layout template with your base font sizes. This becomes your foundation, and every page will follow its rules.
It might take two extra minutes up front, but it’ll save you hours in the long run. Responsive text doesn’t have to be a pain. With base font sizes and rem units, Framer has made it dead simple to create typography that scales beautifully across all devices, without the manual labor. Now that you know the key, go update your styles and let Framer do the heavy lifting.
