Typography
scale ratio 1.155- Plantindisplay + body40092%
- Helvetica Neueui400 7008%
- Monoconscss: monoconsmono4000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Plantin | 32px | 400 | 1.2 | 0em |
| headline | Plantin | 28px | 400 | 1.25 | 0em |
| title | Plantin | 16px | 400 | 1.375 | 0em |
| body | Plantin | 18px | 400 | 1.444 | 0em |
| body-sm | Plantin | 13px | 400 | 1.384 | 0em |
| label | Helvetica Neue | 16px | 400 | 1.125 | 0em |
| mono | Monocons | 13.5px | 400 | 1.444 | 0em |
Type scale
Aa13Aa14Aa16Aa18Aa20Aa24Aa28Aa32
- Body size
- 18px / 1.444
- Display size
- 32px
- Display tracking
- 0em
- Case
- upper
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 5.10:1
- Accent on bg
- 1.59:1
- Dark mode
- none
Declared accent tokens
- --surface-brand-primary#FFC500painted
- --guide-partner-brand-color#3070C8not on page
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 12
- 16
- 24
- 32
- 80
Corner radii
8pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 48px
Components
exact computed valuesbutton-primary
Listen Live
- backgroundColor
- #FFC500
- textColor
- #000000
- rounded
- 0px
- padding
- 0px 16px
- height
- 44px
- fontFamily
- Helvetica Neue
- fontSize
- 13px
- fontWeight
- 700
button-secondary
View Full Programme
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 0px 16px
- height
- 44px
- fontFamily
- Helvetica Neue
- fontSize
- 13px
- fontWeight
- 700
- border
- 1px solid #FFFFFF
card
- rounded
- 8px
- padding
- 16px
- backgroundColor
- #64D5FF
input
- rounded
- 0px
- height
- 40px
- padding
- 16px 16px
- backgroundColor
- #FFFFFF
Layout & motion
- Container
- 1296px
- Grid columns
- 12
- Hero
- unknown
- Navigation
- none-detected
- Page height
- 10,260px
- Easing
- ease-in
- Durations
- 200ms 250ms 500ms
- Transitions
- 26
- Keyframes
- 1
- Stack
- wordpress, google-tag-manager, cloudflare
Page sections (14)
section labels are heuristic
01hero
02logos?
03features?
04feature detail?Tokaido and Sanyo Shinkansen’s new Supreme Class: Japan’s bullet train gets priv
05testimonialsLatest from Monocle radio
06testimonialsMEET OUR COLUMNISTS
07testimonialsCITY GUIDES
08testimonialsTRAVEL
09testimonialsFROM THE MONOCLE shop
10testimonialsFROM OUR PARTNERS
11testimonialsMONOCLE BOOKS
12testimonialsLONGER READS
13newsletterWant more stories like these in your inbox?
14footer
How Monocle compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 32px: smaller than 85% of indexed sites (median 60px).
- Type scale
- 1.16×: flatter than 95% of indexed sites (median 1.28×).
- Container
- 1296px: wider than 68% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 10,260px: longer than 68% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Plantin
- The only site in the index that loads Plantin.
- Helvetica Neue
- The only site in the index that loads Helvetica Neue.
- 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 Monocle use?
Monocle uses Plantin for headings and body text. Helvetica Neue is used for ui. Monocons (loaded as "monocons") is used for code.
What are Monocle's brand colors?
Monocle's website uses a light scheme: background #FFFFFF, surface #FDFBE4, text #000000, muted text #6E6E6E and borders #000000.
How is Monocle's website laid out?
The most common corner radius is 0px, body text is 18px with 1.444 line height, and the page container is 1296px wide.
Similar to Monocle
Noe Standard / Atlas Grotesk / Noe Text#FAF8F0
Asteriskmagasteriskmag.com
Recoleta / Albert Sans#FFFCF3
Eatfishwifeeatfishwife.com
GH Guardian Headline / Guardian Text Sans#FFFFFF
Theguardiantheguardian.com
Untitled Serif Font / Untitled Sans Font / Inter Font#FCF9F7
Craftcraft.do
ITC Garamond Condensed / GT Alpina Typewriter / Apercu#D1E030
GRAZAgraza.co