Typography
scale ratio 1.194- Pangrambody400 500 600 700 80051%
- Noe Displaydisplay70041%
- Merriweatherother400 500 7009%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Noe Display | 45px | 700 | 1.05 | 0em |
| headline | Pangram | 10px | 700 | 1.4 | 0.2em |
| title | Noe Display | 22px | 700 | 1.4 | 0em |
| body | Pangram | 13px | 400 | 1.875 | 0em |
| body-sm | Pangram | 12px | 400 | 1 | 0em |
| label | Pangram | 10px | 600 | 1.4 | 0.3em |
Type scale
Aa9Aa10Aa11.5Aa12Aa13Aa15Aa16Aa18Aa22Aa35Aa40Aa45
- Body size
- 13px / 1.875
- Display size
- 45px
- Display tracking
- 0em
- Case
- title
Color
light schemePalette by painted area
- Text on bg
- 17.40:1
- Muted on bg
- 5.33:1
- Accent on bg
- 2.42:1
- Dark mode
- none
Declared accent tokens
- --theme-accent#FF8600painted
Space, shape & depth
Spacing scale
- 2.5
- 3
- 3.5
- 4
- 5
- 6
- 7.5
- 8
- 10
- 12
- 16
- 20
- 22.5
- 32
Corner radii
pill
Shadows (2)
- Borders
- regular, 2px
- Section padding
- 80px
Components
exact computed valuesbutton-secondary
Read the Latest →
- textColor
- #1A1A1A
- rounded
- 0px
- padding
- 13px 35px
- height
- 57.1px
- fontFamily
- Pangram
- fontSize
- 16px
- fontWeight
- 700
- border
- 2px solid #FF8600
input
- rounded
- 0px
- height
- 60px
- padding
- 18px 21.6px
Layout & motion
- Container
- 1160px
- Grid columns
- n/a
- Hero
- left-aligned
- Navigation
- none-detected
- Page height
- 6,369px
- Easing
- ease-in-out
- Durations
- 150ms 200ms 500ms
- Transitions
- 308
- Keyframes
- 0
- Stack
- wordpress, tailwind, jquery, google-tag-manager, cloudflare
Page sections (6)
section labels are heuristic
03features?Is There Anything Left in the Dream of Cold Fusion?
04features?Featured Videos
05feature detail?About Quanta Magazine
06footer
How Quanta Magazine compares
- Body text
- 13px: smaller than 94% of indexed sites (median 16px).
- Largest heading
- 45px: smaller than 76% of indexed sites (median 60px).
- Type scale
- 1.19×: flatter than 84% of indexed sites (median 1.28×).
- Container
- 1160px: narrower than 68% of indexed sites (median 1242px).
- Text contrast
- 17.4:1: lower than 51% of indexed sites (median 17.6:1).
- Page length
- 6,369px: shorter than 66% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Pangram
- The only site in the index that loads Pangram.
- Noe Display
- The only site in the index that loads Noe Display.
- 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 Quanta Magazine use?
Quanta Magazine uses Pangram for body text. Noe Display is used for headings. Merriweather is used for other.
What are Quanta Magazine's brand colors?
Quanta Magazine's website uses a light scheme: background #FFFFFF, surface #EFEFEF, text #1A1A1A, muted text #6B6B6B.
How is Quanta Magazine's website laid out?
The most common corner radius is fully rounded (pill), body text is 13px with 1.875 line height, and the page container is 1160px wide.
