Framer Update, Layout & Design

Framer Update: OpenType

Benjamin

5:39

12K views

Jul 17, 2024

About this lesson

The July Update brings OpenType support to Framer. Get much more out of your typefaces, like Inter. Select any custom or Fontshare font, then head over to the properties to explore OpenType features. With search and realtime previews, you can quickly learn more about each OpenType feature your selected font supports. Following Text Effects, Text Balance, Text Stroke, and Text Masks, typography in Framer is now better than ever. More here: https://framer.com/updates/july-update-2024

🌞 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:00yo my name is Benjamin and this is open 0:04type support in framer giving you much 0:07more control over your fonts in this 0:10demo project I'll walk you through a few 0:12fun examples and we'll have a look at 0:15the new UI to start I'll select my text 0:18layer and under the text section in the 0:22property panel you'll Now find an open 0:25type property here you'll find all open 0:28type features that your selected font 0:31supports I'm using inter display to 0:35better understand what these properties 0:37do you can hover over the label to get a 0:40preview you can also hover the segment 0:43control to compare the on and off States 0:46and when enabling this stylistic set 0:49you'll notice the three update on the 0:51canvas as well and because there can be 0:54many open type features we also 0:56integrated search for example I can 1:00search for yes to find all enabled 1:03properties like King contextual 1:06alternates and the stylistic set we 1:09enabled and we can also scroll this 1:12panel to explore all open type features 1:15available for this font which are 1:18divided in different categories like 1:21stylistic sets character variants 1:24ligatures numbers letter case contextual 1:28alternates and more here you can see the 1:32multiplication symbol will revert to an 1:35X if we disable the contextual 1:38alternates and the same is true for 1:40Arrow symbols that you can draw just by 1:43combining dashes with carrots on your 1:46keyboard which should work for any font 1:49supporting this open type feature 1:52speaking of fonts in this release we 1:55also updated our default type face inter 1:58to version 4.0 making sure it supports 2:02all open type features out of the box 2:06plus we've added inter display as well 2:09replacing the Google font version 2:12ensuring you get all open type features 2:15here as well next let's have a look at a 2:18few more useful open type 2:20features like fractions I'll select my 2:24text layer and then I'll find the 2:26numbers category and here I can enable 2:30the fractions property giving us the 2:33proper fractional notation another very 2:37useful feature is tabular numbers 2:40enabling this gives all numbers an equal 2:44width making sure that when these 2:46numbers change or when you animate these 2:49numbers there will be no jumps in your 2:52layout some type faces like inter even 2:56support circled and squared variations 3:00of their characters which can be enabled 3:03through a stylistic set here it is 3:06stylistic set 3:085 and then for the squared variation 3:12it's stylistic set six other common open 3:16type features for numbers include 3:19superscript and subscript superscript 3:23allows you to render characters above 3:25the 3:26line here you'll notice it can also 3:30include 3:32letters but luckily we can also select a 3:35portion of our text layer to then 3:38exclusively apply specific open type 3:41features to that selection similarly 3:45subscript allows us to render characters 3:47below the line and here we can use 3:49search again for easy 3:53access and there we go next you can use 3:56letter and number variants to drastic 4:00change the look and feel of Any Given 4:03font and they can also help fix 4:05legibility issues inter for example 4:09comes with many different characters 4:12like this alternative capital 4:16[Music]4:21G or this much sharper number 4:27three and many fonts will also include a 4:30single story a next to the default 4:33double story a finally it can be tricky 4:37to differentiate the capital I from the 4:41lowercase L this is where using an 4:44alternative character for either of 4:46these can help improve legibility as 4:49mentioned before the open type 4:51properties available differ per font 4:54while these features will not yet be 4:56available for Google fonts they will 4:58work on any any font share font and any 5:02custom one that you uploaded we're 5:04incredibly excited to improve typography 5:07in framer through these new open type 5:10features giving you much more control 5:13over your fonts and allowing you to add 5:16a personal touch to your sites we hope 5:19you enjoy this update thank you so much 5:22for watching and as always stay tuned 5:26for more updates coming soon

TeachesTypography

Also coversComponent Variants Hover & Press Keyboard Shortcuts

Watch on YouTube ↗

‹ Framer Update: Drafts

Framer Update: Text Effects ›