Sans serif describes typefaces whose letters have no serifs, the small strokes at the ends of lines that fonts like Times New Roman carry. "Sans" is French for "without". Arial, Helvetica, Verdana, Inter and Roboto are all sans serif, and they are the default look of most apps, phones and modern websites.
The main sans serif styles
For how serifs themselves work, see the serif entry. Within sans serif faces, the useful distinctions are:
- Grotesque. Early sans serifs with slight quirks, such as Franklin Gothic.
- Neo-grotesque. Neutral, even shapes. Helvetica and Arial are the famous pair, with Arial designed to match Helvetica's proportions.
- Geometric. Built from circles and straight lines: Futura, Montserrat, Poppins. Clean and modern, sometimes less readable in long paragraphs.
- Humanist. Shapes closer to handwriting, with more open letters: Gill Sans, Open Sans, Fira Sans. Usually the friendliest for long text.
Operating systems ship their own: Apple uses San Francisco and Android uses Roboto. Writing font-family: system-ui, sans-serif in CSS tells the browser to use that built-in font, which needs no download.
Example: one font, two jobs
A physiotherapy clinic uses Inter for everything: large bold headings, normal-weight body copy and small medium-weight labels on the booking form. Because Inter comes in many weights, one family covers the whole site, the page loads one font file, and the design still has clear hierarchy.
Why interfaces lean towards sans serif
Buttons, menus, form labels and price tables are short pieces of text read at small sizes. Simple letter shapes stay crisp there, which is why UI design defaults to sans serif. For body text either family works on modern screens, so the choice is mostly about tone: sans serif tends to read as modern, direct and practical.
Sans serif pitfalls
- Ambiguous characters. In some faces, capital I, lower-case l and the number 1 look identical. That matters for codes, prices and email addresses.
- Picking a geometric face for long text. Very round letters can feel tiring across several paragraphs.
- Looking generic. A neutral sans with no other brand cues makes a site feel like a template. Distinctive colour or a contrasting heading face fixes it.
- Thin weights for body copy. Light weights in pale grey are hard to read on bright phone screens.
Related terms
- Serif: typefaces with end strokes, a common pairing partner.
- Typography: how type is sized and spaced.
- Google Fonts: where Inter, Roboto and Open Sans are freely available.
- UI design: the field where sans serif dominates.