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
| 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 |
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>