Typography
scale ratio 1.162- TNY Adobe Caslon Procss: TNYAdobeCaslonProbody40063%
- Irvin Heading Procss: IrvinHeadingProdisplay40022%
- Neutraface New Yorkercss: NeutrafaceNewYorkerother400 6007%
- Graphikui400 5005%
- Irvin Textcss: IrvinTextother4003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Irvin Heading Pro | 36px | 400 | 1.111 | 0em |
| headline | Irvin Heading Pro | 28px | 400 | 1.143 | 0em |
| title | TNY Adobe Caslon Pro | 22px | 400 | 1.273 | 0em |
| body | TNY Adobe Caslon Pro | 17px | 400 | 1.412 | 0em |
| body-sm | Neutraface New Yorker | 15px | 600 | 1.143 | 0em |
| label | Graphik | 14px | 500 | 1.71 | -0.012em |
Type scale
Aa10Aa12Aa13Aa14Aa15Aa17Aa20Aa21Aa22Aa28Aa36
- Body size
- 17px / 1.412
- Display size
- 36px
- Display tracking
- 0em
- Case
- title
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 12.63:1
- Accent on bg
- 4.67:1
- Dark mode
- none
Declared accent tokens
- --color-action-brand-default#0879BFpainted
- --color-surface-navigation-feature-brand#0879BFpainted
Space, shape & depth
Spacing scale (base 8px)
- 4
- 8
- 16
- 24
- 32
- 48
- 56
- 64
Corner radii
416pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 73px
Layout & motion
- Container
- 1312px
- Grid columns
- 12
- Hero
- split
- Navigation
- top-static
- Page height
- 17,419px
- Easing
- ease
- Durations
- 100ms 200ms 300ms 1000ms
- Transitions
- 219
- Keyframes
- 0
- Stack
- react, google-tag-manager, cloudfront
Page sections (18)
section labels are heuristic
01heroJensen Huang, Nvidia, and the A.I. Revolution
02features?Today’s Mix
03features?The Lede
04content?
05features?Gift Guides
06features?The Critics
07features?Our Columnists
08features?The New Yorker Festival
09content?
10features?Ideas
11features?Puzzles & Games
12content?
13logosIn Case You Missed It
14feature detail?Fiction
15features?The Talk of the Town
16feature detail?Daily Cartoon
17features?Shouts & Murmurs
How Newyorker compares
- Body text
- 17px: larger than 65% of indexed sites (median 16px).
- Largest heading
- 36px: smaller than 82% of indexed sites (median 60px).
- Type scale
- 1.16×: flatter than 95% of indexed sites (median 1.28×).
- Container
- 1312px: wider than 73% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 17,419px: longer than 95% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- TNY Adobe Caslon Pro
- The only site in the index that loads TNY Adobe Caslon Pro.
- Irvin Heading Pro
- The only site in the index that loads Irvin Heading Pro.
- 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 Newyorker use?
Newyorker uses TNY Adobe Caslon Pro (loaded as "TNYAdobeCaslonPro") for body text. Irvin Heading Pro (loaded as "IrvinHeadingPro") is used for headings. Neutraface New Yorker (loaded as "NeutrafaceNewYorker") is used for other.
What are Newyorker's brand colors?
Newyorker's website uses a light scheme: background #FFFFFF, surface #F6F4EF, text #000000, muted text #333333 and borders #E5E5E5.
How is Newyorker's website laid out?
The most common corner radius is 4px, body text is 17px with 1.412 line height, and the page container is 1312px wide.
