Day 12: Interactive Typography

Making Text Come Alive

Interactive typography transforms static text into responsive, living elements that react to user behavior. This approach makes reading an active experience rather than passive consumption. Chrome Experiments showcases how text can dance, morph, and respond to create memorable digital experiences.

Learning from Zach Lieberman

Study Zach Lieberman's pioneering work with interactive text systems. Notice how his installations make typography feel magical and alive - letters that follow your movements, words that scatter and reform, text that becomes drawing. His work demonstrates how interaction can enhance rather than distract from textual meaning.

Building Responsive Typography

Your p5.js experiment should make text respond meaningfully to mouse position. Start by loading a custom font and displaying a single word or short phrase. Use mouseX and mouseY to control text properties - maybe letter spacing increases as the mouse moves right, or individual characters rotate based on their distance from the cursor.

Interactive Typography Ideas:

• Letter spacing controlled by horizontal mouse position
• Text size based on distance from cursor
• Individual character rotation
• Color changes with proximity
• Letters that "run away" from cursor
• Text that clusters around mouse like particles
• Typography that morphs between states

Creating Living Text

Try making letters change color, size, or transparency based on mouse proximity. Advanced challenge: make letters "run away" from the cursor or cluster around it like particles. The goal is creating typography that feels alive and responsive. This exercise teaches you that text doesn't have to be static - it can be a dynamic interface element that enhances user engagement through playful interaction.