Layout & Design

Text Properties in Framer (Fundamentals Lesson 17)

Joseph

12:36

37K views

Feb 6, 2025

About this lesson

Great typography is a key pillar of great design — from readability, to user experience, to brand perception there are more than a handful of reasons to give plenty of care to the way we present our text.

In this lesson, we’ll look at the properties available to us in Framer for making our text beautiful and functional.

https://www.youtube.com/watch?v=QJBz9S8JvtY&t=0s Intro

https://www.youtube.com/watch?v=QJBz9S8JvtY&t=18s Starting with a card frame and styles panel overview

https://www.youtube.com/watch?v=QJBz9S8JvtY&t=60s Adding and customizing fills

https://www.youtube.com/watch?v=QJBz9S8JvtY&t=149s Adding and customizing borders

https://www.youtube.com/watch?v=QJBz9S8JvtY&t=236s Adjusting corner radius

https://www.youtube.com/watch?v=QJBz9S8JvtY&t=272s Adding and customizing shadows

https://www.youtube.com/watch?v=QJBz9S8JvtY&t=398s Adjusting opacity vs visibility

https://www.youtube.com/watch?v=QJBz9S8JvtY&t=494s Understanding overflow settings

https://www.youtube.com/watch?v=QJBz9S8JvtY&t=597s Using scroll overflow

