Typography

Before Flex, type lived in two disconnected worlds. Fluent ran on one font, Copilot on another, and nothing structural connected them. Both were hand-picked, with no distinction between a UI label, a paragraph of reading, and an expressive headline.

I ran into the limits firsthand, building early Copilot response components on the old tokens. Fitting long-form AI output into a ramp designed for compact UI is where the cracks showed, and it convinced me to invest in a real type language.

The rebuild replaced two fonts with one coordinated language. Three sets share a single 4px scale and split the work by reading context: functional for UI that scans, content for reading and AI output, and content-editorial, a newly redesigned serif built to pair with the sans, for ceremonial moments. Reading, code, tables, headings, and expressive display all live inside those sets.

Two modern moves make it flex. The families are variable fonts with real optical designs, so a caption and a hero headline are drawn for their size rather than scaled from one master. And each named style bundles its font choices into a single decision a designer applies, so a name like body-medium-strong carries its role and emphasis without a spec sheet.

The hardest part was not the math. It was writing the guidance for when to use each set. Leadership wanted particular fonts in particular places without looking at the system as a whole, and the target kept moving; every change made specialists want to hand-tune everything downstream.

Rather than fight that, Mitch and I bit the bullet and exposed a control for every property behind a text style, so a product can fine-tune to its needs without breaking the system. It is why typography is roughly half of all Flex tokens, and why it can flex as far as it does.

SLT directed us to mix Segoe and Aptos. I recommended against it and brought evidence rather than an opinion: a cross-discipline coalition, a live prototype so people could judge the proposal in real interfaces, and a craft recommendation not to mix at all. I was overruled publicly. So I took the next position I could defend: if we were going to mix, the rules had to be systemic, one principle about which family carries which reading context, applied across the board. That was declined too. The direction was to place the second font in specific hand-picked locations.

I wrote the guidance for those locations anyway, and standing behind it was the uncomfortable part. People asked me constantly how the placements were decided, and the honest answer was that they were chosen, not derived. I could not give anyone a rule, because there wasn't one. The guidance was confusing and people struggled to follow it, and I understood exactly why.

It held that way for three or four months, then the decision was reversed. Today every one of those hand-picked spots uses the original font, and the second family has one job: headlines in AI responses, where a different reading context genuinely begins. That is a rule, it fits in a sentence, and that is why it survived. The system absorbed three more font changes after that one without breaking. Being directionally right in the moment does not mean being heard in the moment, so the work is to build for decision churn instead of arguing against it.

Typography is one system across web, iOS, and Android. The set and role names are identical everywhere; only the underlying values change, so text renders in each platform's native font and takes part in its own accessibility scaling. It ships on all three.

The type language was mine to shape and own. These are the people who built it with me.