Typography
scale ratio 1.189- Wotfarddisplay + body400 500 600 70099%
- Cartograph CFmono6001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Wotfard | 32px | 700 | 1.5 | 0em |
| headline | Wotfard | 16px | 500 | 1.5 | 0.125em |
| body | Wotfard | 16px | 400 | 1.5 | 0em |
| body-sm | Wotfard | 14px | 400 | 1.5 | 0em |
| mono | Cartograph CF | 15.94px | 600 | 1.5 | 0em |
Type scale
Aa12Aa14Aa16Aa17Aa19Aa22Aa32
- Body size
- 16px / 1.5
- Display size
- 32px
- Display tracking
- 0em
- Case
- upper
Color
light schemePalette by painted area
- Text on bg
- 19.57:1
- Muted on bg
- 6.27:1
- Accent on bg
- 1.42:1
- Dark mode
- follows system
Declared accent tokens
- --color-primary#4242FApainted
- --color-page-primary#4242FApainted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 5
- 8
- 12
- 16
- 32
- 36
- 48
- 96
- 170
Corner radii
24812
Shadows (1)
- Borders
- none
- Section padding
- 32px
Components
exact computed valuesbutton-primary
React
- backgroundColor
- #B1DFF6
- textColor
- #0A0C10
- rounded
- 8px
- padding
- 5px 12px
- height
- 31px
- fontFamily
- Wotfard
- fontSize
- 14px
- fontWeight
- 400
input
- rounded
- 0px
- height
- 36px
- padding
- 4px 8px
Layout & motion
- Container
- 1100px
- Grid columns
- 2
- Hero
- split
- Navigation
- top-static+transparent
- Page height
- 4,168px
- Easing
- ease
- Durations
- 200ms 300ms 350ms 950ms
- Transitions
- 27
- Keyframes
- 7
- Stack
- next.js, vercel
Page sections (3)
section labels are heuristic
01hero
02content?
03footerGeneral
How Josh W. Comeau compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 32px: smaller than 85% of indexed sites (median 60px).
- Type scale
- 1.19×: flatter than 85% of indexed sites (median 1.28×).
- Container
- 1100px: narrower than 75% of indexed sites (median 1242px).
- Text contrast
- 19.6:1: higher than 71% of indexed sites (median 17.6:1).
- Page length
- 4,168px: shorter than 82% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Wotfard
- The only site in the index that loads Wotfard.
- Cartograph CF
- The only site in the index that loads Cartograph CF.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Josh W. Comeau use?
Josh W. Comeau uses Wotfard for headings and body text. Cartograph CF is used for code.
What are Josh W. Comeau's brand colors?
Josh W. Comeau's website uses a light scheme: background #FFFFFF, text #0A0C10, muted text #5A6072.
How is Josh W. Comeau's website laid out?
The most common corner radius is 8px, body text is 16px with 1.5 line height, and the page container is 1100px wide.
