# By Hugo! – typografi

## Familjer

- **Rubriker:** Manrope, vikter 700–800.
- **Brödtext och UI:** Inter, vikter 400–700.
- **Kod, data och identiteter:** IBM Plex Mono, vikter 400–600.
- **Fallback:** Arial/system-ui för sans, Menlo/monospace för kod.

Självhosta fonterna. Rubriker är kompakta med lätt negativ teckenmellanrum.

## Hierarki

| Nivå | Desktop storlek/radhöjd | Mobil storlek/radhöjd | Vikt | Användning |
| --- | --- | --- | --- | --- |
| Display | 72 px / 76 px | 48 px / 52 px | 700–800 | Hero och kampanjrubrik |
| H1 | 52 px / 56 px | 38 px / 42 px | 700–800 | Sidans huvudrubrik |
| H2 | 40 px / 44 px | 32 px / 36 px | 700–800 | Sektionsrubrik |
| H3 | 28 px / 34 px | 24 px / 30 px | 600–700 | Grupp- och kortrubrik |
| Ingress | 20 px / 32 px | 18 px / 28 px | 400–600 | Introduktion, högst 70 tecken/rad |
| Brödtext | 16 px / 26 px | 16 px / 26 px | 400–500 | Löpande text |
| Liten text | 14 px / 21 px | 14 px / 21 px | 400–600 | Hjälptext och metadata |
| Etikett | 11 px / 16 px | 11 px / 16 px | 600–800 | Kort etikett, gärna versaler med 0,10–0,14 em spacing |

## Sättningsregler

- Begränsa löpande text till ungefär 55–75 tecken per rad.
- Använd högst tre typografiska nivåer i samma kort eller panel.
- Rubriker får lätt negativ teckenmellanrum; brödtext får aldrig pressas ihop.
- Tabeller och ekonomiska värden använder tabulära siffror.
- Knappar använder 14–16 px, vikt 600–700 och ett tydligt verb.
- Text under 12 px reserveras för kort metadata och får inte bära viktig instruktion.
- Självhosta fontfiler i produktion och kontrollera svensk teckentäckning.