Typography

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

Overview

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

CategoryClassesFont WeightSize

H1 Heading

.h1 Regular24px

H2 Heading

.h2 Regular20px

H3 Heading

.h3 Semi-Bold18px

H4 Heading

.h4 Semi-Bold16px
H5 Heading
.h5 Bold14px
H6 Heading
.h6 Bold12px
Lead Text .lead .lead-text Regular20px
Body Text .body-text Regular14px
Card Text .card-text Regular16px
Card Text 2 .card-text-2 Semi-Bold12px
Card Subtitle 1 .card-subtitle-1 Regular16px
Card Subtitle 2 .card-subtitle-2 Bold10px
Form Labels & Card Captions .form-labels .card-caption Regular12px
Small .small Regular12px

Headings

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>