As MFA Graphic Design students at Boston University, we were first introduced to type design through Robofont. While learning how to construct our own letterforms, we found it challenging to understand how small changes in a curve could affect the entire shape of a letter. To make sense of this, our professor showed us examples of how geometry plays a role in type design. Then we proceeded to manually draw circles inside our letters, trying to visualize how contrast and proportion interact within type design. This playful experiment became the inspiration for Percent, a tool that transforms the anatomy of letterforms into interactive, sphere-based visualizations.

Percent is an interactive web tool that helps designers, typographers, and learners explore the relationship between form, contrast, and structure in typefaces. By manipulating circles (“spheres”) within letterforms, users can: Observe how changes in shape influence overall form, Swap between different typefaces to compare and experiment with different fonts, Create entirely new letterform compositions, Export their custom type experiments for future use. The project reimagines type design as a form of visualization, where each curve is expressed as a system of circles that interact with one another.

We designed and prototyped Percent using Figma, leveraging its flexibility for visual experimentation and interaction design. Our development process was guided by a balance between visual design, educational clarity, and playful interaction.

The prototype can be tried here! You can see more details on this project on its Devpost page!