Layout & Design

Text Styles in Framer (Fundamentals Lesson 19)

Joseph

7:06

25K views

Feb 20, 2025

About this lesson

Just about everything we covered about color styles in the previous lesson applies directly to text as well — with a few small differences that are naturally specific to text. Now, let’s take a look at the ins and outs of Text Styles in Framer.

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

https://www.youtube.com/watch?v=pyiqBksVljQ&t=10s Creating text styles in Framer

https://www.youtube.com/watch?v=pyiqBksVljQ&t=42s Applying heading tags and understanding hierarchy

https://www.youtube.com/watch?v=pyiqBksVljQ&t=74s Connecting layers to a shared style

https://www.youtube.com/watch?v=pyiqBksVljQ&t=116s Overriding color and alignment in text styles

https://www.youtube.com/watch?v=pyiqBksVljQ&t=172s Detaching from a text style

https://www.youtube.com/watch?v=pyiqBksVljQ&t=194s Managing text styles in the Assets panel

https://www.youtube.com/watch?v=pyiqBksVljQ&t=228s Why some text styles can’t be deleted

https://www.youtube.com/watch?v=pyiqBksVljQ&t=266s Finding and detaching applied styles

https://www.youtube.com/watch?v=pyiqBksVljQ&t=305s Merging similar text styles

https://www.youtube.com/watch?v=pyiqBksVljQ&t=329s Applying styles to all headings of the same tag

