DEV Community

Cover image for Advanced Typography: Using OTF Font Features in Android
Denizhan Dalgıç
Denizhan Dalgıç

Posted on • Originally published at denizhandalgic.Medium

Advanced Typography: Using OTF Font Features in Android

When it comes to typography, there’s more to it than just choosing between medium and semibold font weights. Modern OpenType fonts come packed with a variety of advanced font features that allow for a more sophisticated and visually stunning typographic experience.

These features, ranging from ligatures to contextual alternates and beyond, offer designers and typographers greater control over how text is displayed, resulting in more creative and expressive typography. Whether working on a design project or simply trying to make your text stand out, these font features are essential for achieving the best possible results.

Please note that the features mentioned are only available in OpenType fonts. Therefore, the font file you use must have .otf extension. Additionally, font features and their names may differ from font to font. Not all fonts may support the feature you are looking for.

To provide a clear example, I will be using Inter font, which is widely used and has detailed documentation. The following image illustrates ss01 and ss02 features of the font.

Image taken from https://rsms.me/inter/

After adding the OTF file to /res/font folder, we need to set the attribute to use features. If we don’t modify the features, the font will be presented in its default settings.

We need to set the attribute as in the example:

<TextView
  tools:text="Placeholder text"
  android:fontFeatures="ss01" />
Enter fullscreen mode Exit fullscreen mode

And, when you want to combine features, separate the feature names with commas as in the example:

<TextView
  tools:text="Placeholder text"
  android:fontFeatures="ss01, ss02" />
Enter fullscreen mode Exit fullscreen mode

But where are those abbreviations coming from? When you visit the lab, you’ll see a section named features in the sidebar. There, you can play with any features you like and see the results of the change on the left side. The feature names are also given there for reference.

And there you go. This is an example of how you can do advanced text styling in TextView.

Disclaimer: The cover image is created with AI.

Top comments (0)