Patrick CusackProduct DesignerDublin, Ireland

ModFont

02 / 12

Context
Self-initiated
Tool
modfont.app  (opens in a new tab)
Expertise
Type Design, Generative Systems, Design Tools
ModFont project

Overview

ModFont is a browser-based tool for designing modular typefaces using a grid-driven system. It explores how constraints, structure, and parametric rules can support expressive typography rather than limit it. Users define a small set of reusable modules and adjust variables such as weight, width, contrast, and curvature to generate consistent yet flexible letterforms.

The project was an exploration of generative design systems, UI affordances for creative tooling, and how designers can move fluidly between precision and play. It combines design system thinking with creative experimentation, treating type not as static assets but as a living, adjustable system.

Why I built it

ModFont started from three motivations: learning a new way of working, making something I cared about, and solving a problem I kept seeing among designer friends.

  1. Learning by building

    I wanted to go deeper into engineering with AI tools. I deliberately set Figma aside and designed through prompts alone, so the tool took shape in working code from the start.

  2. A tool I cared about

    Type design is a personal passion. There are plenty of font editors already, but I was interested in one focused on getting a typeface up and running quickly.

  3. From shapes to a working font

    Designers often start a bespoke display typeface by drawing letterforms in Illustrator. That’s great for refining shapes, but it doesn’t produce a font file, so setting the letters on a poster means assembling them by hand. ModFont makes it quick to create and export a functioning typeface instead.

A first prototype

The first step was a one-shot prototype, generated from a single prompt. It gave me something tangible to test, and its layout helped shape the final tool: a glyph library, a central editing grid, an inspector, and a live preview. But the editing itself behaved more like a bitmap editor, painting individual cells rather than composing letterforms from modular shapes. There was a useful structure here, alongside assumptions I needed to challenge.

0:00
0:52

Early prototype, then called ModGrid. This silent recording shows glyph editing by painting cells on a grid, with a glyph library on the left, an inspector on the right, and a text preview below.

Shaping the tool

The first working version was the beginning of the design process. Through continuous iteration, I kept what served the idea and reshaped what didn’t, pushing ModFont towards the modular type-design tool I had in mind. Working with AI made it more important to have a clear vision and be opinionated about the details. The assistance helped me build, but the craft, judgement, and decisions about what the tool should become remained mine.

ModFont's glyph editor with a modular A on the grid, a glyph library, and a live word preview.
Full-screen Wave preview setting Researchers Unveil Quantum Computing Milestone in white on black, rippling across the canvas, with 3D, Wave, and Cylinder effects and wave settings alongside.ModFont's export menu offering TrueType, OpenType, web font, and ModFont project formats beside the modular A.Public page for the Tile Regular typeface, showing a large A against cap height, x-height, baseline, and descender guides beside its 62-glyph set, with Copy and Remix actions.Close-up of the spacing preview with the A highlighted in green and handles marking its left and right sidebearings.

A design system

As the tool grew, I gathered its shared foundations and primitives into a small design system, documented on a components page inside the app. Buttons, pills, inputs, and compact editor controls share one set of variants, states, and focus behaviour, which kept new features consistent and gave the AI-assisted build a clear reference to work from.

ModFont's in-app Components page showing button variants (primary, secondary, inverse, success, destructive, ghost, and outline) in default, disabled, and compact states, above pills in semantic tones, sizes, and treatments.ModFont's Components page showing editor patterns—icon buttons, a split Export action, and view-option toggles—above form fields with helper, error, disabled, and compact states, and select dropdowns.

The tool in action

ModFont as it stands today brings the whole process together in one place: building glyphs from modular shapes, testing spacing against proof texts, previewing the typeface in motion, exporting a working font file, and sharing it with others. It’s still evolving, and each typeface I make with it shapes what the tool becomes next.

0:00
2:00