Typography
scale ratio 1.181- GH Guardian Headlinedisplay + body500 70076%
- Guardian Text Sanscss: GuardianTextSansother400 70024%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | GH Guardian Headline | 28px | 700 | 1.15 | 0em |
| headline | Guardian Text Sans | 20px | 700 | 1.3 | 0em |
| title | GH Guardian Headline | 17px | 700 | 1.15 | 0em |
| body | GH Guardian Headline | 17px | 500 | 1.15 | 0em |
| body-sm | Guardian Text Sans | 14px | 400 | 1.3 | 0em |
| label | Guardian Text Sans | 17px | 400 | 1.3 | 0em |
Type scale
Aa12Aa14Aa15Aa16Aa17Aa20Aa24Aa28
- Body size
- 17px / 1.15
- Display size
- 28px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 18.73:1
- Muted on bg
- 4.95:1
- Accent on bg
- 14.00:1
- Dark mode
- none
Declared accent tokens
- --table-of-contents-accent#C70000painted
- --button-background-primary#052962painted
- --product-button-primary-background#7D0068not on page
- --discussion-primary-button-background#AB0613not on page
Space, shape & depth
Spacing scale
- 2
- 3
- 4
- 5
- 6
- 8
- 10
- 12
- 20
- 24
- 98
- 176
Corner radii
12pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
News
- backgroundColor
- #052962
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 0px 8px
- height
- 52px
- fontFamily
- GH Guardian Headline
- fontSize
- 24px
- fontWeight
- 700
Layout & motion
- Container
- 1300px
- Grid columns
- 2
- Hero
- unknown
- Navigation
- none-detected
- Page height
- 25,978px
- Easing
- ease
- Durations
- 80ms 250ms 300ms 400ms
- Transitions
- 16
- Keyframes
- 0
- Stack
- n/a
Page sections (41)
section labels are heuristic
02content?
03features?In focus
04features?Cop31
05features?Features
06feature detail?The long read
07features?Opinion
08features?More opinion
09features?Editorials
10features?Letters
11feature detail?Cartoon
12features?More sport
13features?More top stories
14features?Climate crisis & environment
15features?UK news
16features?World news
17features?Business & technology
18features?Culture
19features?What to watch
20features?What to listen to
21features?What to read
22features?What to play
23features?What to visit
How Theguardian compares
- Body text
- 17px: larger than 65% of indexed sites (median 16px).
- Largest heading
- 28px: smaller than 90% of indexed sites (median 60px).
- Type scale
- 1.18×: flatter than 90% of indexed sites (median 1.28×).
- Container
- 1300px: wider than 70% of indexed sites (median 1242px).
- Text contrast
- 18.7:1: higher than 63% of indexed sites (median 17.6:1).
- Page length
- 25,978px: longer than 98% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- GH Guardian Headline
- The only site in the index that loads GH Guardian Headline.
- Guardian Text Sans
- The only site in the index that loads Guardian Text Sans.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Theguardian use?
Theguardian uses GH Guardian Headline for headings and body text. Guardian Text Sans (loaded as "GuardianTextSans") is used for other.
What are Theguardian's brand colors?
Theguardian's website uses a light scheme: background #FFFFFF, surface #F6F6F6, text #121212, muted text #707070 and borders #DCDCDC.
How is Theguardian's website laid out?
The most common corner radius is 0px, body text is 17px with 1.15 line height, and the page container is 1300px wide.
Similar to Theguardian
Noe Standard / Atlas Grotesk / Noe Text#FAF8F0
Asteriskmagasteriskmag.com
Recoleta / Albert Sans#FFFCF3
Eatfishwifeeatfishwife.com
Plantin / Helvetica Neue / Monocons#FFFFFF
Monoclemonocle.com
Untitled Serif Font / Untitled Sans Font / Inter Font#FCF9F7
Craftcraft.do
Roboto / Poppins#FFFFFF
Honeycombhoneycomb.io