type
one geometric sans, seven sizes, two weights at a time.
the typeface
Aa
abcdefghijklm
nopqrstuvwxyz
0123456789 & ?!
poppins
a geometric sans with a round o, a single-story a and open counters. weights 400, 500, 600, 700 and 800. it is free, open source and on google fonts.
fallbacks
jost, then futura, then century gothic, then avenir next, then the system sans. all of them keep the geometric feel if poppins fails to load.
font-family: Poppins, Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif;the scale
seven sizes, nothing in between.
form
Functional design
Design for everyday life
The shapes inside
Good design serves the people who use it, and it should be affordable to make.
Marcel Breuer, 1925
caption and labels in sentence case
rules
- two weights per view.one heavy for display or headings, one light for body. mixing 800 and 700 next to each other muddies the hierarchy.
- lowercase for display.headlines, product names and poster type. interface text is sentence case.
- tight tracking on big type, none on small.minus three percent at 96, minus one at 32, zero at body size, plus one at 13.
- left aligned.no centered paragraphs, no justified text. headlines may sit on a diagonal only in posters.
- lines under 60 characters.set body text in a container of max-width 60ch. serif rules do not apply here; there is no serif.
- no italics, no underlines except links.emphasis comes from weight or from a yellow highlight.
in css
:root { --font: Poppins, Jost, Futura, 'Century Gothic', 'Avenir Next', sans-serif; }
body { font: 400 18px/26px var(--font); color: var(--text); }
h1 { font: 700 56px/60px var(--font); letter-spacing: -0.02em; }
h2 { font: 700 32px/38px var(--font); letter-spacing: -0.01em; }
h3 { font: 700 24px/30px var(--font); letter-spacing: -0.01em; }
.display { font: 800 clamp(48px, 8vw, 96px)/1 var(--font); letter-spacing: -0.03em; text-transform: lowercase; }
small, .caption { font: 500 13px/18px var(--font); letter-spacing: 0.01em; }
p { max-width: 60ch; }