Idé 08 · Politiken-designmanualen ind i koden
Politikens layout — målt præcist.
En fast CSS-baseline, så widgets rammer Politikens artikelkolonner uden tilfældig finjustering i CUE. Tallene herunder er nu verificeret direkte fra Politikens eget stylesheet.
Værdierne er udtrukket direkte fra politiken.desktop.css (almindelig artikel, Tailwind-baseret) og superartiklernes inline critical-CSS, og krydstjekket mod fire rigtige artikler. Det er altså de faktiske design-regler — ikke pixel-gæt fra en skærm. Senest opdateret 18. juni 2026.
Brødtekst-spalte628 pxTekstmålet i både almindelig artikel og superartikel (col--8). God baseline for tekstnære widgets.
Bred zone945 pxcol--12. Til kort, grafer og interaktive layouts med sidepanel.
Fuld content1260 pxcol--16, content-grid'ets maksimum. Derover: ægte fuld-bredde (100vw) hero/scene.
① Almindelig artikel · typografi
To skriftsystemer: Capitolium (serif) til rubrik og brødtekst, Flama (sans, semicondensed) til alt redaktionelt udstyr — manchet, byline, billedtekst, citat, lister.
Rolle
Font
Størrelse
Detaljer
Rubrik
Capitolium
64px / lh 1.05
vægt 750 · letter-spacing −1.28px
Manchet
FlamaSemiCond.
24px / lh 1.15
vægt 600 · sort
Brødtekst
Capitolium
20px / lh 1.45
vægt 400 · letter-spacing −0.2px · afsnit 32px
Drop cap
Capitolium
300% / float
første bogstav i 1. afsnit · vægt 700
Mellemrubrik
FlamaRegular
20px / lh 1.5
vægt 700
Citat
FlamaSemiCond.
30px / lh 1.15
vægt 750 · letter-spacing −0.2px
Liste
FlamaSemiCond.
18px / lh 1.15
røde bullets (#cc0000) · punkt-afstand 8px
Billedtekst
FlamaSemiCond.
16px / lh 1.15
#898782 · forskudt sidespalte (ml 8% / bredde 50%)
Byline / kicker
Flama (label)
14px UPPERCASE
vægt 750 · letter-spacing 1.8px · #4d4b46
Link i tekst
Capitolium
som brødtekst
#cc0000 · underline 1.5px / offset 2px
Levende prøve (rigtige fonte via Politikens kilder)
Unge bruger uv-indeks til at få farlige stråler
Det er blevet en udbredt vane blandt unge at tjekke uv-indekset, før de lægger sig i solen. Læs mere om indekset her, hvis du er i tvivl om tallene.
② Farvesystem
Hele designet hviler på én varm-grå “paper”-skala (al tekst og baggrund er trin på den) plus én ægte accent: Politiken-rød til links, bullets og tags. De grå, vi tidligere målte som tilfældige hex, er bare faste trin på skalaen.
③ Superartikel · eget system
Superartikler kører på en anden skabelon (BEM-klasser, ~960 KB inline critical-CSS — ikke Tailwind). Stor variation er normal: de vælger komponenter fra et bibliotek frem for ét fast layout. Rubrikken vælges fra en fast størrelsesskala, og hver artikel har en tema-farve der farver rubrik, links og knapper.
--small (20px)Superartikel
--xxlarge (32px)Superartikel
--mega (44px) ←typiskSuperartikel
--minijumbo (50px)Superartikel
--jumbo (72px)Super
Rubrik = CapitoliumBold. Manchet/resumé = FlamaBook (#666). Kicker = FlamaSemibold, versaler. Brødtekst er bag betalingsmur og endnu uverificeret. Samme bredde-grid som almindelig artikel (630 / 945 / 1260px).
Tema-farver (vælges pr. artikel)
CSS-baseline til nye widgets
politiken-widget-baseline.css
/* Politikens egne tokens — verificeret fra politiken.desktop.css */ :root { --pk-serif: "Capitolium", Georgia, serif; --pk-sans: "FlamaSemiCondensed", system-ui, sans-serif; --pk-ink: #000; --pk-byline: #4d4b46; /* paper-1000 */ --pk-caption: #898782; /* paper-800 */ --pk-red: #cc0000; /* pol-500 */ } .pk-widget { box-sizing: border-box; width: 100%; max-width: var(--pk-widget-max, 628px); /* tekstspalte */ margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); font-family: var(--pk-sans); } .pk-widget[data-width="wide"] { --pk-widget-max: 945px; } .pk-widget[data-width="max"] { --pk-widget-max: 1260px; } .pk-widget[data-width="full"] { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
Stadig ikke verificeret