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.
Developer Guidelines

Our Typeface: Inter

As a typeface created specifically for user interfaces, Inter allows for optimal legibility at small sizes and variable font adjustment on web – all without lacking personality.
Download Inter

The System

Header 1
Header 2
Header 3
Font Size
Small Text*
Letter Spacing
*Body and small text support semibold and italic styling.


The examples below depict how our type styles are used in context of Procore’s main 
page layouts.


Read Page
List Page

Style and Size

Read Page
List Page

Scale System

A clear type hierarchy is a key component in establishing a clear information architecture. A clear hierarchy allows for quick comprehension and results in increased efficiency as the user interacts with the app.

The Modular Scale is a methodology that establishes logical progression of font sizes in an interface. We chose the Major Second Scale (1.125) to provide hierarchical contrast and optimal legibility without taking up too much of the app’s real estate.

How it Works

To create the scale we started with our base font size (or most commonly used size) —14px. By multiplying or dividing 14px and 1.125 we get a larger sizes and smaller sizes respectively. Repeat to add more styles!

Multiplying by 1.125 yields non-integers so we round to the nearest whole numbers. For our 24px font size we skipped a size to establish even greater hierarchy. Learn more about the modular scale.

Line Height

Line height is both important for legibility and defining padding in our designs. We can think of line height as a container surrounding a row of text. The taller it is, the greater the container and the greater the spacing between rows of text that allow for legibility. 

Research defines optimal line height at around 1.5 times the text’s size, however, this varies based on how the text is used. The 8px grid system works best with line heights that are divisible by 4px.

Formatted Text

Our body type styling is recommended used for large text areas.


If a text area has multiple paragraphs the space between them will be defined by the built in line height for the defined type styling. This would allow for scaling when using other type sizes.
Example: The body style has a line height of 20, therefore the spacing between the paragraphs would also be 20.
In the scenario where a different type of formatting is needed (i.e. a list) use the same spacing paradigm specified above.

Ordered & Unordered Lists

The space between each value in the ordered/unordered list is dictated by the line height of the specified text styling. A space should be added between the bullet (numeral, etc) and the value.

If there is a need for the value to wrap, the text will align with the line of text above it – not the bullet (numeral, etc).
Ordered List
Unordered List
If list items need to be nested, the nested line would align with the line of text above it. Similar to how we are treating wrapping text.