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 [Music] functional before we start styling text let's do a quick recap of how we added to the canvas in the first place to add text to the canvas we can head up to the toolbar at the top and select the text tool or we can press the letter t on the keyboard to switch to the text tool and with the text tool active I can either click to create an auto withth text box which is great for headings and I'm going to do just that and for our heading I'm just going to type ship sites with style and when I click away you can see the bounding box around the text is tightly snug down and again we have these grow presets on the properties panel where we can choose how and if the text box is allowed to resize and this first mode is what we see on the canvas right now we have the text box fitting the width and the height of the text another way to achieve this if you like keyboard shortcuts is just to press shift a on the keyboard so if I go to the third mode for example and I make this text box much larger if I press shift a boom switches to that mode that fits both the width and the height of the content in the text box alternatively if I switch to the text tool and click and drag it's going to create a text box with a fixed width and a fixed height which is perfect for things like paragraphs and area text so I'm actually going to paste in a little block of text that I copied so I don't have to type it all out and as cool as it is to have an explicit width and height it probably makes more sense most of the time to allow the height of the text box to grow and Shrink if there's more or less text so I'm going to switch to the middle of the three modes here which is going to be a fixed width but an automatic height okay now that we have some text on the canvas let's talk text properties I'm going to select my top heading here and I'm going to head down just a little bit on the properties panel until we see the text section and we'll go through these properties really just from top to bottom and the first thing we see here is a feature called Styles which is a powerful feature for making centralized reusable style presets that we're going to learn about in the next lesson so we're going to skip that for now the next property we see is the content of the text box itself stripped of all its styling and without having to deal with any layers on the canvas we can edit or copy or paste the text that is contained within the text box we can also dynamically fetch content from a third party API we can populate content from the CMS and we can also override variables when we get to components but all of these things are for another lesson let's not worry about that stuff right now now on to the creative stuff starting with fonts when we click to change our font we see a list of all of the web fonts available for us to use in framer we also get a nice preview of each type face directly within the list itself to minimize guesswork we've got a search bar at the top so if you know the name of the font that you're looking for you can just start typing it and the list will filter down and then we also have a drop down here where we can filter the list down to show all fonts which is what we're looking at right now only web fonts that are sourced from Google and font share and built into framer custom fonts which we have uploaded ourselves or you can filter down to show only the gole gole web fonts or only the font share fonts and then variable we'll talk about here in a moment but coming back to web versus custom we have over a thousand web fonts to choose from here but if we do need to upload a custom font we can go to custom and then at the bottom we have an upload button here and when you click upload you get to choose which font file you want to upload and you want to upload a web font if possible ideally a wa 2 file because they're optimized for the web they're around 30% smaller and the original wa files so if you have them both available to you go with the wa 2 and when you've added your custom font it'll be available to you for all the documents in your workspace but I'm going to go back and choose a web font and for my headline here I'm going to choose a font called Roboto Flex also one last thing I want to point out before I close this modal is at the bottom there's a button that says select all elements with this font which is really handy if you want to make a sweeping batch change to the fonts that you're using on your site the rest of these default Tex properties will probably be familiar to you if you're coming over from other design tools depending on which font you have selected you'll see the weights available to you in that particular font now in this case it looks like Roboto Flex only has one weight that seems strange you'll see why in a sec then we have color where we get our normal Color Picker but within the Color Picker we do get to choose between having a solid fill a linear gradient a radial gradient or a conic gradient I'm going to leave this on a solid fill for now and I'm going to go with a dark gray but not quite black then naturally we have the size of our font which I'm definitely going to turn up cuz this is meant to be a great big heading so I'm going to set this to about 50 and 50 what 50 pixels we get to choose from the text being a fixed pixel size or the second option is to have the text fit the box that it's within now when I set this to fit the text size is defaulting to fit 100% of the width of the container it's in and we don't have an explicit width set here so uh we've just got one FR by default so it's filling the width of its parent that's fine but I could also set this to a fixed width or relative width just to show you that as the Box gets bigger and smaller the text gets bigger and smaller as well so now the size is dictated by the parent container I'm going to press shift a to go back to fitting the width and I'm going to come back down here and instead of fit I'm going to go back to pixels and again again I'm just going to set this to a value of 50 cool so back to a fixed size then we have letter spacing which is the spacing between each and every letter here also known as tracking the default value for this is also measured in pixels but pixels are an absolute number and as the font size gets bigger or smaller uh that value is going to go from being practical to impractical potentially so we also have the option of switching from pixels to M's and if you're not familiar with M's they are a relative unit that is relative to the font size so if I set this to let's say 0. 03 04 that's 004 of 38 whether the font size is big or small the letter spacing is scaling proportionally and the same thing goes for line spacing if I select the text below where I have two lines of text and come back down here to line spacing line spacing is set to M's by default because you pretty much always want the spacing between line of text to be in proportion to the font size itself so I'm going to increase this to 1. 5 and what 1.
5 means in this context is multiply the font size by a factor of 1. 5 in other words 150% of the font size is now the line spacing but if you want to you can switch this to percentage base values and type 150 and get the same result 150% 1.
