# Type psychology

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.

## Eight voices

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

### System sans (the device’s own typeface)

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

### Neutral sans

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

### Grotesque sans

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

### Rounded sans

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

### Book serif (old-style and transitional)

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

### Garalde serif (Garamond family)

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

### Didone serif (high contrast)

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

### Monospace

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.

## Six things that change the voice

ClassificationSerif reads as established and literate, sans as modern and neutral, rounded as friendly, monospace as technical. This is the first thing people register.WeightLight is delicate and expensive; regular is calm; bold is confident; black is loud. A heading at 800 and the same heading at 400 are different brands.Size contrastA large jump between heading and body is dramatic and editorial; a small one is calm and functional. Choose a ratio and keep it.TrackingTight tracking on large text feels designed and urgent; wide-tracked capitals feel formal and luxurious; default tracking on body text is always right.CaseSentence case is conversational. Title Case Is Formal And Dated. ALL CAPS shouts, or with tracking, labels.Line length and spacingForty-five to seventy-five characters per line and 1.5 line height for body text read as care. Long lines and tight spacing read as cheap, whatever the typeface.

## Pairing typefaces

- One family is enough for most products. Use weight and size for hierarchy before adding a second typeface.
- If you pair, pair by contrast: a serif for headings with a sans for the interface, or the reverse. Two similar sans typefaces look like a mistake.
- Give each typeface a job and never swap them: one for what the brand says, one for what the interface does, monospace for numbers and code.
- Match the proportions. A pair works when the lowercase letters are about the same height at the same size.
- Never more than two families and a monospace.

## Rules

- Body text at 16px or larger, line height 1.5 to 1.7, 45 to 75 characters per line.
- A scale with a constant ratio (1.2 for dense applications, 1.25 to 1.333 for marketing pages). Five or six sizes cover everything.
- Tabular figures wherever numbers are compared in columns.
- Left-aligned text for anything longer than three lines. Centred paragraphs are hard to read.
- Real typographic marks: curly quotes, proper apostrophes, a true multiplication sign. They are small and they read as craft.
- Avoid the generated look: one neutral sans for everything at the same weight, a serif italic word dropped into a sans headline for decoration, and the fashionable pair of the year used without a reason.
- System font stacks load instantly and feel native. A web font is worth its weight only when it carries the brand.

## MIAN’s noodles by the voice of their headings

### Neutral sans

[Mian](https://mian.ro/noodles/mian)[Shio](https://mian.ro/noodles/shio)[Bucatini](https://mian.ro/noodles/bucatini)[Hofun](https://mian.ro/noodles/hofun)[Hiyamugi](https://mian.ro/noodles/hiyamugi)[Lasagne](https://mian.ro/noodles/lasagne)[Pappardelle](https://mian.ro/noodles/pappardelle)[Acini di pepe](https://mian.ro/noodles/acini)[Kalguksu](https://mian.ro/noodles/kalguksu)[Sanuki](https://mian.ro/noodles/sanuki)[Hakata](https://mian.ro/noodles/hakata)[Juksing](https://mian.ro/noodles/juksing)[Kishimen](https://mian.ro/noodles/kishimen)[LaMian](https://mian.ro/noodles/lamian)[Somen](https://mian.ro/noodles/somen)[Capellini](https://mian.ro/noodles/capellini)[Kuzukiri](https://mian.ro/noodles/kuzukiri)[Harusame](https://mian.ro/noodles/harusame)[Fensi](https://mian.ro/noodles/fensi)[Tokoroten](https://mian.ro/noodles/tokoroten)[Nagashi](https://mian.ro/noodles/nagashi)[Liangfen](https://mian.ro/noodles/liangfen)[Dangmyeon](https://mian.ro/noodles/dangmyeon)[Woonsen](https://mian.ro/noodles/woonsen)[Daoxiao](https://mian.ro/noodles/daoxiao)[Naengmyeon](https://mian.ro/noodles/naengmyeon)[Ramen](https://mian.ro/noodles/ramen)[Biangbiang](https://mian.ro/noodles/biangbiang)[Fusilli](https://mian.ro/noodles/fusilli)[Jjajang](https://mian.ro/noodles/jjajang)[Laksa](https://mian.ro/noodles/laksa)[Cavatelli](https://mian.ro/noodles/cavatelli)[Pho](https://mian.ro/noodles/pho)

### System sans (the device’s own typeface)

[Yangchun](https://mian.ro/noodles/yangchun)[Penne](https://mian.ro/noodles/penne)[Chitarra](https://mian.ro/noodles/chitarra)[Fettuccine](https://mian.ro/noodles/fettuccine)[Quadretti](https://mian.ro/noodles/quadretti)[Ditalini](https://mian.ro/noodles/ditalini)[Sotanghon](https://mian.ro/noodles/sotanghon)

### Book serif (old-style and transitional)

[Linguine](https://mian.ro/noodles/linguine)[Longxu](https://mian.ro/noodles/longxu)[Misua](https://mian.ro/noodles/misua)[Bún](https://mian.ro/noodles/bun)[Cha Soba](https://mian.ro/noodles/chasoba)[Pici](https://mian.ro/noodles/pici)[Hōtō](https://mian.ro/noodles/hoto)[Soba](https://mian.ro/noodles/soba)[Corzetti](https://mian.ro/noodles/corzetti)[Inaniwa](https://mian.ro/noodles/inaniwa)[Yifu](https://mian.ro/noodles/yifu)

### Grotesque sans

[Spaghetti](https://mian.ro/noodles/spaghetti)[Paccheri](https://mian.ro/noodles/paccheri)[Maccheroni](https://mian.ro/noodles/maccheroni)[Rigatoni](https://mian.ro/noodles/rigatoni)

### Monospace

[Ramyeon](https://mian.ro/noodles/ramyeon)[Yinzhen](https://mian.ro/noodles/yinzhen)

### Rounded sans

[Farfalle](https://mian.ro/noodles/farfalle)[Shirataki](https://mian.ro/noodles/shirataki)[Udon](https://mian.ro/noodles/udon)[Gnocchi](https://mian.ro/noodles/gnocchi)[Orecchiette](https://mian.ro/noodles/orecchiette)[Mee](https://mian.ro/noodles/mee)[Mixian](https://mian.ro/noodles/mixian)

### Garalde serif (Garamond family)

[Tagliatelle](https://mian.ro/noodles/tagliatelle)[Tajarin](https://mian.ro/noodles/tajarin)

### Didone serif (high contrast)

[Mafaldine](https://mian.ro/noodles/mafaldine)

## Changing a noodle’s typefaces

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](https://mian.ro/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;
}
```

Source: https://mian.ro/docs/type