Manipulating a variable font with mobile motion sensors

03 2021

Mobile motion sensors can control many things on a web page, an exciting possibility is using this with variable fonts.

See this in action here: https://lab.amcc.io/tilt-type/

A Google variable font - Recursive - is manipulated with mobile phone tilt and compass. There's a bit of code to ask for access on iOS.

p5js used to access mobile phone tilt and compass values. p5 isn't really needed here, but its useful and a great tool for sharing/educating. See the sketch here: https://editor.p5js.org/amcc/sketches/dNOLfLgub and a simpler version here: https://editor.p5js.org/amcc/sketches/mWj6e9Dmd

The Google varible font properties info is here: https://fonts.google.com/variablefonts#font-families The Recursive font is here https://fonts.google.com/specimen/Recursive?preview.text_type=custom Some great variable font info here: https://web.dev/variable-fonts/