Type Specimen Generator

When you finish a typeface, or when you are about to present one that is not yours in a brand manual, there is a piece you have to make: the character grid. A sample of glyphs laid out in whatever weight and size it calls for.

It is usually done by hand, character by character. You type the a, the b, the c, and so on until basic Latin is done. Then extended Latin starts, and that is where the real problem shows up: there are characters you do not know how to type. Diacritics (À Á Â Ã Ä Å), for example, are not usually within reach on a normal keyboard. It does not just take a long time: you also have to go and look up how to type each one.

The work was tedious and I ran into it every time I designed a typeface, so I made a tool to solve it. That was about two years ago, when vibe coding was starting to come up in conversation, and I built it with ChatGPT.

It half worked. The window asked for three decisions: the typeface, the size and the scope of the set, Basic or Extended. With that it generated the glyphs, and it did nothing else.

What you noticed when using it:

• The font was free text. You had to type the exact name of the typeface and, if it did not match, nothing was drawn. In a tool meant to spare you from typing what you cannot type, that friction had no place.
• The auto layout did not fit. The specimen landed on the canvas with no structure and had to be rearranged by hand.
• One weight, Latin only and a fixed layout. You could not decide how uppercase, lowercase, figures and punctuation were grouped.
• Glyphs only. A specimen is more than an alphabet, and the tool did not know it.

v2 generates a single frame with auto layout on the canvas, editable afterwards like any other. At the top it has a compact header with the family and a summary of the chosen weights and sizes, and below it the blocks you tick. You can tick more than one at a time.

• Grid. The full character set, glyph by glyph, in a grid.
• Showcase. The family name set large and one line for each selected weight.
• Cascade. A sample text repeated in every chosen size, from smallest to largest.

The panel has four controls: a font, the weights, the sizes and the specimen type.

The font is a single picker with search, because someone who works with type can have hundreds of families installed, and typing the exact name is no longer needed. Weights and sizes are multi-select, and the three specimen types are checkboxes you can combine.

The interface uses IBM Plex Sans, a warm brown header (#5f533f) and the same brown on the main button and on the ticked checkboxes. The colours, the type, the radii and the spacing come from the tokens in the Figma mockup, not from eyeballing it.

A polishing detail: at its default size the panel overflowed by about 9 pixels and showed a scrollbar. The cause was labels wrapping onto two lines. Shortening them to "Weights" and "Sizes" gave the space back without touching the vertical rhythm. With that, the panel settled into three zones (header, controls, anchored footer) and all four margins at 24 pixels.

I wanted to take the plugin further: read the font's metadata (designer, foundry, version) and show its OpenType features and alternates. I ran into a limit of Figma's API.

The API only exposes the family and the style of each font, not data from the file. And OpenType features are read-only: a plugin can query them, but not apply them to text.

Doing it properly means parsing the font files with libraries like opentype.js or fontkit, which makes no sense inside Figma's sandbox. I parked it in the plugin and took it to TypeScope, where I control the ingestion and Figma is not the ceiling.

A tool that saves work cannot add friction at the first step. v1 asked you to type the exact name of the typeface by hand, which is exactly what the plugin exists to avoid. In v2 it is a picker with search.

A platform's ceiling decides where each feature lives. Font metadata and OpenType features do not fit in a Figma plugin, and that boundary is what told me what should stay here and what should go to TypeScope.

Rebuilding is not improving. v1 had little worth keeping, so v2 was written from scratch, with the values from the Figma mockup as the source of truth and not by eye.