# 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).

## 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 Sans**

Headings and everything you act on: buttons, fields, tables, labels.

Aa

**Alegreya**

Text for reading: paragraphs, explanations, reports.

Aa

**Alegreya italic**

Process 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

**Next reminder**Tuesday, 9 am

Label in sentence case, in the sans.

Don’t

**Next reminder**Tuesday, 9 am

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

Last backup: 3:12, 6 hours ago

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](https://fonts.google.com/specimen/Alegreya) and [Alegreya Sans](https://fonts.google.com/specimen/Alegreya+Sans) are by Juan Pablo del Peral ([Huerta Tipográfica](https://www.huertatipografica.com/)), under the free [SIL Open Font License](https://openfontlicense.org/). Feitio serves both along with its CSS, in `fonts.css`, without asking any other site for anything.