Typography
A single family, Alegreya, in three voices. Tied to refinement (one family, few sizes) and to humanism (lettering that keeps the hand of the writer).
On this page
One family, three voices
Lettering gives a page most of its personality; so there is only one, Alegreya, born from calligraphy, always used the same way.
Aa
Alegreya SansHeadings and everything you act on: buttons, fields, tables, labels.
Aa
AlegreyaText for reading: paragraphs, explanations, reports.
Aa
Alegreya italicProcess notes, and only those.
The scale
- Cover, 4rem
- Feitio
- Heading 1, 2.75rem
- Schedules
- Heading 2, 2rem
- This week
- Heading 3, 1.5rem
- Tuesday
- Body, 1.25rem
- Calm reading, refined without being solemn.
- Small, 1rem
- Caption, field hint, footer.
Body text with 1.6 line height; headings with 1.08. A reading column never goes past about 70 characters per line.
Rules
No all caps for labels
No spaced-out kicker above a heading either. Sentence case: only the first letter capitalized.
Do
Label in sentence case, in the sans.
Don’t
Spaced all caps: harder to read and a mark of generic pages.
Mono only for code
No mono type to give numbers, dates or labels a "technical" air.
Do
The sans with tabular figures aligns columns without looking like a terminal.
Don’t
LAST_BACKUP 03:12:44 (-06h)Mono decorating data: the "tech vibes" Feitio never is.
A whole heading, one color and one weight
Never highlight one word of a heading in orange, italics or bold.
Italics have an owner
Process notes. Emphasis in running text, when needed, is bold, and sparingly.
Size comes from the scale
No hand-written sizes; no heading 2 "dressed as" a heading 1.
The fonts
Alegreya and Alegreya Sans are by Juan Pablo del Peral (Huerta Tipográfica), under the free SIL Open Font License. Feitio serves both along with its CSS, in fonts.css, without asking any other site for anything.