Understanding the new standards for variable CSS fonts.
A variable font is a single font file that can be used to render a range of propertyies e.g. size, weight, style. Support for variable fonts is being codified in the W3C Working Draft CSS Fonts Module Level 4. Most leading browsers already support variable fonts to some degree.
The OpenType 1.8 specification defines five registered axis tags:
- optical size
It seems some fonts provide additional axis for more fun and creative control - a popular example is decovar which really has an insane number of axis to play with.
While some properties can be adusted with familiar font properties (
property is used to control all the axis supported by a particular font.
Demo - Source Sans Pro
demo/index.html is a simple demonstration of using mouse movement to affect continuous variation of font attributes (size and weight in the case).
The font used is source-sans-pro 3.006 (OTF, TTF, WOFF, WOFF2, Variable).
Getting the latest variable fonts and installing for the demo:
wget https://github.com/adobe-fonts/source-sans-pro/releases/download/3.006R/source-sans-pro-3.006R.zip unzip source-sans-pro-3.006R.zip rm source-sans-pro-3.006R.zip cp source-sans-pro-3.006R/WOFF2/VAR/SourceSansVariable-Roman.ttf.woff2 demo cp source-sans-pro-3.006R/WOFF/VAR/SourceSansVariable-Roman.ttf.woff demo cp source-sans-pro-3.006R/VAR/SourceSansVariable-Roman.ttf demo
A picture doesn’t really convey the intent. Try it interactively: