Input Range

Programmatically use your typeface

In today’s exercise, we will be diving a little bit further into JavaScript to control our variable fonts in the browser.

Review the Code Lab Tutorial on JS and Variable Fonts, along with the Panopto recording. (I recommend viewing the video at 1.5× or 2× its actual speed.) As a reminder, you can continue to pull demo codes for in-class exercises by syncing the entire Web Type Demos repository to your computer.

Using what you learned from your tutorial, add on your class site with your variable font.

1. Similary to the way we set up Dark Mode, add a button that toggles states of your typeface.

2. Add an input slider that updates the font-variation-settings of your typeface.

Resources

• About the input type=range element on MDN
• Styling Range Inputs on CSS Tricks
• Review previous exercise for a primer on jQuery.
• jQuery