SYMPHOSIZER – Playing with SF Symphony’s new Visual Identity

At first sight the new visual identity for the San Francisco Symphony (pictured below, on the right) looks a bit off …

Those letters sure look a bit oddly sized, no? Turns out there’s a dynamic drive behind them:

Leveraging new creative technology including variable font design, our new visual language (of which the logo is just the beginning) will use typography itself to bring the essence of sound and music to life.

Bringing typography to life through sound? The SYMPHOSIZER website let’s you do exactly that.

Let the site have access to your microphone and start making some noise!

Lifting up the hood using view-source: they use p5 to capture the audio and after some processing pass the resulting numbers to font-size, font-variation-settings, and transform: skew().

splitChars[wornum].chars[i].style.fontSize = fontSize + 'px';
splitChars[wornum].chars[i].style.fontVariationSettings = "'vrsb'" + isTop + ", 'hght'" + smoothH[i] + ", 'ital'" + smoothI + '';
splitChars[wornum].chars[i].style.transform = 'skew(' + smoothSkew + 'rad)';

San Francisco Symphony – Visual Identity →

The possibilities of this new identity are endless. Take these posters for example, which look really great:

useSound – A React Hook for Sound Effects

Josh W. Comeau:

Because sound is used so rarely on the web, it can be quite impactful. It’s a bit of a secret weapon, and it can make a surprisingly big difference for the right kinds of projects!

To make it a bit easier to get started, I pulled out the hook I built for this blog, use-sound, and published it on NPM.

import useSound from 'use-sound';

import boopSfx from '../../sounds/boop.mp3';

const BoopButton = () => {
  const [play] = useSound(boopSfx);

  return <button onClick={play}>Boop!</button>;

Installation per NPM/Yarn.

yarn add use-sound

Built on top of the wonderful Howler.js

useSound – A React Hook for Sound Effects →
Beep Boop! Announcing “use-sound” →