Typography
scale ratio 1.271- Neue Montrealbody400 60043%
- Altera Carvecss: altera-carve-semibolddisplay400 60012%
- Neue Gstaad Normal Normalcss: neue-gstaad-normal-normal-semiboldother4009%
- Stylocss: stylo-blackother8507%
- Font Heading hxTGmXcss: font-heading_hxTGmXother1006%
- Kyotocss: kyoto-semiboldother6004%
- Museumcss: museum-lightother3003%
- Moricss: mori-boldother7003%
- Neue Corp Normalcss: neue-corp-normal-semiboldother5003%
- Watchcss: watch-mediumother4853%
- Neue York Normalcss: neue-york-normal-boldother7003%
- Neue Gstaad Normalcss: neue-gstaad-normal-boldother7003%
- Framacss: frama-semiboldother5802%
- Palma Fizzycss: palma-fizzy-heavyother8002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Altera Carve | 169.2px | 400 | 1 | 0em |
| headline | Neue Montreal | 14px | 600 | 1.3 | 0em |
| title | Neue Montreal | 17.72px | 600 | 1.3 | 0em |
| body | Neue Montreal | 14px | 400 | 1.3 | 0em |
| body-sm | Neue Montreal | 12.44px | 400 | 1.167 | 0em |
Type scale
Aa12.5Aa14Aa16Aa17.5Aa20Aa22Aa36Aa48.5Aa72.5Aa102.5Aa121
- Body size
- 14px / 1.3
- Display size
- 169.2px
- Display tracking
- 0em
- Case
- title
Color
light schemePalette by painted area
- Text on bg
- 17.94:1
- Muted on bg
- 4.90:1
- Accent on bg
- 3.17:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 4
- 7.5
- 11.5
- 15.5
- 20
- 23
- 25.5
- 30.5
- 36
- 90
Corner radii
20pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 110px
Components
exact computed valuesbutton-secondary
Try for Free
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 7.7px 23px
- height
- 33.3px
- fontFamily
- Neue Montreal
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #FFFFFF
card
- rounded
- 20px
- padding
- 25.7px
- backgroundColor
- #EDEDED
input
- rounded
- 20px
- height
- 63.4px
- padding
- 24px 45.9px
- backgroundColor
- #FFFFFF
Layout & motion
- Container
- 1260px
- Grid columns
- 4
- Hero
- centered+media-below
- Navigation
- top-static+transparent
- Page height
- 8,353px
- Easing
- cubic-bezier(0.22, 1, 0.36, 1)
- Durations
- 100ms 200ms 500ms 750ms
- Transitions
- 297
- Keyframes
- 1
- Stack
- shopify, jquery, cloudflare
Page sections (10)
section labels are heuristic
01navPangram Pangram Foundry
02heroAltera
03feature detail?Neue Gstaad
04features?Stylo
05feature detail?Our fonts in use
06feature detail?We provide trend-conscious, free to try fonts for designers.
07features?Trusted by these curated brands
08feature detail?The Altera Experience
09cta?From The Pangram Academy
10footer
How Pangram Pangram compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 169.2px: larger than 97% of indexed sites (median 60px).
- Type scale
- 1.27×: flatter than 56% of indexed sites (median 1.28×).
- Container
- 1260px: wider than 52% of indexed sites (median 1242px).
- Text contrast
- 17.9:1: higher than 55% of indexed sites (median 17.6:1).
- Page length
- 8,353px: longer than 51% of indexed sites (median 8,217px).
- Corner radius
- Mostly 20px, shared by 4 of 274 indexed sites (1%).
- Neue Montreal
- One of 3 indexed sites that load Neue Montreal (1%).
- Altera Carve
- The only site in the index that loads Altera Carve.
- 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 Pangram Pangram use?
Pangram Pangram uses Neue Montreal for body text. Altera Carve (loaded as "altera-carve-semibold") is used for headings. Neue Gstaad Normal Normal (loaded as "neue-gstaad-normal-normal-semibold") is used for other.
What are Pangram Pangram's brand colors?
Pangram Pangram's website uses a light scheme: background #EDEDED, surface #FAFAFA, text #000000, muted text #666666 and borders #000000.
How is Pangram Pangram's website laid out?
The most common corner radius is 20px, body text is 14px with 1.3 line height, and the page container is 1260px wide.