https://www.youtube.com/watch?v=pyiqBksVljQ&t=386s 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:00just about everything we covered about 0:02color styles in the previous lesson 0:04applies directly to text as well with a 0:06few small differences that are naturally 0:08specific to text now let's take a look 0:11at all the ins and outs of text Styles 0:14in 0:15[Music]0:17framer just like we did for colors I'll 0:20start by selecting a layer to create a 0:22style from with my heading here selected 0:25I'll head down to the text section of 0:26the properties panel where we see Styles 0:29and then button here where we can view 0:31all of the text styles that are in our 0:33project currently there aren't any so 0:36I'll click to create a new style and 0:38then I get to choose a heading tag or a 0:40paragraph tag now if you're not familiar 0:42with these heading tags they are in 0:45order of hierarchical importance from 0:47one being the top most important heading 0:50on the page usually the largest usually 0:52the first heading on the page all the 0:54way down to heading six or H6 which is 0:57the least significant least important 1:00and least hierarchically dominant 1:01heading that we have on the page since 1:04this style is always going to be used 1:06for the main heading on any given page 1:08I'm going to choose heading one and 1:10that's it now we have our heading one 1:12style that we can go and apply to all of 1:14the main headings on all of the pages of 1:16our site but we only have one H1 on this 1:19page so let's do another example I'm 1:21going to grab the price down here which 1:24is another pretty dominant heading that 1:25we have and I'll create a new style and 1:28this one I'll name heading two cuz 1:30hierarchically this is below that main 1:33heading that we have at the top cool so 1:35now that we have a heading two I can 1:37select this other price and I can choose 1:39heading to to apply it and you might be 1:41thinking okay nothing really happened 1:43but what happened was this layer became 1:46connected to the style and now that both 1:48of these text layers are connected to 1:50the style I can go and edit it and now 1:53all of these properties are connected to 1:54the style therefore connected to all of 1:57the layers that share that style so just 1:59for the sake example I'll play with the 2:01size here so you can see that both of 2:03these text layers do in fact change 2:06together but we also have this one in 2:07the middle so let me select that and I'm 2:10going to apply the same textile to that 2:13one as well that heading to now it looks 2:15like it disappeared because part of the 2:17definition of this heading 2 is the 2:20color black but for our convenience so 2:23that we don't have to create extra 2:25styles for different colors and 2:26Alignment we can actually come over here 2:28on the properties panel and we can 2:30override the color we can also override 2:32the alignment but I'm going to override 2:34the color here to make it white and all 2:36of the other properties besides the 2:38color are still connected to heading 2 2:41so again if I go and edit this it is 2:44still just like the other two all three 2:46of them are still connected to this 2:48heading 2 style we just don't have to 2:50worry about the color issue because 2:52we're able to override colors 2:54individually on a layer by layer basis 2:56and if I wanted this layer to completely 2:58deviate from the style I changed my mind 3:01I can come up here and click this little 3:02X to detach from the style and then I 3:05get my regular text properties back 3:07where I can make a change and it won't 3:09affect anything else but this layer now 3:11let's look at how to edit and manage our 3:14text styles again I'm going to jump to 3:16another version of this document where 3:18I've created and applied text Styles 3:20everywhere that makes sense and if I 3:22head over here to the assets panel again 3:24you'll see that now we have our color 3:25styles from earlier we have our link 3:27styles from earlier and we have our text 3:29Styles which I've just created and much 3:32like our other types of styles we can 3:33sort them alphabetically we can create 3:35new folders or we can create a new style 3:38directly from the assets panel here and 3:41we can also click the ellipses here next 3:42to a style in order to rename it 3:45duplicate it or delete it but you'll 3:46notice that delete is actually gray out 3:48for this heading the reason for that is 3:50that you can't delete a Tex stle that is 3:53currently being used on a text layer 3:55somewhere in the document unlike color 3:57styles which will detach themselves 3:59automatically 4:00textiles are a little bit more serious 4:02in that regard so in this case I would 4:05want to click on the Ellipsis choose 4:07find so we can figure out which text 4:08layer is the one that this is applied to 4:11and on my homepage here I have this 4:13particular text layer which I can then 4:15go and detach from the textile now if I 4:18head back over to the assets panel and 4:20look again delete is still grayed out 4:23that's actually because if I go to find 4:25it turns out there's another page we 4:27actually get the title of the page where 4:29this style is being used on a layer and 4:32if I click on that it'll take me 4:33directly to that other page and I can 4:34see that I actually have kind of a style 4:36guide here for myself where I have the 4:38style applied here as well so I'm going 4:41to detach it from there and now we 4:43should be good to go back over to 4:44heading three it's not being used 4:46anywhere now I have the option to delete 4:49it and one last thing that I want to 4:51show you is if you have two similar 4:53Styles like in this case I have this H1 4:55and this H2 and the main difference here 4:59is just a size of 60 versus a size of 50 5:02what I could do is click the Ellipsis 5:05and say that I would like to replace 5:06this entire Style with the style of 5:10heading one and with this it's going to 5:12go in one big batch find every layer 5:14using heading two and switch it to 5:17heading one and then since heading two 5:19isn't applied to any layers anymore I 5:21can come back here and I can delete it 5:23as well and then the very last thing you 5:26might have noticed on that overflow menu 5:28is that when I click for example on this 5:30H1 heading there's the option here to 5:33apply it to all H1s now you might be 5:35thinking if I had text somewhere in my 5:38document that was considered a heading 5:39one wouldn't it be considered heading 5:41one because it's connected to this 5:43heading one style already and the answer 5:45is no you can Define text as a heading 5:48one a heading two a heading three a 5:50paragraph Etc without connecting it to a 5:53style so before you even go and set up 5:55your Styles you may have already 5:56determined that a heading should be 5:58considered and H1 and that's at the very 6:01bottom of the properties panel in the 6:03accessibility section there's something 6:05here called a tag where we can say to a 6:08search engine or to a screen reader that 6:10this is hierarchically the top level of 6:13heading and if we've done so without 6:15applying a style we can quickly just go 6:17to the assets panel and use that option 6:20that says apply to all H1s in one click 6:23that'll apply our heading one style to 6:26every text layer that has an H1 tag and 6:29there you have it now you know how color 6:31text and Link Styles help you to create 6:33a solid foundation to make your design 6:35process more efficient and your projects 6:37more consistent so spend a little extra 6:39time up front to get your Styles dialed 6:41in and you'll save countless hours of 6:44tedious unnecessary work for yourself 6:46down the road that's it for this one but 6:48stay tuned because in the next lesson 6:50we're going to look at how to theme our 6:52color styles for light mode and dark 6:54mode

TeachesText Styles

Also coversColor Styles Links SEO Audit Semantic Tags Themes

Watch on YouTube ↗

‹ Framer Update: Scale Tool (K)

Link and Color Styles in Framer (Fundamentals Lesson 18) ›