Foundations
Typography
Eight sizes. Each direction sets its own display voice over the same body face.
Specimen
Art Deco
Display
Florida’s Deaf voice since 1917.
Body
Access is the law. We hold Florida to it. Join FAD and add your voice.
Label
Events · Act · Membership
Sunrise
Display
Florida’s Deaf voice since 1917.
Body
Access is the law. We hold Florida to it. Join FAD and add your voice.
Label
Events · Act · Membership
Scale
| Token | Size | Use |
|---|---|---|
| --fs-1 | 12px | Label, tag, caption |
| --fs-2 | 14px | Small copy, secondary UI |
| --fs-3 | 16px | Body, buttons |
| --fs-4 | 20px | Lead paragraph, card title |
| --fs-5 | 24 to 32px | Sub-section heading, acronym |
| --fs-6 | 32 to 56px | Section heading, stat |
| --fs-7 | 40 to 96px | Hero title, on every page |
| --fs-8 | 44 to 128px | Larger display size, not used by a page today |
Typefaces
| Role | Art Deco | Sunrise |
|---|---|---|
| Display | Bodoni Moda | Rubik, rounded, 700 |
| Body and labels | Archivo | Archivo |
| Mono (specimens) | IBM Plex Mono | IBM Plex Mono |
All faces are open-licence, served through next/font. Art Deco headlines are Bodoni Moda. Sunrise headlines are Rubik at 700, a rounded face.
Rules
- Body text is 16 px or larger, with a 66-character measure.
- Line height is 1.5 or more for body, and text must reflow at 200% zoom and at 320 px wide.
- Do not set body copy in the display face.
- Sunrise pulls the four fluid display sizes in because the rounded face runs wider: --fs-5 22 to 30 px, --fs-6 30 to 52 px, --fs-7 38 to 88 px, --fs-8 42 to 116 px.
- Avoid long runs of capitals. Labels are short.