Typography
scale ratio 1.223- Tobiasdisplay40040%
- Twklausanne 400body400 70037%
- Twklausanne 350other40015%
- Twklausanne 500other4006%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Tobias | 80px | 400 | 1 | -0.012em |
| headline | Twklausanne 500 | 24px | 400 | 1.15 | -0.01em |
| title | Twklausanne 400 | 16px | 700 | 1 | 0em |
| body | Twklausanne 400 | 16px | 400 | 1.2 | 0em |
| body-sm | Arial | 14px | 400 | 0em | |
| label | Twklausanne 400 | 14px | 400 | 1.486 | 0em |
Type scale
Aa14Aa16Aa20Aa24Aa28Aa36Aa48Aa56Aa64Aa80
- Body size
- 16px / 1.3
- Display size
- 80px
- Display tracking
- -0.012em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 14.69:1
- Muted on bg
- undefined:1
- Accent on bg
- 14.69:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 4
- 6
- 8
- 12
- 16
- 20
- 24
- 32
- 40
- 48
- 80
- 120
Corner radii
81224pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 120px
Components
exact computed valuesbutton-primary
Sign up
- backgroundColor
- #FAF9FB
- textColor
- #2A222B
- rounded
- 12px
- padding
- 12px 20px
- height
- 40px
- fontFamily
- Twklausanne 500
- fontSize
- 16px
- fontWeight
- 400
button-secondary
Contact sales
- textColor
- #FAF9FB
- rounded
- 12px
- padding
- 8px 20px
- height
- 40px
- fontFamily
- Twklausanne 500
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #FAF9FB
card
- rounded
- 12px
- padding
- 24px
- backgroundColor
- #2A222B
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(173, 158, 177, 0.07) -10px -10px 20px -10px inset, rgb(37, 28, 39) 10px 10px 20px
Layout & motion
- Container
- 1280px
- Grid columns
- 3
- Hero
- centered+media-below
- Navigation
- top-sticky+transparent
- Page height
- 8,750px
- Easing
- ease
- Durations
- 200ms 250ms 300ms 350ms
- Transitions
- 81
- Keyframes
- 4
- Stack
- webflow, vue, gsap, jquery, google-tag-manager, cloudflare, cloudfront
Page sections (11)
section labels are heuristic
02features?Advanced Analytics
03feature detail?When the form ends, the flow begins...
04features?Customer Engagement
05content?
06features?Verified Panel Recruitment
07logosJoin 150,000+ businesses driving revenue with Typeform
08testimonials
09logosIntegrate with your tech stack
10cta?AI forms and automation. All in Typeform.
11footerGet to know us
How Typeform compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 80px: larger than 80% of indexed sites (median 60px).
- Type scale
- 1.22×: flatter than 72% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 14.7:1: lower than 78% of indexed sites (median 17.6:1).
- Page length
- 8,750px: longer than 54% of indexed sites (median 8,217px).
- Corner radius
- Mostly 24px, shared by 7 of 274 indexed sites (3%).
- Tobias
- One of 2 indexed sites that load Tobias (1%).
- Twklausanne 400
- The only site in the index that loads Twklausanne 400.
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Typeform use?
Typeform uses Tobias for headings. Twklausanne 400 is used for body text. Twklausanne 350 is used for other.
What are Typeform's brand colors?
Typeform's website uses a dark scheme: background #2A222B, surface #3E3040, text #FAF9FB.
How is Typeform's website laid out?
The most common corner radius is 24px, body text is 16px with 1.3 line height, and the page container is 1280px wide.
