HyperFramer Symbol
hyperframer
Framer Typography

August 2, 2024 14:30

Framer Typography

Framer's July Update now supports OpenType features, enhancing typography with custom fonts like Inter and Fontshare for richer design possibilities.

Framer Typography
Framer Typography
```

Introduction to OpenType Support in Framer

Yo, my name is Benjamin, and today I'm excited to delve into the [Framer](https://www.framer.com/?via=yordanoff) typography features that give you more control over your fonts, specifically the OpenType support. Let's explore how this new feature enhances your design capabilities.

Navigating the OpenType UI

Start by selecting your text layer. Under the text section in the property panel, you'll now find an OpenType property. Here, all the OpenType features supported by your selected font will be visible. For this demonstration, I'm using "Inter Display." Hover over any label to get a preview and use the segment control to compare on and off states. For example, enabling a stylistic set will immediately show updates on the canvas.

Given the multitude of OpenType features, a search function is integrated. For instance, you can look up "YES" to find all enabled properties like contextual alternates and the stylistic set we turned on. You can also scroll through the panel to see various OpenType categories such as stylistic sets, character variants, ligatures, numbers, letter case, and more.

Disabling contextual alternates can revert the multiplication symbol to an "X," similar to changes in arrow symbols that you can generate by combining dashes and caret symbols on your keyboard—any font supporting this OpenType feature will work.

Font Updates and Additional Features

Alongside OpenType support, the default typeface "Inter" has been updated to version 4.0 to ensure it supports all OpenType features. Additionally, "Inter Display" has been added, replacing the Google Font version to ensure comprehensive OpenType feature support.

Useful OpenType Features Demonstrated

Focus on numbers, specifically fractions, by selecting your text layer and enabling the fractions property under the numbers category. This feature provides the proper fractional notation.

Another helpful feature is tabular numbers, which give all numbers an equal width. This ensures no layout jumps when numbers change or animate. Some typefaces like Inter also offer circled and squared character variations, which can be enabled through specific stylistic sets. For example, stylistic set 5 for circled characters and set 6 for squared ones.

Common numerical OpenType features include superscript and subscript. Superscript allows characters to render above the line and can include letters. For a focused application, you can select a portion of your text layer and apply these specific OpenType features. Similarly, subscript renders characters below the line, easily accessible via the search function.

Enhanced Font Variants and Legibility

Using letter and number variants can drastically alter the font's look and feel while addressing legibility issues. For instance, "Inter" offers many characters like an alternative capital "G" or a sharper number "3." Many fonts also include single-story "a" alternatives to default double-story "a" and offer solutions for differentiating capital "I" from lowercase "L."

Note that available OpenType properties differ by font. While not yet available for Google Fonts, these features will work on any "share" font or custom font you've uploaded.

Advantages and Future Updates

We're thrilled to enhance typography in Framer with these new OpenType features. They offer more control over your fonts and add a unique touch to your projects. Enjoy exploring these updates and stay tuned for more exciting features coming soon.

```
Framer Typography
Framer Typography

August 2, 2024 14:30

Framer Typography

Framer's July Update now supports OpenType features, enhancing typography with custom fonts like Inter and Fontshare for richer design possibilities.

Framer Typography
```

Introduction to OpenType Support in Framer

Yo, my name is Benjamin, and today I'm excited to delve into the [Framer](https://www.framer.com/?via=yordanoff) typography features that give you more control over your fonts, specifically the OpenType support. Let's explore how this new feature enhances your design capabilities.

Navigating the OpenType UI

Start by selecting your text layer. Under the text section in the property panel, you'll now find an OpenType property. Here, all the OpenType features supported by your selected font will be visible. For this demonstration, I'm using "Inter Display." Hover over any label to get a preview and use the segment control to compare on and off states. For example, enabling a stylistic set will immediately show updates on the canvas.

Given the multitude of OpenType features, a search function is integrated. For instance, you can look up "YES" to find all enabled properties like contextual alternates and the stylistic set we turned on. You can also scroll through the panel to see various OpenType categories such as stylistic sets, character variants, ligatures, numbers, letter case, and more.

Disabling contextual alternates can revert the multiplication symbol to an "X," similar to changes in arrow symbols that you can generate by combining dashes and caret symbols on your keyboard—any font supporting this OpenType feature will work.

Font Updates and Additional Features

Alongside OpenType support, the default typeface "Inter" has been updated to version 4.0 to ensure it supports all OpenType features. Additionally, "Inter Display" has been added, replacing the Google Font version to ensure comprehensive OpenType feature support.

Useful OpenType Features Demonstrated

Focus on numbers, specifically fractions, by selecting your text layer and enabling the fractions property under the numbers category. This feature provides the proper fractional notation.

Another helpful feature is tabular numbers, which give all numbers an equal width. This ensures no layout jumps when numbers change or animate. Some typefaces like Inter also offer circled and squared character variations, which can be enabled through specific stylistic sets. For example, stylistic set 5 for circled characters and set 6 for squared ones.

Common numerical OpenType features include superscript and subscript. Superscript allows characters to render above the line and can include letters. For a focused application, you can select a portion of your text layer and apply these specific OpenType features. Similarly, subscript renders characters below the line, easily accessible via the search function.

Enhanced Font Variants and Legibility

Using letter and number variants can drastically alter the font's look and feel while addressing legibility issues. For instance, "Inter" offers many characters like an alternative capital "G" or a sharper number "3." Many fonts also include single-story "a" alternatives to default double-story "a" and offer solutions for differentiating capital "I" from lowercase "L."

Note that available OpenType properties differ by font. While not yet available for Google Fonts, these features will work on any "share" font or custom font you've uploaded.

Advantages and Future Updates

We're thrilled to enhance typography in Framer with these new OpenType features. They offer more control over your fonts and add a unique touch to your projects. Enjoy exploring these updates and stay tuned for more exciting features coming soon.

```