

1 2 3 4 5 6h1 { font-variation-settings: "wght" var(--text-wght); /* Or font-weight: var(--text-wght); */ }
1 2 3 4 5 6 7h1 { font-variation-settings: "wdth" var(--text-wdth); /* OR font-stretch: calc(var(--text-wdth) * 1%); */ }
1 2 3h1 { font-variation-settings: "ital" var(--text-ital); }
1 2 3h1 { font-variation-settings: "slnt" var(--text-slnt); }
1 2 3h1 { font-variation-settings: "opsz" var(--text-opsz); }



1 2 3 4 5 6 7 8 9 10 11/* Font in use: Bandeins Strange Variable */ h1 { font-variation-settings: "wght" 400, "wdth" 100; animation: strange 7s cubic-bezier(0.91, 0.32, 0.43, 1.03) infinite; } @keyframes strange { 50% { font-variation-settings: "wght" 200, "wdth" 800; } }
1 2 3 4h1 { --heading-spac: 120; font-variation-settings: "SPAC" var(--heading-spac); }
1 2 3 4h1 { --heading-spac: 100; font-variation-settings: "SPAC" var(--heading-spac); }
calc, CSS variables and viewport units along with variable fonts1 2 3 4 5 6 7 8 9 10 11 12 13:root { /* p tag's font size scale values */ --p-min: 1; --p-mid: 1.125; /* p tag's line height scale values */ --p-h-min: 1.2; --p-h-mid: 1.4; /* breakpoint values */ --screen-small: 25; --screen-medium: 45; }
blog.typekit.com/2016/08/17/flexible-typography-with-css-locks1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17@media screen and (min-width: 25em) { font-size: calc( (var(--p-min) * 1em) + (var(--p-max) - var(--p-min)) * ( (100vw - (var(--screen-small) * 1em)) / (var(--screen-xlarge) - var(--screen-small)) ) ); line-height: calc( (var(--p-h-min) * 1em) + (var(--p-h-max) - var(--p-h-min)) * ( (100vw - (var(--screen-small) * 1em)) / (var(--screen-xlarge) - var(--screen-small)) ) ); }

1 2 3 4 5 6 7 8p { --text-opsz: 20; font-variation-settings: "opsz" var(--text-opsz); @media screen and (min-width: 25em) { --text-opsz: 16; } }
1 2 3 4 5 6 7 8 9 10p { --text-GRAD: 0; font-variation-settings: "GRAD" var(--text-GRAD); } @media (prefers-color-scheme: dark) { p { --text-GRAD: 0.1; } }
