Typography can help create clear hierarchies, organize information, and guide users through a product or experience.


Trimble uses Open Sans , a humanist sans-serif typeface with good legibility and warmth. Featuring a tall x-height and open forms, it is ideal for on-screen consumption. Open Sans supports ISO Latin 1, Latin CE, Greek and Cyrillic character sets.

For Internationalization, support is included for RTL (right-to-left) languages. Asian Syllabic, Abjad, Indic and other script languages will be supported by sans-serif system font.

Base Sizing

  • The root font size is defined as 16px (1rem)
  • Base body text is sized at 14px (.875rem)
  • Small body text is sized at 12px (.75rem)

Hierarchy and Intent

Consistency is key to creating an easily scannable interface for users. Each level in the Trimble type hierarchy is defined with a specific color and intent. Associating the typographic style to the intent in the interface provides a visual pattern that is easy for users to skim.

The variations help keep type styles to a minimum, so consistency is easier to achieve. Too many type styles make a layout unbalanced and difficult to manage.

Type Scale

Category Classes Font Weight Size

H1 Heading

.h1 Regular 24px

H2 Heading

.h2 Regular 20px

H3 Heading

.h3 Semi-Bold 18px

H4 Heading

.h4 Semi-Bold 16px
H5 Heading
.h5 Bold 14px
H6 Heading
.h6 Bold 12px
Lead Text .lead .lead-text Regular 20px
Body Text .body-text Regular 14px
Card Text .card-text Regular 16px
Card Text 2 .card-text-2 Semi-Bold 12px
Card Subtitle 1 .card-subtitle-1 Regular 16px
Card Subtitle 2 .card-subtitle-2 Bold 10px
Form Labels & Card Captions .form-labels .card-caption Regular 12px
Small .small Regular 12px


H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

Display headings

When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default.

Display 1

Display 2

Display 3

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h2>
<h1 class="display-3">Display 3</h3>

Text Styles

Lead Text / Open Sans Regular

Body / Open Sans Regular

Card Text / Open Sans Regular

Card Text 2 / Open Sans Semi-Bold

Card Subtitle 1 / Open Sans Regular

Card Subtitle 2 / Open Sans Bold

Form Labels + Card Caption / Open Sans Regular

<p class="lead-text">Lead Text / Open Sans Regular</p>
<p class="body-text">Body / Open Sans Regular</p>
<p class="card-text">Card Text / Open Sans Regular</p>
<p class="card-text-2">Card Text 2 / Open Sans Semi-Bold</p>
<p class="card-subtitle-1">Card Subtitle 1 / Open Sans Regular</p>
<p class="card-subtitle-2">Card Subtitle 2 / Open Sans Bold</p>
<p class="form-labels card-caption">Form Labels + Card Caption / Open Sans Regular</p>