Typsnitt
Två typsnitt, två roller
Blanda aldrig tvärtom. Roboto på en knapp eller Condensed i löptext bryter tonen direkt. Inga andra typsnitt, utom specialtypsnittet Kattux vid speciella tillfällen.
Roboto Condensed
Vikt 400, 500, 700. Rubriker, underrubriker, etiketter, knappar, navigation och siffror som blickfång. Smal, tydlig och lite formell.
Roboto
Vikt 400, 500, 700 och kursiv 400. Brödtext, tabeller, listor, bildtexter och sidfot. Allt som berättar något.
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Condensed:wght@400;500;700&display=swap" rel="stylesheet">| Token | Värde |
|---|---|
--mg-font-head | "Roboto Condensed", "Arial Narrow", Arial, sans-serif |
--mg-font-body | "Roboto", system-ui, Arial, sans-serif |
--mg-font-code | Consolas, ui-monospace, Menlo, monospace (bara tekniska texter) |
Skala
Storlekar och vikter
Rubrikerna är fluida (clamp()) och skalar mellan mobil och desktop. Alla storlekar finns som tokens i :root.
Vi bygger moderna, robusta och säkra applikationer skapta för att växa. Med erfarenhet av komplexa backend-system till moderna webbapplikationer arbetar vi agilt och iterativt, nära er verksamhet.
Läs mer om våra expertområden eller kontakta oss.
Org no: 556531-7129 · VAT: SE556531712901
Profiler
Tre typografiprofiler
Skalan har tre profiler. Profilen väljs med en klass på <body> och avgörs av sidtypen, inte av enskilda element.
| Profil | Klass på body | Används på | H2 | H3 | Radhöjd |
|---|---|---|---|---|---|
| Standard | ingen | Landnings- och ingångssidor | 1.5–1.8rem | 1.15–1.35rem | 1.6 |
| Editorial | mg-type-editorial | Artiklar, case, om oss, textsidor | 1.4–1.9rem | 1.15–1.35rem | 1.7 |
| Showcase | mg-type-showcase | Startsida, komponentsidor | 1.5–1.8rem | 1.3–1.6rem | 1.5 |
- Välj en profil per sida
- Behöver du en ny skala: lägg till en ny profil i
magello.css
- Ändra tokenvärden på en enskild sida
- Blanda profiler på samma sida
Regler
Så sätter du text
Typografin är ett system: roller först, storlek sedan.
- H2 på sektionsnivå är magenta: ”en ny idé börjar här”
- H2 inne i artikeltext är svart så den inte konkurrerar
- Etiketter står alltid ovanför rubriken de hör till
- Tätt radavstånd i rubriker (1.1–1.2), luftigt i brödtext (1.5–1.7)
- Mer luft ovanför en rubrik än under den
- Radlängd 70–75 tecken
- Roboto i knappar eller Condensed i löptext
- Versaler utom i etiketter
- Understrykningar utom länkar
- Löpande text i grå 300
- Utropstecken och fluffiga adjektiv
- Fler än två typsnitt
- Texten är på svenska
- Rubriker beskriver vad något är eller gör: ”Vi hjälper kunder bygga fungerande mjukvara”
- Magenta text på vitt klarar bara stor eller fet text (4,2 : 1). Länkar i löptext är därför också understrukna
Andra medier
Storlekar i dokument och presentationer
Samma proportioner som på webben, uttryckta i punkter. Skalan utgår från brödtexten (faktor 1,0) och är hämtad ur Wordmallen. I Word och PowerPoint används mallarna i assets/templates/ och deras formatmallar, se docs/office-mallar.md.
| Nivå | Word (pt) | Formatmall i Word | Faktor | Typsnitt | PowerPoint (pt) |
|---|---|---|---|---|---|
| Dokumenttitel (H1) | 36 | Inget avstånd (DocTitle) | 3,6 | Condensed 500 | 40–54 |
| Underrubrik | 22 | Underrubrik | 2,2 | Condensed 400, spärrning +0,75 | — |
| H2 (magenta) | 18 | Rubrik 1 | 1,8 | Condensed 500 | 28–32 |
| H3 | 16 | Rubrik 2 | 1,6 | Condensed 700 | — |
| H4 | 14 | Rubrik 3 | 1,4 | Condensed 700 | — |
| H5 / H6 | 12 / 10 | Rubrik 4 / 5 | 1,2 / 1,0 | Condensed 700 | — |
| Brödtext | 10 (radavstånd 1,15) | Normal, Brödtext | 1,0 | Roboto 400 | minst 18 |
| Sidfot | 6,5 | Sidfot (i mallen) | 0,65 | Roboto 400, grå 300 | — |
I en presentation: aldrig under 14 pt, helst 18 pt eller mer för brödtext.