Typography
scale ratio 1.491- Labil Variablecss: LabilVariabledisplay + body40081%
- Labilother400 50011%
- Bradfordother4008%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Labil Variable | 40px | 400 | 1.2 | 0.025em |
| headline | Labil Variable | 25px | 400 | 1.28 | 0.032em |
| body | Labil Variable | 18px | 400 | 1.278 | 0.056em |
| body-sm | Labil | 11px | 400 | 1.455 | 0.091em |
| label | Labil Variable | 15px | 400 | 1.4 | 0.067em |
Type scale
Aa11Aa13Aa15Aa17Aa18Aa25Aa40
- Body size
- 18px / 1.278
- Display size
- 40px
- Display tracking
- 0.025em
- Case
- title
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 14.16:1
- Accent on bg
- 4.91:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 5px)
- 5
- 8
- 10
- 12.5
- 16
- 20
- 40
- 60
- 120
Corner radii
pill
Shadows (2)
- Borders
- none
- Section padding
- 160px
Components
exact computed valuesbutton-primary
Search
- backgroundColor
- #8147FF
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 20px
- height
- 49px
- fontFamily
- Labil
- fontSize
- 13px
- fontWeight
- 400
input
- rounded
- 0px
- height
- 50px
- padding
- 15px 20px
- backgroundColor
- #EFEFEF4D
Layout & motion
- Container
- 1200px
- Grid columns
- n/a
- Hero
- left-aligned
- Navigation
- top-static+transparent
- Page height
- 14,547px
- Easing
- ease-in
- Durations
- 50ms 100ms 200ms 300ms
- Transitions
- 208
- Keyframes
- 0
- Stack
- react, google-tag-manager, cloudflare, cloudfront
Page sections (12)
section labels are heuristic
01nav
03content?
04feature detail?The next generation of creative talent: introducing Ones to Watch 2026
05features?Projects + Creatives
06features?Insight + Opinion
07features?“Designing a good poster is a dark art” – highlights from this year’s INTL poste
08features?Resources + Advice
09features?Culture + Lifestyle
11newsletterIt's Nice That Newsletters
12footer
How It's Nice That compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 40px: smaller than 79% of indexed sites (median 60px).
- Type scale
- 1.49×: steeper than 88% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 14,547px: longer than 90% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Labil Variable
- The only site in the index that loads Labil Variable.
- Labil
- The only site in the index that loads Labil.
- 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 It's Nice That use?
It's Nice That uses Labil Variable (loaded as "LabilVariable") for headings and body text. Labil is used for other. Bradford is used for other.
What are It's Nice That's brand colors?
It's Nice That's website uses a light scheme: background #FFFFFF, surface #F4F4F4, text #000000, muted text #2B2B2B.
How is It's Nice That's website laid out?
The most common corner radius is 0px, body text is 18px with 1.278 line height, and the page container is 1200px wide.
