Typography
scale ratio 1.357- Novembercss: novemberdisplay + body400 70092%
- Zeddisplay l Rondslntwdthwght rond0slnt0wdth100wght400Customcss: zeddisplay_l_rondslntwdthwght_rond0slnt0wdth100wght400Customother4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Zeddisplay l Rondslntwdthwght rond0slnt0wdth100wght400Custom | 190px | 400 | 1 | 0em |
| headline | November | 40px | 700 | 1.2 | 0em |
| title | November | 20px | 700 | 1.2 | 0em |
| body | November | 16px | 400 | 1.5 | 0.01em |
| body-sm | November | 13px | 400 | 1 | 0em |
Type scale
Aa11Aa13Aa16Aa18Aa20Aa40
- Body size
- 16px / 1.5
- Display size
- 190px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 2.85:1
- Accent on bg
- 14.74:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 5px)
- 10
- 15
- 20
- 30
- 60
- 80
- 227
Corner radii
24pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 80px
Components
exact computed valuesbutton-primary
Learn More
- backgroundColor
- #282828
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 0px 0px
- height
- 60px
- fontFamily
- November
- fontSize
- 13px
- fontWeight
- 400
input
- rounded
- 9999px
- height
- 60px
- padding
- 10px 15px
Layout & motion
- Container
- 1280px
- Grid columns
- 4
- Hero
- left-aligned
- Navigation
- top-static+blur
- Page height
- 4,040px
- Easing
- ease
- Durations
- 150ms 200ms 250ms
- Transitions
- 52
- Keyframes
- 0
- Stack
- next.js, vercel
Page sections (7)
section labels are heuristic
01nav
02hero
03features?Blog
04feature detail?Global Fonts
05features?Fonts In Use
06newsletterNewsletter
07footer
How Typotheque compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 190px: larger than 98% of indexed sites (median 60px).
- Type scale
- 1.36×: steeper than 72% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 4,040px: shorter than 83% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- November
- The only site in the index that loads November.
- Zeddisplay l Rondslntwdthwght rond0slnt0wdth100wght400Custom
- The only site in the index that loads Zeddisplay l Rondslntwdthwght rond0slnt0wdth100wght400Custom.
- 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 Typotheque use?
Typotheque uses November (loaded as "november") for headings and body text. Zeddisplay l Rondslntwdthwght rond0slnt0wdth100wght400Custom (loaded as "zeddisplay_l_rondslntwdthwght_rond0slnt0wdth100wght400Custom") is used for other.
What are Typotheque's brand colors?
Typotheque's website uses a light scheme: background #FFFFFF, surface #F8F8F8, text #000000, muted text #999999.
How is Typotheque's website laid out?
The most common corner radius is 0px, body text is 16px with 1.5 line height, and the page container is 1280px wide.
