Using Ligatures in Hype

1

32%20PM
Screen Shot 2018-08-17 at 12.06.32 PM.png1134×232 27.6 KB

Ligature_drawing%402x

Font-variant-ligatures is a CSS property that defines how some letters appear next to each other in certain fonts. (Read more) To turn these off or define a different property, there’s a couple ways:

For the entire scene:

.HYPE_scene { font-variant-ligatures: none; }

Or for just a specific class:

.HYPE_scene .classname { font-variant-ligatures: none; }

Here are all the optional properties: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures#Syntax

```
/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
font-variant-ligatures: contextual;                 /* <no-historical-ligatures> <common-ligatures> */

/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;
```

Example:
LigaturesDemo.zip (260.2 KB)

7 Likes