CSS Font Features, OpenType features

Controlling the contextual alternate in CSS when your font uses different characters for the same letters. It can be fun but sometimes it can also look a bit strange when 2 exacts consecutive letters look different. The good thing is we can usually have some control over this in CSS.

CSS font-feature-settings for font with OpenType features

For example, in a recent project we used this font Cy (an Adobe font) and this font has OpenType features such as Contextual Alternates that

Screenshot from supertype.de/fonts/cy

This guide is great https://sparanoid.com/lab/opentype-features/

It tells us the to access Contextual Alternates we use calt

Then, to deactivate the Contextual Alternates I would add in my CSS the following.

font-feature-settings: "calt" 0;

Contextual Alternates in Sketch

To change this setting in Sketch, go to Text > OpenType Features > Contextual Alternates.

Hope this can help in your project and save you a bit of time.

Notify of

Inline Feedbacks
View all comments