Typography

Striking and Loud

Procore’s typography was chosen to enhance legibility as users skim through the large content areas in our products. Consolidating and streamlining typography across Procore tools also means we are giving our users a consistent experience that can scale for the future.

Brand Typeface

Inter is the brand typeface for Procore. A bold, no-nonsense grotesque font that's extremely reader-friendly. With wide letterforms that feel forward and structural, it pairs nicely with the shapes found in the Procore logo and comes in a family of 9 weights as well as a variable font which contains all styles in a much smaller file size.

Download

Characters
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890‘?'“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
Family
Inter Thin
Inter Extra Light
Inter Light
Inter Regular
Inter Medium
Inter Semi Bold
Inter Bold
Inter Extra Bold
Inter Black

Hierarchy

It's important to organize typography in a hierarchical system so that readers or users can clearly see what's most important. This enables them to easily navigate the layout at a glance and quickly scan to find the information they're looking for.

The headline is three lines or less and set in black.
The subhead is 1/2 the point size of the headline and set in regular.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum mi sed tristique sodales. Phasellus finibus odio sed massa elementum maximus. Aliquam vel aliquet ligula. Suspendisse semper fringilla tortor, eu varius sapien ultrices vel. Phasellus sodales velit ac enim varius, in interdum ligula placerat. Aliquam aliquam eros justo, a condimentum elit dignissim non. Quisque metus dui, vulputate at velit quis, porta posuere tortor. Vivamus dictum ac metus et dictum.
Headline
Font
Inter Extra Bold
Cap Height
3x base unit height
Leading
1.2/ 120%
Tracking
-25
Color
Procore Black (#000000)
Subhead
Font
Inter Regular
Cap Height
1/2x headline point size
Leading
1.4/ 140%
Tracking
-25
Color
Procore Black (#000000)
Body Copy
Font
Inter Regular
Cap Height
1/3x subhead point size
Leading
1.4/ 140%
Tracking
0
Color
Steel (#898B8E)

Digital Type Stack

These are the baseline styles for Procore digital properties.

Display One
D1 | Hero / Section Heading
Family
Inter
Weight
Bold (700)
Size
44px
Line Height
48px
Letter Spacing
-0.025em
Color
Procore Black (#000000)
Display Two
D2 | Headline
Family
Inter
Weight
Bold (700)
Size
34px
Line Height
40px
Letter Spacing
-0.025em
Color
Procore Black (#000000)
Display Three
D3 | Hero / Section Heading
Family
Inter
Weight
Bold (700)
Size
28px
Line Height
36px
Letter Spacing
0
Color
Procore Black (#000000)
Heading Four
H4 | Heading
Family
Inter
Weight
Bold (700)
Size
24px
Line Height
32px
Letter Spacing
0
Color
Procore Black (#000000)
Heading Five
H5 | Heading
Family
Inter
Weight
Bold (700)
Size
20px
Line Height
28px
Letter Spacing
0
Color
Procore Black (#000000)
Eyebrow
H6 | Eyebrow
Family
Inter
Weight
Medium (500)
Size
14px
Line Height
20px
Letter Spacing
0.05em
Color
Procore Black (#000000)
Instruction Eyebrow
H7 | Instruction Eyebrow
Family
Inter
Weight
Semi Bold (600)
Size
12px
Line Height
16px
Letter Spacing
0.05em
Color
Iron (#A3A4A6)
Hero Subheading. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan libero ac odio molestie, et fermentum nibh imperdiet.
Hero Subheading
Family
Inter
Weight
Regular (400)
Size
20px
Line Height
28px
Letter Spacing
0
Color
Concrete (#555555)
Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan libero ac odio molestie, et fermentum nibh imperdiet. In mi libero, consectetur a nisl eu, tempor interdum urna. Fusce laoreet dolor turpis, vel accumsan diam dictum vitae.
P | Body Copy
Family
Inter
Weight
Regular (400)
Size
18px
Line Height
24px
Letter Spacing
0
Color
Concrete (#555555)
Body copy small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan libero ac odio molestie, et fermentum nibh imperdiet. In mi libero, consectetur a nisl eu, tempor interdum urna. Fusce laoreet dolor turpis, vel accumsan diam dictum vitae.
SM | Body Copy Small
Family
Inter
Weight
Regular (400)
Size
14px
Line Height
20px
Letter Spacing
0
Color
Concrete (#555555)
Body copy extra small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan libero ac odio molestie, et fermentum nibh imperdiet. In mi libero, consectetur a nisl eu, tempor interdum urna. Fusce laoreet dolor turpis, vel accumsan diam dictum vitae.
XS | Body Copy Extra Small
Family
Inter
Weight
Regular (400)
Size
12px
Line Height
16px
Letter Spacing
0
Color
Concrete (#555555)
  • Suspendisse pretium facilisis
  • Orci varius natoque penatibus
  • Maecenas mattis nisi quis velit
LI | Bullet List
Family
Inter
Weight
Medium (500)
Size
18px
Line Height
24px
Letter Spacing
0
Color
Concrete (#555555)
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur in mauris vel placerat. Vivamus ac elementum justo. Curabitur vitae cursus est, at viverra enim. Nam scelerisque orci nisi, dictum sollicitudin nulla ultrices et.”
Full Name
Job title
Company
Quote Copy
Family
Inter
Weight
Bold (700)
Size
34px
Line Height
40px
Letter Spacing
-0.025em
Color
Procore Black (#000000)
Subhead
Family
Inter
Weight
Semi Bold (600)
Size
18px
Line Height
24px
Letter Spacing
0
Color
Procore Black (#000000)
Body Copy
Family
Inter
Weight
Semi Bold (600)
Size
12px
Line Height
16px
Letter Spacing
0.05em
Color
Concrete (#555555)
Body Copy Text LinkBody Copy Text Link Hover
Link | Body Copy
Family
Inter
Weight
Regular (600)
Size
18px
Line Height
24px
Letter Spacing
0
Color
Procore Orange (#FF5200)
CTA Text LINK CTA Text LINK Hover Watch Video
Link | CTA Text Link
Family
Inter
Weight
Regular (600)
Size
18px
Line Height
24px
Letter Spacing
0
Color
Procore Orange (#FF5200)
Request a DemoRequest a Demo Hover
Button | Conversion
Family
Inter
Weight
Semi Bold (600)
Size
18px
Line Height
24px
Letter Spacing
0
Color
Procore Orange (#FF5200)
Border radius
4px
Padding
12px 24px 12px 24px
Primary CTA ButtonPrimary CTA Button Hover
Button | Primary CTA
Family
Inter
Weight
Semi Bold (600)
Size
18px
Line Height
24px
Letter Spacing
0
Color
Procore Black (#000000)
Border radius
4px
Padding
12px 24px 12px 24px
Secondary CTA Button Secondary CTA Button Hover
Button | Secondary CTA
Family
Inter
Weight
Semi Bold (600)
Size
18px
Line Height
24px
Letter Spacing
0
Color
Glass (#F4F5F6)
Border radius
4px
Padding
12px 24px 12px 24px
©2021 Procore Technologies, Inc.