Type designers
Build a starting system faster, then refine individual glyphs without giving up direct control.
DNAFonts
AI Font Studio & Glyph Engine
DNAFonts is a working font studio for creating typefaces from a prompt, a blank canvas, a reference glyph, or a style sample. I designed and built the product surface and the generation engine around batch glyph work, live design axes, QA feedback, and exportable font files.
Overview
Type design is a deep craft: metrics, spacing, contours, character sets. The current DNAFonts work makes that craft inspectable: every glyph has a state, every AI action can be scoped, and every generated outline can be previewed before it is accepted.
End-to-end product design and build: React studio, font export, and QA workflows.
Unified intake: prompt, blank canvas, uploaded glyph, style reference, or font import.
Default 99-glyph Latin set with configurable language support for Hebrew, Arabic, Cyrillic, Greek, digits, and symbols.
AI generation connected to style references, anatomy checks, scoped review, and TTF or OTF export.
Who it’s for
Different expertise, one editable studio
DNAFonts gives people with different levels of type expertise a clear way into font creation while keeping the result editable.
Brand and graphic designers
Turn a written brief or visual reference into a custom typeface that can still be edited and tested.
Creative teams
Explore directions, scripts, and design axes together before committing a font to production.
Design controls
Languages and axes
Shape the font, then test it in real text
DNAFonts supports Latin, Hebrew, Arabic, Cyrillic, and Greek. Choose the scripts a project needs, then tune eight design axes while the text updates below.
LatinAa
Hebrewאב
Arabicاب
CyrillicАа
GreekΑα
8 parameters
Move the axes to change the text
517
100%
0%
0%
0deg
34%
0%
65%
The challenge
An expert domain
Font editors are built for type designers. Cap height, kerning, contours, and large character sets can overwhelm people who only need a useful brand font.
An engine that needs evidence
Outputs cannot be trusted just because they render. The system needs style references, anatomy checks, and clear failure states.
Editing at set scale
A serious font is dozens of decisions. The interface had to support one-glyph fixes and group work without overwriting finished outlines.
Methodology
Research & process
Design focus areas
- Treat the glyph grid as both workbench and progress model.
- Make AI actions scoped: generate, regenerate, fix, then apply or cancel.
- Expose design changes as live axes before committing them to the font.
Source and anatomy mapping
Mapped how a reference glyph becomes reusable structure: stems, corners, counters, spacing, and style rules.
Studio workflow
Designed the flow from creation path to glyph grid, live preview, inspector, batch actions, and export.
QA loop
Reviewed generated glyphs by completion, visual consistency, and hard anatomy failures.
Build and verify
Iterated on the working product and checked the full flow from intake to export.
Design rationale map
Structure of the studio
The glyph grid became the production workbench.
The main studio keeps the character set, selection state, design controls, AI actions, and live preview visible in one flow.
Creation actions stay explicitGenerate all, upload reference, upload style reference, and load demo font remain visible where work begins.
The grid explains scopeThe 99 of 99 count, status dots, and group checkboxes show what exists, what is selected, and what still needs work.
The settings panel carries the type systemLanguages and design axes sit beside the glyphs, so the font can be shaped while it is being reviewed.
Creation flow
The problem
The first screen needs to catch the idea, not force a mode
A font can start from a prompt, a blank setup, a source glyph, a style reference, or an editable font file. Splitting those into separate doors made the first step feel like choosing a mode before shaping the idea.
The solution
One prompt-first intake
- The prompt is the default first step, so users can describe the font in plain language.
- Uploads stay attached to the same brief instead of becoming a separate workflow.
- Create Font can begin from a prompt, a file, or both together.
- The project still opens into the same editable glyph grid for generation, review, and export.
Quality controls
The product problem is trust. A generated font can look close at a glance, but a single weak glyph can break the set. DNAFonts keeps quality visible so users can see what needs review, fix the right scope, and continue without losing finished work.
Prompts and references give each project a clear style brief before generation starts.
Anatomy checks flag weak strokes, corners, terminals, proportions, and visual mismatches.
Scoped actions let users regenerate one glyph, a selected set, or missing characters only.
The library keeps active fonts, progress, review state, and export readiness visible.
Glyph repair flow
The problem
One wrong glyph can make the whole font feel off
A set can be almost complete, but one letter that does not match the rhythm, weight, or construction of the series makes the result feel unreliable. The user needs a way to fix that one glyph without restarting the font.
The solution
Four repair paths for the selected glyph
- Open the point editor when the final correction needs direct vector control.
- Generate three new options when the direction is right but the shape is not.
- Fix with instructions when the user can describe the issue in plain language.
- Upload the glyph as an image or SVG when the user already has the right source shape.
Edit points directly. Open the Point Editor when the AI is close but the final outline needs manual vector control.
Generate alternatives. Create three new options when the glyph is off but the style direction still works.
Fix with instructions. Describe the exact issue, such as a crossbar or symmetry problem, and keep the fix scoped to that glyph.
Upload a source glyph. Drop a PNG, JPG, or SVG when the user already has the right shape to analyze.
Key learnings
Scoped control builds trust
Users can forgive imperfect generation when they can choose the target, preview the result, and decide whether it gets applied.
Evidence beats appearance
A glyph that looks plausible can still fail. Anatomy checks and review states gave the interface a more honest definition of quality.
The grid has to work hard
The grid is not only a gallery. It carries progress, selection, status, batch operations, QA feedback, and the path back into manual editing.
Next project
Working on a complex product?
I design product experiences that bring clarity to complex systems.
