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