Percent

Percent Logo
GIF
Percent Logo GIF
Lowercase Letter Showcase
Word Showcase

Inspiration

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.

What it does

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.

How we built it

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.

Challenges we ran into

Understanding how to translate typographic logic and letterforms into an interactive geometry system was one of our biggest challenges. Some questions we asked ourselves were:

How can small user interactions, like resizing a sphere, update the entire letterform coherently, without distorting the curves?
How far can the user play with the size of the spheres?

Accomplishments that we're proud of

We created a tool that allows users to learn type design in a creative, fun, and experimental way.

What we learned

Through Percent, we learned that complex design principles can become more approachable when turned into interactive visual systems. We also deepened our understanding of how contrast defines a typeface’s character, how geometry can reveal underlying design logic, and how to design tools that merge education, play, and visualization. Percent reflects our belief that learning type should be as creative, fun, and exploratory as designing it.

What's next for Percent

We plan to bring Percent to life as a fully functional web-based tool that anyone can access and experiment with. Our next steps include developing the interactive interface using HTML, CSS, and JavaScript, enabling users to manipulate spheres in real time and watch how the letterforms change. Users will be able to integrate open type libraries (like Google Fonts or custom OTF/TTF uploads), so users can visualize and compare a wide range of typefaces. The exporting functionality will allow users to save or download their unique letterform creations for personal or design use. This tool will define the educational experience, adding guided tutorials and explanations to help beginners understand typographic contrast and construction. Our long-term vision is to make Percent an open, playful, and educational platform, where designers, students, and anyone curious about typography can learn by doing, exploring the letterforms through motion, geometry, and interaction.