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:

Beyond the interface – The Sameness of Apps and Websites

Friend Thomas Byttebier – Digital Director at Base Design – has written a very insightful post on the sameness of apps, websites, subway maps, and coffee shops.

Why do all apps look the same nowadays? Why do all websites look the same? What can brands do to create more memorable digital experiences?

And also: how do you stand out – without compromising predictability, usability, etc. – when everything needs to (somewhat) look and behave the same?

Read the entire thing. It’s pure gold.

Beyond the interface →