Typography

Brand Typeface

Inter is the brand typeface for Procore. A bold, no-nonsense grotesque font that's extremely reader-friendly. With wide letter forms 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
  • Thin
  • Extra Light
  • Light
  • Regular
  • Medium
  • Semi Bold
  • Bold
  • Extra Bold
  • 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
FontInter Extra Bold
Cap height3x base unit height
Leading1.2/ 120%
Tracking-25
Color
Procore Black
Subhead
FontInter Regular
Cap height1/2x headline point size
Leading1.4/140% leading
Tracking0
Color
Procore Black
Body copy
FontInter Regular
Cap height1/3x subhead point size
Leading1.4/140% leading
Tracking0
Color
Steel

Digital Type Stack

These are the baseline styles for Procore digital marketing properties.

Heading One / Two

H1 / H2 | Hero / Section Heading
FamilyInter
WeightBold (700)
Size44px
Letter Spacing-0.025em
Line Height1.2
Color
Procore Black (000000)

Heading Three

H3 | Heading
FamilyInter
WeightBold (700)
Size30px
Letter Spacing0em
Line Height1.3
Color
Procore Black (000000)

Heading Four

H4 | Heading
FamilyInter
WeightBold (700)
Size24px
Letter Spacing0em
Line Height1.3
Color
Procore Black (000000)
Heading Five
H5 | Heading
FamilyInter
WeightBold (700)
Size20px
Letter Spacing0em
Line Height1.3
Color
Procore Black (000000)
Eyebrow
H6 | Eyebrow
FamilyInter
WeightMedium (500)
Size14px
Letter Spacing0.125em
Line Height1.3
Color
Procore Black (000000)
Instruction Eyebrow
H7 | Instruction Eyebrow
FamilyInter
WeightMedium (500)
Size14px
Letter Spacing0.125em
Line Height1.3
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
FamilyInter
WeightRegular (400)
Size20px
Letter Spacing0em
Line Height1.6
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.

Body
FamilyInter
WeightRegular (400)
Size18px
Letter Spacing0em
Line Height1.6
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.

Body Small
FamilyInter
WeightRegular (400)
Size14px
Letter Spacing0em
Line Height1.6
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.

Body Extra Small
FamilyInter
WeightRegular (400)
Size12px
Letter Spacing0em
Line Height1.6
Color
Concrete (555555)
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
List | Bullets
FamilyInter
WeightMedium (500)
Size18px
Letter Spacing0em
Line Height1.6
Color
Concrete (555555)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed ullamcorper dui. Nulla sem urna, venenatis vitae libero sed, fermentum porttitor magna.

Full Name
Company Name

Quote
FamilyInter
WeightBold (700)
Size30px
Letter Spacing-0.025em
Line Height1.6
Color
Procore Black (000000)
Quote Name
FamilyInter
WeightRegular (400)
Size20px
Letter Spacing0em
Line Height1.6
Color
Procore Black (000000)
Quote Company
FamilyInter
WeightSemi Bold (600)
Size14px
Letter Spacing0.05em
Line Height1.6
Color
Concrete (555555)
Link | Body Text
FamilyInter
WeightSemi Bold (600)
Size18px
Letter Spacing0em
Line Height1.6
Color
Procore Orange (FF5200)
Link | Text CTA
FamilyInter
WeightBold (700)
Size14px
Letter Spacing0.05em
Line Height1.3
Color
Procore Orange (FF5200)
Button | Demo
FamilyInter
WeightSemi Bold (600)
Size18px
Letter Spacing0em
Line Height1.3
Color
Procore Orange (FF5200)
Border2px
Border Radius4px
Padding18px/36px
Button | Primary CTA
FamilyInter
WeightSemi Bold (600)
Size18px
Letter Spacing0em
Line Height1.3
Color
Procore Black (000000)
Border2px
Border Radius4px
Padding18px/36px
Button | Secondary CTA
FamilyInter
WeightSemi Bold (600)
Size18px
Letter Spacing0em
Line Height1.3
Color
Procore Black (000000)
Border2px
Border Radius4px
Padding18px/36px