Layout & Design

Framer Update: Fit Text

Framer Update: Fit Text

Framer Update: Fit Text

Benjamin

·

3:29

·

33K views

·

About this lesson

Introducing Fit Text—a new feature allowing you to design text that scales to fit. Design bold headers that resize along with your browser, or any section. Simply create a Text Layer, head over to the Size property and set it to Fit. You can also use Fit Text on multiple lines of text, which you can create by hitting enter when you want your line to break. Define minimum and maximum font sizes by using the Min Width and Max Width properties. This can be done on the Text Layer itself, or any parent layer. Best of all, this feature keeps your sites blazing fast. Framer can render your typography at the right size even before JavaScript runs on your website. No flashes on refresh, and no expensive calculations on resize. We think you’ll love it. You can find a demo here: https://fit-text.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00yo my name is Benjamin and in this video0:03I'm very excited to introduce one of my0:06favorite framer features yet and it's0:09called fit text0:16so let's have a look at how this works0:19here I have a very simple page with a0:22header and a sub line0:25and we would like both to occupy the0:27entirety of the page so the first thing0:30I'll do is I'll set the width to fill0:33and you'll be able to do this as long as0:36the parent layer is a stack as you can0:39see the font size is set to 100 pixels0:42so changing the content won't scale our0:46text0:47however with this release we can now set0:50the size to fit and just like that it0:54will occupy the entirety of our page0:58and we can still edit the contents right1:00here on the canvas and the size will1:02adjust in real time and we can preview1:05how this will work in a responsive1:08setting by simply selecting the page and1:11resizing it right here on the canvas1:14our header now always occupies the1:16available space and skills to fit on any1:19device1:20at this point you might be wondering1:23what about multiple lines of text1:26and rest assured we also support this1:29use case so I'll write some copy here1:31like I normally would the only1:34difference being I'll manually add my1:36LINE Breaks by hitting enter anytime I1:39want my text to wrap onto the next line1:42next let's ensure that our text box has1:46the correct sizing properties so I'll1:48set the width to fill and the height to1:51auto1:52and finally just like before we'll set1:55the font size to fit and there you go1:58it's incredibly simple to use and it2:01even supports multiple lines what's2:04especially exciting about this feature2:06is that it's designed with your site's2:09first load in mind unlike many other2:12implementations this text will always2:15render at the right size even before2:18JavaScript runs on your website and we2:21don't do expensive calculations every2:24time you resize so your site doesn't get2:26slow and the resizing is as smooth as it2:29could be and you can also control2:31minimum and maximum sizing simply by2:34using the Min and Max with properties2:38I'll select both layers and I'll give2:40them a maximum width of 1400 pixels and2:44if we now resize our page our text won't2:47scale beyond that maximum2:50we can also make sure they stay centered2:54and there we go and that's pretty much2:57it for this video2:59we're super excited about this new3:01feature and we can't wait to see how3:03you'll end up using it3:05thank you so much for watching and stay3:08tuned for more updates coming soon

Watch on YouTube ↗

More in this topic

8 Framer shortcuts you're probably sleeping on4:19
8 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Sharing Vector Sets Across Projects (Vectors Lesson 7)3:41
Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)3:38
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
Animating Vectors in Framer (Vectors Lesson 5)4:25
Animating Vectors in Framer (Vectors Lesson 5)
Layout & Design4K views · 3 months ago
Customizing Vectors with Variables in Framer (Vectors Lesson 4)4:59
Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
Replace component instances site-wide in Framer1:39
Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)6:58
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)
Layout & Design3K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.