https://www.youtube.com/watch?v=QJBz9S8JvtY&t=618s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00great typography is a key pillar of 0:02great design from readability to user 0:05experience to Brand perception there are 0:08more than a handful of reasons to give 0:09plenty of care to the way we present our 0:12text in this lesson we'll look at the 0:14properties available to us in framer for 0:16making our text beautiful and 0:19[Music]0:20functional before we start styling text 0:23let's do a quick recap of how we added 0:25to the canvas in the first place to add 0:27text to the canvas we can head up to the 0:29toolbar at the top and select the text 0:31tool or we can press the letter t on the 0:34keyboard to switch to the text tool and 0:36with the text tool active I can either 0:38click to create an auto withth text box 0:41which is great for headings and I'm 0:43going to do just that and for our 0:46heading I'm just going to type ship 0:48sites with style and when I click away 0:52you can see the bounding box around the 0:53text is tightly snug down and again we 0:55have these grow presets on the 0:57properties panel where we can choose how 0:59and if the text box is allowed to resize 1:03and this first mode is what we see on 1:04the canvas right now we have the text 1:07box fitting the width and the height of 1:09the text another way to achieve this if 1:10you like keyboard shortcuts is just to 1:12press shift a on the keyboard so if I go 1:15to the third mode for example and I make 1:18this text box much larger if I press 1:20shift a boom switches to that mode that 1:22fits both the width and the height of 1:24the content in the text box 1:27alternatively if I switch to the text 1:28tool and click and drag it's going to 1:31create a text box with a fixed width and 1:33a fixed height which is perfect for 1:34things like paragraphs and area text so 1:37I'm actually going to paste in a little 1:39block of text that I copied so I don't 1:41have to type it all out and as cool as 1:43it is to have an explicit width and 1:44height it probably makes more sense most 1:47of the time to allow the height of the 1:49text box to grow and Shrink if there's 1:51more or less text so I'm going to switch 1:53to the middle of the three modes here 1:55which is going to be a fixed width but 1:57an automatic height okay now that we 2:00have some text on the canvas let's talk 2:02text properties I'm going to select my 2:06top heading here and I'm going to head 2:07down just a little bit on the properties 2:10panel until we see the text section and 2:13we'll go through these properties really 2:15just from top to bottom and the first 2:17thing we see here is a feature called 2:19Styles which is a powerful feature for 2:20making centralized reusable style 2:22presets that we're going to learn about 2:24in the next lesson so we're going to 2:26skip that for now the next property we 2:28see is the content of the text box 2:30itself stripped of all its styling and 2:32without having to deal with any layers 2:33on the canvas we can edit or copy or 2:37paste the text that is contained within 2:39the text box we can also dynamically 2:41fetch content from a third party API we 2:44can populate content from the CMS and we 2:46can also override variables when we get 2:49to components but all of these things 2:51are for another lesson let's not worry 2:52about that stuff right now now on to the 2:55creative stuff starting with fonts when 2:57we click to change our font we see a 2:58list of all of the web fonts available 3:00for us to use in framer we also get a 3:03nice preview of each type face directly 3:05within the list itself to minimize 3:07guesswork we've got a search bar at the 3:09top so if you know the name of the font 3:10that you're looking for you can just 3:11start typing it and the list will filter 3:13down and then we also have a drop down 3:15here where we can filter the list down 3:17to show all fonts which is what we're 3:19looking at right now only web fonts that 3:21are sourced from Google and font share 3:23and built into framer custom fonts which 3:26we have uploaded ourselves or you can 3:28filter down to show only the gole gole 3:29web fonts or only the font share fonts 3:32and then variable we'll talk about here 3:34in a moment but coming back to web 3:36versus custom we have over a thousand 3:39web fonts to choose from here but if we 3:41do need to upload a custom font we can 3:43go to custom and then at the bottom we 3:45have an upload button here and when you 3:47click upload you get to choose which 3:49font file you want to upload and you 3:51want to upload a web font if possible 3:54ideally a wa 2 file because they're 3:56optimized for the web they're around 30%3:59smaller and the original wa files so if 4:00you have them both available to you go 4:02with the wa 2 and when you've added your 4:04custom font it'll be available to you 4:06for all the documents in your workspace 4:08but I'm going to go back and choose a 4:10web font and for my headline here I'm 4:13going to choose a font called Roboto 4:15Flex also one last thing I want to point 4:17out before I close this modal is at the 4:19bottom there's a button that says select 4:21all elements with this font which is 4:23really handy if you want to make a 4:24sweeping batch change to the fonts that 4:26you're using on your site the rest of 4:29these default Tex properties will 4:30probably be familiar to you if you're 4:32coming over from other design tools 4:34depending on which font you have 4:35selected you'll see the weights 4:37available to you in that particular font 4:40now in this case it looks like Roboto 4:41Flex only has one weight that seems 4:44strange you'll see why in a sec then we 4:46have color where we get our normal Color 4:48Picker but within the Color Picker we do 4:50get to choose between having a solid 4:52fill a linear gradient a radial gradient 4:55or a conic gradient I'm going to leave 4:57this on a solid fill for now and I'm 4:59going to go with a dark gray but not 5:01quite black then naturally we have the 5:04size of our font which I'm definitely 5:06going to turn up cuz this is meant to be 5:08a great big heading so I'm going to set 5:09this to about 50 and 50 what 50 pixels 5:13we get to choose from the text being a 5:16fixed pixel size or the second option is 5:19to have the text fit the box that it's 5:22within now when I set this to fit the 5:24text size is defaulting to fit 100% of 5:27the width of the container it's in and 5:29we don't have an explicit width set here 5:32so uh we've just got one FR by default 5:34so it's filling the width of its parent 5:37that's fine but I could also set this to 5:39a fixed width or relative width just to 5:41show you that as the Box gets bigger and 5:43smaller the text gets bigger and smaller 5:46as well so now the size is dictated by 5:49the parent container I'm going to press 5:51shift a to go back to fitting the width 5:54and I'm going to come back down here and 5:56instead of fit I'm going to go back to 5:58pixels and again again I'm just going to 6:00set this to a value of 50 cool so back 6:03to a fixed size then we have letter 6:05spacing which is the spacing between 6:07each and every letter here also known as 6:10tracking the default value for this is 6:13also measured in pixels but pixels are 6:15an absolute number and as the font size 6:18gets bigger or smaller uh that value is 6:22going to go from being practical to 6:24impractical potentially so we also have 6:26the option of switching from pixels to 6:28M's and if you're not familiar with M's 6:31they are a relative unit that is 6:33relative to the font size so if I set 6:36this to let's say 0.03 04 that's 004 of 6:4138 whether the font size is big or small 6:44the letter spacing is scaling 6:46proportionally and the same thing goes 6:48for line spacing if I select the text 6:50below where I have two lines of text and 6:52come back down here to line spacing line 6:54spacing is set to M's by default because 6:56you pretty much always want the spacing 6:58between line of text to be in proportion 7:01to the font size itself so I'm going to 7:03increase this to 1.5 and what 1.5 means 7:07in this context is multiply the font 7:09size by a factor of 1.5 in other words 7:13150% of the font size is now the line 7:16spacing but if you want to you can 7:19switch this to percentage base values 7:20and type 150 and get the same result 7:23150% 1.5 M same thing or of course 7:28switching to pixels to set a fixed value 7:30that doesn't change if the Tex size 7:32changes I'm going to leave this on M's 7:34though then we have your typical text 7:36alignment left center right and full 7:39justification I'm going to leave this 7:42text on Center because it's kind of a 7:44subheading and while we're here I'm also 7:46going to knock down the brightness of 7:47the color that I'm using here for this 7:49subheading and now back to that Curious 7:52Thing where enter has all of these 7:54weights to choose from but again when I 7:56switch to robotto flex it's only got one 7:58weight regular 8:00historically type faces on a computer 8:02have consisted of families of separate 8:04font files for different weights and 8:06styles but nowadays some fonts called 8:09variable fonts have adjustable axes that 8:12give us precise control over things like 8:15weight width slant x height and more 8:19depending on how the font was designed 8:21so back to the font picker when we click 8:23to filter the list down one of our 8:25filter options allows us to see only 8:28variable fonts and I chose robotto Flex 8:30on purpose it's a great example of a 8:32font that has a lot of those adjustable 8:34axes for us to play with and when you 8:36have a variable font selected you'll see 8:39this variable property appear on the 8:41properties panel where you can click to 8:42reveal the variable properties of the 8:45font now again this is going to depend 8:46on the font so depending on the font you 8:48choose you may only have the option to 8:50play with the weight you may only have 8:51the option to play with the weight and 8:53the slant it depends on how they design 8:55the font so again this is a great 8:57example of a font that has a ton of 8:58things for us to play with like the 9:00optical size of the font that will make 9:02it more or less readable at smaller 9:04sizes by adjusting the weight and some 9:06of the details of the font the 9:08proportions of the font are actually 9:09changing as I play with this here so 9:11it's pretty wild along with the weight 9:14itself which I can increase make this 9:16look more like a heading and then we 9:18have things like the grade which is 9:20similar to the weight but it's not 9:21actually changing the spacing between 9:23the characters we have the width of the 9:25characters we can stress them out or 9:26make them more condensed we have the 9:28slant so we can achieve kind of an 9:30italic style but to just the degree that 9:33we want it we don't need to go any more 9:35or less slanted than we want to then we 9:37have all these additional parameters 9:39down here with Roboto Flex like how tall 9:41the uppercase letters are how tall the 9:44lowercase letters are we can bring down 9:45the x height of the font and there's 9:47some really interesting details here 9:49like how the dots float above the eyes 9:52they move in a very specific way that 9:55was designed into this font and as you 9:58might imagine all of this stuff can be 9:59applied to a range of texts as well so 10:01if I select a small range here I can 10:03play with all this stuff to emphasize or 10:05deemphasize a specific range of text and 10:09if you've jumped ahead and played with 10:10animations you'll find that each axis of 10:12a variable font is actually an 10:14animatable property so you can do some 10:15pretty cool stuff with that but again 10:17that's for another lesson to take our 10:19font customization even further some 10:21fonts are in a format called open type 10:24and can contain features like alternate 10:26characters ligatures tabular numbers 10:28fractions 10:29and all kinds of other typographic 10:31capabilities when you select a font with 10:33open type features like inter for 10:36example which I'm using down here on my 10:37subheading you'll find open type on the 10:40properties panel where you can click to 10:41bring up this modal now again just like 10:43variable fonts what you see in this 10:45model depends on the font and how the 10:47font was designed but to get into the 10:49head of the font designer and see what 10:51options are available to you you can 10:53actually just hover your cursor over any 10:55one of these features and you get a 10:57little preview at the top of what it 10:59actually does I'm actually going to zoom 11:01in on the canvas and let's take a really 11:03close look at the letter A here we 11:05actually have a character variant with 11:07an enter called alternative a and if I 11:10turn that on watch the a boom it's a 11:13whole different letter form for the same 11:15letter and in the future if I know the 11:17name of the open type feature that I'm 11:18looking for that I want to enable I can 11:20also just search for it here in the 11:22search bar but this is a great place to 11:24kind of poke around and discover what 11:26your favorite fonts are capable of and a 11:28lot of fonts are both variable and 11:30support open type features which gives 11:32you a ton of customization options 11:35within a single font so far we've only 11:38covered the text properties that show up 11:40by default but you'll find even more by 11:42clicking on the plus icon next to text 11:45like Shadows stroke paragraph spacing 11:49transforms like title case or all 11:51uppercase decorations like underline and 11:54strikethrough and my favorite called 11:56balance which allows multiple lines of 11:58text to have their lines broken in such 12:01a way that each line is roughly the same 12:03width which can make headlines more 12:04readable and Visually appealing and 12:07there you have it now you know how to 12:09insert and style text in framer with 12:11over a thousand web fonts built right in 12:14many of which have support for variable 12:16and open type features that give you an 12:18insane amount of control over your 12:21typography that's it for this one I'll 12:23see you in the next one

TeachesTypography

Also coversComponent Variants Components Custom Cursors Hover & Press Keyboard Shortcuts Sizing Spacing Variables

Watch on YouTube ↗

‹ 2024 Framer Awards: Announcing the Winners

Framer Update: Layout Templates ›