Fork me on GitHub

Project Notes

Variable Fonts

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:

  • weight
  • width
  • optical size
  • slant
  • italic

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 (font-weight etc), the font-variation-settings 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:

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:


Credits and References

About LCK#154 CSSfont
Project Source on GitHub Return to the Project Catalog

This page is a web-friendly rendering of my project notes shared in the LittleCodingKata GitHub repository.

LittleCodingKata is my collection of programming exercises, research and code toys broadly spanning things that relate to programming and software development (languages, frameworks and tools).

These range from the trivial to the complex and serious. Many are inspired by existing work and I'll note credits and references where applicable. The focus is quite scattered, as I variously work on things new and important in the moment, or go back to revisit things from the past.

This is primarily a personal collection for my own edification and learning, but anyone who stumbles by is welcome to borrow, steal or reference the work here. And if you spot errors or issues I'd really appreciate some feedback - create an issue, send me an email or even send a pull-request.