A typeface is a tone of voice. The same sentence set in a geometric sans, a book serif and a monospace is three different speakers. This page explains what the main kinds of type say, how weight, size and spacing change the message, how to pair typefaces, and which voice each MIAN noodle speaks in.
Each sample is set in the font stack MIAN uses for that voice, so it shows the typeface your own device provides.
Interfaces cooked differently
Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.
Use it for applications, dashboards, anything used daily.
Watch for carries no brand character at all. The brand must come from colour, shape, words and motion.
Interfaces cooked differently
Clear, modern, impartial. The voice of software and signage.
Use it for interfaces, documentation, most product marketing.
Watch for the same few neutral sans typefaces set every generated page. Without a distinct weight, size or pairing it reads as a template.
Interfaces cooked differently
Confident, graphic, European. A poster voice with a little warmth and irregularity.
Use it for agencies, culture, campaigns, strong headlines.
Watch for heavy weights at large sizes need generous space and short lines.
Interfaces cooked differently
Friendly, soft, safe, young.
Use it for consumer apps, children, food, onboarding.
Watch for hard to take seriously for money, law or medicine.
Interfaces cooked differently
Considered, literate, established. The voice of books and long reading.
Use it for editorial, publishing, research, thoughtful products, quotations.
Watch for needs size and good line spacing on screens; small serif text on low-resolution displays gets muddy.
Interfaces cooked differently
Classical, humane, quietly elegant. Five centuries of book typography.
Use it for literary and cultural sites, hospitality, fine food.
Watch for delicate details vanish below about 18px.
Interfaces cooked differently
Fashion, luxury, ceremony. Thick and hair-thin strokes signal expense.
Use it for display sizes only: mastheads, product names, invitations.
Watch for unreadable as body text and fragile on dark backgrounds, where the thin strokes break up.
Interfaces cooked differently
Technical, exact, raw, honest. The voice of code, receipts and instruments.
Use it for developer tools, data, labels, numbers that must align.
Watch for tiring for long paragraphs; reads as a costume when the product is not technical.
Three tokens set the type of a noodle. Override them on the same element as data-noodle, or choose from eight stacks in the studio.
[data-noodle="soba"] {
--mn-font: "Your Sans", ui-sans-serif, system-ui, sans-serif;
--mn-font-heading: "Your Serif", ui-serif, Georgia, serif;
--mn-heading-weight: 500;
}