Variable Fonts

• Type@Cooper Public Workshop Summer 2021
• 2:00–5:00pm EDT, 2 Sundays in June
• Instructors: Lynne Yun, Kevin Yeh
• Course Discussion: Slack

Course Description

Variable fonts have been a topic of growing curiosity in the type world — but how do we use them on the web? Have you ever thought about building your own variable type tester, or wondered how they could be brought to life through code?

Over four evenings, this beginner-friendly course will cover the fundamentals of programming using both HTML+CSS web basics and P5.js, a beginner-friendly Javascript framework. We’ll explore how to utilize these tools with variable fonts to create interesting digital experiences, opening new doors and finding fresh avenues for experimentation … and fun!

This is an intermediate level course, and students are expected to have a basic knowledge of programming concepts and the fundamentals of HTML, CSS, and Javascript. P5.js will be the main programming library for the course, a beginner-friendly Javascript framework.

Techniques covered in this course will include time and interaction-based CSS manipulation and animation on the web using variable font features.

Topic Sections

Section 0: Before the First Week

• Make an account for the P5.js Web Editor
• Join the Generative Type Slack

Section 1: Roundtables and HTML/CSS

• 👋 Roundtable Intros & Housekeeping
• "Talking to Machines" Lecture
• Variable Fonts on the web using HTML and CSS

Variable Font Examples

• SFSymphony Brand Design by COLLINS
• GT Maru Typeface
• Variable Font Rendering in 3D
• Interview with Bianca Berning

Color Font Examples

• Merit Badge by David Jonathan Ross
• Rocher Color by Harbortype
• Typearture Variable Color Initials by Typearture
• Whirly Birdie by Alex Tomlinson and Richard Yee
• Anicons by Wenting Zhang and Hua Shu

Inspecting Variable Fonts:

• https://wakamaifondue.com/
• https://www.axis-praxis.org/samsa/
• Firefox Font Inspector

Finding (free) variable fonts:

• https://fontsarena.com/tag/variable-font/
• https://v-fonts.com/
• https://fonts.google.com/variablefonts
• https://www.axis-praxis.org
• https://www.fontshare.com/

Sketch Collection

• Part 1
• Part 2 (inhale/exhale)
• Part 2.5 (hover to reveal)
• Part 3 (individual letter animations)
• Extra Part 4 (advanced grid animation)

Section 2: Exporting Variable Fonts and JS

• Exporting Variable Fonts with Glyphs (45min)
• Programming Refresher + Interpolating with Your Variable Font in JS (45min)
• Variable Fonts on the Web with JS - Assorted Techniques

Sketch Collection

• Base Sketch
• Interpolating Your Font
• Interpolation in 2D
• Randomly Adding Text Over Time
• Creating Input Sliders
• Mapping Mouse Position to Variable Axes
• Randomly Changing Text

Animations

• Sine and frameCount
• Timing with p5.func
  • p5.func library
• Moving towards a target weight
• Moving each letter towards a target weight (very advanced)

Splitting Text

• Splitting.js
• Weight based on character
• Letter-based Mouse Distance
• Reacting to Mic Sound
• Reacting to Mic Sound - FFT

Responsive Text on the Web

• Responsive I (textbox size)
  • Using native Javascript (no p5.js)
• Responsive II (window size)
  • Using native Javascript (no p5.js)
• Responsive III (resizable div)
• Responsive IV (scrolling)
  • For more complex behavior: ScrollTrigger

Building a Variable Font Tester

• Loading Variable Fonts in CSS
• Reading Variable Font Axes Data with variablefont.js
  • Alternative: samsa-core.js