Typography
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.
Figma DocDeveloper GuidelinesOur 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 InterThe System
Name
Header 1
Header 2
Header 3
Font Size
Body*
16px
24px
0.15px
Small Text*
12px
16px
0.25px
32px
0.15px
24px
0.15px
28px
20px
0.15px
20px
14px
Letter Spacing
Line-height
*Body and small text support semibold and italic styling.
Application
The examples below depict how our type styles are used in context of Procore’s main
page layouts.
Scale
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.
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. For more info on the modular scale: http://www.modularscale.com/
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. For more info on the modular scale: http://www.modularscale.com/
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.
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.
Paragraph
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).
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.
