Skip to content

just-max/variable-font-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

[VFD Icon] Variable Font Demo

Demonstration of (continuously) variable fonts using Work Sans by Wei Huang. Any resemblance to the logo of the Ludwig Maximilian University of Munich is purely coincidental.

Demo is available at https://just-max.github.io/variable-font-demo/.

Screenshot of Variable Font Demo running in browser

How Does It Work?

We can use a variable font such as Work Sans and adjust the weight (wght) variation axis to continuously vary the line weight of the glyphs. A useful tool for checking what a font can do is https://wakamaifondue.com/.

Licence

Copyright 2019 The Work Sans Project Authors. Licensed under the terms of the SIL Open Font License, Version 1.1. This licence is copied in OFL.

The remaining files are licensed under the Mozilla Public License, Version 2.0. This licence is copied in LICENCE.

Components

  • All two icons on the page are from Material Icons
  • For adapting the bottom margin to the descender height opentype.js is used to parse the font file.
  • Sliders are made with noUiSlider.
  • For splitting text into graphemes (and avoid splitting combining characters from the character they modify) we use grapheme-splitter.

About

A demo using a variable thickness font on a green square background.

Resources

License

MPL-2.0, OFL-1.1 licenses found

Licenses found

MPL-2.0
LICENCE
OFL-1.1
OFL

Stars

Watchers

Forks

Languages