Typography
- Apercudisplay + body40099%
- Apercu Monomono4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Apercu | 20px | 400 | 1.4 | 0em |
| headline | Apercu | 12px | 400 | 1.7 | 0.003em |
| body | Apercu | 14px | 400 | 1.4 | 0em |
| mono | Apercu Mono | 12px | 400 | 1.4 | 0em |
Type scale
Aa12Aa14Aa20
- Body size
- 14px / 1.4
- Display size
- 20px
- Display tracking
- 0em
- Case
- upper
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 5.74:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 5
- 6
- 8
- 10
- 11
- 15
- 16
- 20
- 32
- 34
Corner radii
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 80px
Components
exact computed valuesinput
- rounded
- 0px
- height
- 46px
- padding
- 22px 8px
- backgroundColor
- #FFFFFF
- border
- 1px solid #E8E8E8
Layout & motion
- Container
- 1376px
- Grid columns
- n/a
- Hero
- unknown
- Navigation
- top-fixed
- Page height
- 4,746px
- Easing
- ease-in-out
- Durations
- 100ms 200ms 400ms 500ms
- Transitions
- 109
- Keyframes
- 3
- Stack
- shopify, react, google-tag-manager, cloudflare
Page sections (3)
01heroGet 3 Balms for £30!
02features
03footer
How Glossier compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 20px: smaller than 94% of indexed sites (median 60px).
- Container
- 1376px: wider than 96% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 4,746px: shorter than 80% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Apercu
- One of 3 indexed sites that load Apercu (1%).
- Apercu Mono
- The only site in the index that loads Apercu Mono.
- 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 Glossier use?
Glossier uses Apercu for headings and body text. Apercu Mono is used for code.
What are Glossier's brand colors?
Glossier's website uses a light scheme: background #FFFFFF, surface #FAF2F4, text #000000, muted text #666666.
How is Glossier's website laid out?
The most common corner radius is 0px, body text is 14px with 1.4 line height, and the page container is 1376px wide.
