Font and Sound


    Font and Sound is an experimental mid-term project developed in ITP class Code of Music 2018. The project is trying to explore the visual and audio connection between fonts and sound using open-source variable fonts and Tone.js.

    role designer, front-end developer

    stack Tone.js, Variable Fonts

    ITP class Code of Music

    project site Font and Sound

    source code font-and-sound

    Connection between font and sound

    I remembered clearly that in the documentary Helvetica, which is filmed by Gary Hustwit to look "at the proliferation of one typeface as part of a larger conversation about the way type affects our lives", graphic designer David Carson points to the word "caffeinated" printed on a paper with sans-serif font, and shouting: "That doesn't say caffeinated! That just said hello." I was struck by the critic about how form of a printed word could be detached from the signified meaning, and also how could a printed word be designed to be presenting the idea vividly.

    What kind of sound would you expect to hear from a bold, sans-serif font? And what kind of noise is supposed to be generated by an elegant humanist serif font? In this midterm project for Code of Music, my goal was to experiment with this connection between a font and a sound.

    Building the connection

    To build the interface that demonstrate this connection, I chose the stack that included variable font, Tone.js and Parcel.

    Variable Font

    Variable font, according to Google Web and multiple registered “axes” which tie the central master to the other masters.), is "a collection of master styles, with one central 'default' master (usually the Regular font style) and multiple registered “axes” which tie the central master to the other masters." By adopting variable font in this project, I could easily build controllers to transform the fonts instantly and smoothly. I chose open-source font Kairos Sans Variable for development.


    Tone.js is "a framework for creating interactive music in the browser." This is the framework we used to explore music in code and programming in class. It's easy to create all kinds of variations and transformation of sounds with it.


    For purpose of future compatibility and development, I programmed structure of this project in a MVP like way (check source code for more detail). To separate the controllers and views in this rather small project, I was looking for a lighter bundler than Webpack. Parcel was perfect for this project because there's nearly no setup config works to do.

    Final work

    In the end, I successfully built the project in a day. It was such a unique experience to make sounds of different styles of fonts.

    demo of interaction