Typography
scale ratio 2.154- General Sanscss: _General_Sans_Variabledisplay40035%
- Clash Displaycss: _Clash_Display_Variableother40033%
- Satoshicss: _Satoshi_Variableother40019%
- Passenger Sanscss: Passenger-Sansbody400 500 70014%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Satoshi | 120px | 400 | 1.2 | 0em |
| body | Passenger Sans | 12px | 400 | 1.167 | 0em |
Type scale
Aa12Aa16Aa24Aa120
- Body size
- 12px / 1.167
- Display size
- 120px
- Display tracking
- 0em
- Case
- mixed
Color
light schemePalette by painted area
- Text on bg
- 18.74:1
- Muted on bg
- 1.82:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 5px)
- 5
- 6
- 10
- 15
- 20
- 25
- 40
- 60
Corner radii
pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesinput
- rounded
- 0px
- height
- 59px
- padding
- 0px 0px
Layout & motion
- Container
- 1359px
- Grid columns
- 8
- Hero
- left-aligned
- Navigation
- top-static+transparent
- Page height
- 900px
- Easing
- ease
- Durations
- 150ms 300ms
- Transitions
- 71
- Keyframes
- 0
- Stack
- cloudfront
Page sections (4)
01nav
02hero
How Fontshare compares
- Body text
- 12px: smaller than 96% of indexed sites (median 16px).
- Largest heading
- 120px: larger than 95% of indexed sites (median 60px).
- Type scale
- 2.15×: steeper than 99% of indexed sites (median 1.28×).
- Container
- 1359px: wider than 88% of indexed sites (median 1242px).
- Text contrast
- 18.7:1: higher than 64% 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%).
- General Sans
- The only site in the index that loads General Sans.
- Clash Display
- The only site in the index that loads Clash Display.
- 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 Fontshare use?
Fontshare uses General Sans (loaded as "_General_Sans_Variable") for headings. Clash Display (loaded as "_Clash_Display_Variable") is used for other. Satoshi (loaded as "_Satoshi_Variable") is used for other.
What are Fontshare's brand colors?
Fontshare's website uses a light scheme: background #FFFFE3, text #10100E, muted text #C0C0AB and borders #E8E8CF.
How is Fontshare's website laid out?
The most common corner radius is 0px, body text is 12px with 1.167 line height, and the page container is 1359px wide.
