TUAN HUANG : Portfolio for MiT Application

PANGRAM PANGRAM | Neue Montreal Mono

A generative series of motion design made for the type foundry, Pangram Pangram, to promote their new monospaced font.

BRAND IDENTITY MOTION DESIGN GENERATIVE

Skills

HTML/CSS/JS, Three.js, p5.js, Adobe Illustrator

Role

Designer

1:1 ratio for social media posts

About Neue Montreal Mono

“From its clean, modern aesthetic to its extensive character set, 14 styles including italics and multilingual support, Neue Montreal Mono empowers designers, developers, and creatives with the tools to excel in every project. Upgrade your typography game today and discover the endless possibilities with Neue Montreal Mono.” - Pangram Pangram

Concept

This series explores the versatility and elegance of a monospaced typeface through the lens of programming and creative coding. By combining multiple techniques and libraries across various coding languages—including machine learning models, computer vision, WebGL with Three.js, and browser-based interactions with JavaScript, HTML, and CSS—I aimed to highlight the typeface’s adaptability. The project also delves into the unique characteristics of monospaced fonts, such as their uniform character widths, and how these features can inspire creative expression.

Process

This commission came at a pivotal moment, just as I had completed my studies at ITP, NYU. I saw it as an opportunity to reflect on and consolidate my passion for programming cultivated during my time at ITP. By then, I had explored diverse creative technologies—performing live with computer vision, building virtual monuments with three.js, and developing browser-based typographic experiments, among others. Given the open-ended nature of Pangram Pangram’s prompt, I infused the project with my personal motivation to showcase the versatility of the typeface in application. My ideation process was tool-driven; each tool informed different facets of the project. Through iterative experimentation with interactivity across these tools, I arrived at the final output.

L: Javascript + p5.js
R: Machine Learning

L: Three.js
R: Computer Vision

*
Font provided by Pangram Pangram.

REACH ME AT

LinkedIn / Instagram / Email / CV