Typography
scale ratio 1.826- Din Procss: din-probody400 50089%
- Din Pro Alternatecss: din-pro-alternatedisplay40011%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Din Pro Alternate | 50px | 400 | 1.1 | -0.04em |
| headline | Din Pro | 24px | 500 | 1.042 | -0.042em |
| body | Din Pro | 15px | 400 | 1.333 | 0.013em |
| label | Din Pro | 12px | 500 | 0em |
Type scale
Aa12Aa15Aa24Aa50
- Body size
- 15px / 1.4
- Display size
- 50px
- Display tracking
- -0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 18.43:1
- Muted on bg
- undefined:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 2
- 7
- 9
- 10
- 13
- 15
- 20
- 40
- 278
Corner radii
pill
Shadows (2)
- Borders
- none
- Section padding
- n/a
Layout & motion
- Container
- 884px
- Grid columns
- n/a
- Hero
- left-aligned
- Navigation
- top-static+transparent
- Page height
- 900px
- Easing
- ease-in-out
- Durations
- 100ms 300ms 400ms 1000ms
- Transitions
- 29
- Keyframes
- 1
- Stack
- jquery, google-tag-manager
Page sections (2)
01nav
02footerWelcome to the Design Museum
How Design Museum compares
- Body text
- 15px: smaller than 76% of indexed sites (median 16px).
- Largest heading
- 50px: smaller than 66% of indexed sites (median 60px).
- Type scale
- 1.83×: steeper than 98% of indexed sites (median 1.28×).
- Container
- 884px: narrower than 88% of indexed sites (median 1242px).
- Text contrast
- 18.4:1: higher than 58% of indexed sites (median 17.6:1).
- Page length
- 900px: shorter than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Din Pro
- The only site in the index that loads Din Pro.
- Din Pro Alternate
- The only site in the index that loads Din Pro Alternate.
- 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 Design Museum use?
Design Museum uses Din Pro (loaded as "din-pro") for body text. Din Pro Alternate (loaded as "din-pro-alternate") is used for headings.
What are Design Museum's brand colors?
Design Museum's website uses a light scheme: background #F0F0F0, text #000000.
How is Design Museum's website laid out?
The most common corner radius is 0px, body text is 15px with 1.4 line height, and the page container is 884px wide.
