Animating Variable Fonts

• Letterform Archive (Type West) Public Workshop Summer 2021
• 5:00–8:00pm PDT, 2 Wednesdays + 2 Thursdays in August
• Instructors: Lynne Yun, Kevin Yeh
• TAs: Hugo Baeta, Tommi Sharp
• 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 (August 18, 19, 25 & 26), 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!

Techniques covered in this course will include introductory HTML, CSS, and Javascript concepts, and how they can be applied to 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: Intros and HTML/CSS

• 👋 Intros & Housekeeping
• "Intro to Variable Fonts & the Design Space" 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

References from class demos:

• Fixed/Fluid design with max-width: demo sketch
• setting font-size with breakpoints: demo sketch
• flex-grid: demo sketch
• fluid styling with calc : demo sketch
• Using a custom font (@font-face): demo sketch

(free) resources for learning HTML and CSS:

• http://www.dontfeartheinternet.com
• https://internetingishard.com

Section 2: HTML/CSS Part 2 & Intro to javaScript

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/

References:

• CSS Animations
• Flexbox
• Using Google Variable Fonts
• Focus/Active/Hover CSS
• Learn p5.js

Demo Sketch Collection

• Part 1
• Part 2 (inhale/exhale)
• Part 2.5 (hover to reveal)
• Part 3 (individual letter animations)

Suggested Resources for Learning

Coding Train:

• Errors and Console (Coding Train)
• Code Comments (Coding Train)
• Variables in p5.js (Coding Train)
• Variables pt 2 (Coding Train)
• While / For Loops (Advanced, Coding Train)

Allison Parrish:

• First Steps in p5.js (Allison Parrish)
• Expressions, Variables, Loops (Allison Parrish)

Section 3: JavaScript and Variable Fonts

Further resources for Glyphs

• Glyphs App Website
• Variable Fonts Tutorial

Demo Sketch Collection:

• Ball movement exercise 1
• Ball movement exercise 2 (bouncing)
• Updating wght with JS
• Updating wght with slider
• Updating multiple elements with for loop

Suggested Video Tutorial

• Coding Train: While / For loops

Section 4: JavaScript and Variable Fonts Part 2

Demo Sketch Collection

• mouse location variables, map() and sound
• variable weights using mouseX & windowWidth
• variable weights using sound
• time-based sine animation
• splitting characters + time offsets

Advanced Examples Shown

• 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 see: ScrollTrigger