Typography
scale ratio 1.328- SF Pro (system-ui)css: -apple-systemdisplay + body400 500 600 70089%
- Jbcss: jbmono40011%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | SF Pro (system-ui) | 56px | 700 | 0.95 | -0.025em |
| headline | SF Pro (system-ui) | 40px | 700 | 0.95 | -0.015em |
| title | SF Pro (system-ui) | 18px | 600 | 1.5 | 0em |
| body | SF Pro (system-ui) | 18px | 400 | 1.6 | 0em |
| body-sm | Jb | 13.6px | 400 | 1.5 | 0em |
| label | SF Pro (system-ui) | 14.4px | 400 | 1.4 | 0em |
Type scale
Aa13.5Aa14.5Aa15Aa17Aa18Aa23Aa24Aa40Aa56
- Body size
- 18px / 1.5
- Display size
- 56px
- Display tracking
- -0.025em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 14.80:1
- Muted on bg
- 7.66:1
- Accent on bg
- 5.25:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale
- 2.5
- 3
- 4
- 5.5
- 7
- 8
- 9.5
- 10
- 11
- 12
- 13
- 16
- 19
- 24
Corner radii
6101214pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 72px
Components
exact computed valuesbutton-primary
Start free trial
- backgroundColor
- #6A51EC
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 10.8px 12px
- height
- 31.2px
- fontFamily
- SF Pro (system-ui)
- fontSize
- 13.6px
- fontWeight
- 500
Layout & motion
- Container
- 880px
- Grid columns
- 12
- Hero
- left-aligned+media-below
- Navigation
- none-detected
- Page height
- 8,327px
- Easing
- ease
- Durations
- 140ms 150ms 200ms 250ms
- Transitions
- 90
- Keyframes
- 1
- Stack
- astro, vercel
Page sections (10)
01nav
02heroAnalytics without the cookies
03featuresWe sell software, not data
04featuresA lightweight script for a fast website
05logosTrusted by 1,000,000+ websites and counting
06featuresGetting started with Fathom is easy
07logosFathom easily with all content management systems and developer frameworks
08faqFrequently asked questions
09ctaWebsite analytics deserved better, so we built something better
10footerFathom Analytics
How Usefathom compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.33×: steeper than 64% of indexed sites (median 1.28×).
- Container
- 880px: narrower than 88% of indexed sites (median 1242px).
- Text contrast
- 14.8:1: lower than 77% of indexed sites (median 17.6:1).
- Page length
- 8,327px: longer than 51% of indexed sites (median 8,217px).
- Corner radius
- Mostly 6px, shared by 14 of 274 indexed sites (5%).
- Jb
- The only site in the index that loads Jb.
- 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 Usefathom use?
Usefathom uses SF Pro (system-ui) (loaded as "-apple-system") for headings and body text. Jb (loaded as "jb") is used for code.
What are Usefathom's brand colors?
Usefathom's website uses a light scheme: background #FFFFFF, surface #F4F6F5, text #242925, muted text #4E5551.
How is Usefathom's website laid out?
The most common corner radius is 6px, body text is 18px with 1.5 line height, and the page container is 880px wide.
