Typography

The purpose of typography is to make content legible, readable, and visually appealing.

Font Family

For Web and mobile user interfaces, Trimble uses Open Sans, a humanist sans-serif typeface with excellent legibility characteristics and friendly appearance. 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.

For Windows desktop applications, Trimble uses Segoe UI as its primary interface font.

Translated Text: When dealing with translated text for character sets other than Latin, Greek, Cyrillic please use Noto as an option that will cover over 98 languages.

Falling Back to System Fonts

We understand that there are a myriad of reasons why it may be a requirement to fall back to a system font for technical or performance reasons.

When falling back to a system font, please choose a font that is

  • Sans Serif such as San Francisco, Helvetica or Arial
  • The platform font (judgement is necessary)
    • Android = Roboto
    • iOS = San Francisco
    • Windows = Segoe UI
    • Windows Embedded Handheld = Tahoma
  • Crisp and clean in its design (avoid whimsical fonts)
  • Consider using similar weights, sizes, and styles to the platform being designed upon.

Base Sizing

  • Base 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 Type Scale

To allow the reader to easily find what they are looking for and to aid scanning and readability, establish an order of importance within content and data. Associating the typographic style to the intent in the interface provides a visual pattern that is easy for users to skim. Hierarchical headings are also used by visually impaired users, who need the aid of a screen reader to parse written content.

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. Smaller headings cannot come before larger headings.

Web Applications

CategorySpecifications

Heading 1

Font Family: Open Sans
Font Weight: Regular, 400
Size: 24 px/ 1.5 rem
Case: Title
Letter Spacing: 0.5
Line Height: 36 px
Scale to Mobile (size/ line height): 20 px/ 30 px
Use: Most popular for top level headers. Titles within large content containers.

Heading 2

Font Family: Open Sans
Font Weight: Regular, 400
Size: 20 px/ 1.25 rem
Case: Title
Letter Spacing: 0.15
Line Height: 30 px
Scale to Mobile (size/ line height): 18 px/ 27 px
Use: Sub-sections and field group headings.

Heading 3

Font Family: Open Sans
Font Weight: Semibold, 600
Size: 18 px/ 1.125 rem
Case: Title
Letter Spacing: 0.15
Line Height: 27 px
Scale to Mobile (size/ line height): 16 px/ 24 px
Use: Sub-sections, card titles.

Heading 4

Font Family: Open Sans
Font Weight: Semibold, 600
Size: 16 px/ 1 rem
Case: Title
Letter Spacing: 0.15
Line Height: 24 px
Scale to Mobile (size/ line height): 14 px/ 21 px
Use: Sub-sections, card titles.

Heading 5

Font Family: Open Sans
Font Weight: Bold, 700
Size: 14 px/ 0.875 rem
Case: Title
Letter Spacing: 0.15
Line Height: 24 px
Scale to Mobile (size/ line height): 12 px/ 18 px
Use: Sub-sections, card titles.

Heading 6

Font Family: Open Sans
Font Weight: Bold, 700
Size: 12 px/ 0.75 rem
Case: Title
Letter Spacing: 0.15
Line Height: 18 px
Scale to Mobile (size/ line height): 10 px/ 15 px
Use: Sub-sections, card titles, overlines, table headings.

Lead Text

Font Family: Open Sans
Font Weight: Regular, 400
Size: 20 px/ 1.25 rem
Case: Sentence
Letter Spacing: 0.15
Line Height: 40 px
Scale to Mobile (size/ line height): 18 px/ 27 px
Use:Paired with display font. Used as subtitle.
Body Font Family: Open Sans
Font Weight: Regular, 400; Semibold, 600; Bold, 700
Size: 14 px/ 0.875 rem
Case: Sentence
Letter Spacing: 0.15
Line Height: 21 px
Scale to Mobile (size/ line height): 12 px/ 18 px
Use: Body and paragraph style.

Small Body

Font Family: Open Sans
Font Weight: Regular, 400; Semibold, 600; Bold, 700
Size: 12 px/ 0.75 rem
Case: Title, Sentence
Letter Spacing: 0.25
Line Height: 18 px
Scale to Mobile (size/ line height): 12 px/ 18 px
Use: Body and paragraph style. Table content, form labels, card captions, disclaimers, time stamps.

Mini

Font Family: Open Sans
Font Weight: Regular, 400; Semibold, 600
Size: 10 px/ 0.625 rem
Case: Title, Sentence, All-Caps
Letter Spacing: 0.5
Line Height: 15 px
Scale to Mobile (size/ line height): 10 px/ 15 px
Use: Captions, labels, overlines, disclaimers.

Mobile Application Scale

CategorySpecifications

Heading 1

Font Family: Open Sans
Font Weight: Regular 400
Size: 20 px/ 1.25 rem
Case: Title
Letter Spacing: 0.15
Line Height: 30 px
Use: Top level headers.

Heading 2

Font Family: Open Sans
Font Weight: Regular 400
Size: 18 px/ 1.125 rem
Case: Title
Letter Spacing: 0.15
Line Height: 28 px
Use: Main titles. Titles within large content containers.

Heading 3

Font Family: Open Sans
Font Weight: Semibold, 600
Size: 16 px/ 1 rem
Case: Title
Letter Spacing: 0.15
Line Height: 24 px
Use: Sub-sections and field group headings.

Heading 4

Font Family: Open Sans
Font Weight: Semibold, 600
Size: 14 px/ 0.875 rem
Case: Title
Letter Spacing: 0.15
Line Height: 21 px
Use: Sub-sections.

Heading 5

Font Family: Open Sans
Font Weight: Bold, 700
Size: 12 px/ 0.75 rem
Case: Title, Sentence
Letter Spacing: 0.15
Line Height: 18 px
Use: Sub-sections, card titles. Not for in-cab apps.

Heading 6

Font Family: Open Sans
Font Weight: Bold, 700
Size: 10 px/ 0.625 rem
Case: Title, Sentence
Letter Spacing: 0.15
Line Height: 15 px
Use: Sub-sections, card titles, overlines. Not for in-cab apps.

Lead Text

Font Family: Open Sans
Font Weight: Regular, 400
Size: 18 px/ 0.175 rem
Case: Sentence
Letter Spacing: 0.25
Line Height: 28 px
Use:Paired with display font. Used as subtitle.

Body

Font Family: Open Sans
Font Weight: Regular, 400
Size: 12 px/ 0.75 rem
Case: Title, Sentence
Letter Spacing: 0.25
Line Height: 18 px
Use: Body and paragraph style.

Mini

Font Family: Open Sans
Font Weight: Regular, 400; Semibold, 600
Size: 10 px/ 0.625 rem
Case: Title, Sentence, All-Caps
Letter Spacing: 0.5
Line Height: 15 px
Use: Captions, labels, overlines, disclaimers.

Desktop Applications Scale

CategorySpecifications

Heading 1

Font Family: Segoe UI
Font Weight: Regular
Size: 24 px
Case: Title
Line Height: 30 px
Use: Top level headers. Use sparingly (ie. on Welcome screen).

Heading 2

Font Family: Segoe UI
Font Weight: Regular
Size: 20 px
Case: Title
Line Height: 26 px
Use: File menu, start screen.

Heading 3

Font Family: Segoe UI
Font Weight: Regular
Size: 16 px
Case: Title
Line Height: 20 px
Use: File menu, start screen.

Heading 4

Font Family: Segoe UI
Font Weight: Semibold
Size: 14 px
Case: Title, Sentence
Line Height: 18 px
Use: Start screen, dialog and window headlines.

Heading 5

Font Family: Segoe UI
Font Weight: Semibold
Size: 12 px
Case: Title
Line Height: 16 px
Use: Modals, side pane and property pane headlines.

Heading 6

Font Family: Segoe UI
Font Weight: Semibold
Size: 11 px
Case: Title
Line Height: 14 px
Use: Side pane, property pane.

Heading 7

Font Family: Segoe UI
Font Weight: Semibold
Size: 10 px
Case: Title
Line Height: 10 px
Use: Ribbon.

Body 1

Font Family: Segoe UI
Font Weight: Regular
Size: 14 px
Case: Sentence
Line Height: 20 px
Use: File menu, start screen.

Body 2

Font Family: Segoe UI
Font Weight: Regular
Size: 12 px
Case: Sentence
Line Height: 16 px
Use: Back stage, start screen, dialogs.

Body 3

Font Family: Segoe UI
Font Weight: Regular
Size: 11 px
Case: Sentence
Line Height: 14 px
Use: Dialogs if needed, side pane, property pane, tool-tips.

Body 4

Font Family: Segoe UI
Font Weight: Regular
Size: 10 px
Case: Sentence
Line Height: 13 px
Use: Where needed (e.g. ribbon).

Mini

Font Family: Segoe UI
Font Weight: Regular
Size: 9 px
Case: Sentence
Line Height: 11 px
Use: Smallest thumbnails.

Display Headings

CategorySpecifications

Display 1

Font Family: Open Sans
Font Weight: Bold, 700; Semibold, 600
Size: 72 px/ 4.5 rem
Case: Title
Letter Spacing: 0.4
Line Height: 108 px
Scale to Mobile (size/ line height): 48 px/ 72 px
Use: Oversized screen titles. Mostly for marketing. Seldom used in product.

Display 2

Font Family: Open Sans
Font Weight: Bold, 700; Semibold, 600; Regular, 400
Size: 40 px/ 2.5 rem
Case: Title
Letter Spacing: 0.4
Line Height: 54 px
Scale to Mobile (size/ line height): 25 px/ 40 px
Use: Oversized screen titles. Mostly for marketing. Seldom used in product.

Display 3

Font Family: Open Sans
Font Weight: Semibold, 600; Regular, 400
Size: 32 px/ 1.875 rem
Case: Title
Letter Spacing: 0.283
Line Height: 48 px
Scale to Mobile (size/ line height): 20 px/ 30 px
Use: Oversized screen titles. Mostly for marketing. Seldom used in product.

Legibility and Readability

All text must be legible and meet accessibility standards.

Color and Contrast

The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5:1 color contrast between text and background for regular text (smaller than 24 px regular or 18.5 px bold), and 3:1 for large text (at least 24 px regular or 18.5 px bold).

Standard text colors:

  • Trimble Gray

    #252a2e
    is the standard text color.
  • Trimble Gray

    #252a2e
    text may appear on backgrounds no darker than Gray 4
    #aeaeb6
    .
  • Gray Light

    #f1f1f6
    text may appear on backgrounds no lighter than Gray 8
    #464b52
    .
  • Gray 8

    #464b52
    text, body text color in desktop applications, may appear on backgrounds no darker than Gray Light
    #f1f1f6
    .

Text may appear in different colors on different colored backgrounds (see Trimble Color Palette) as long as it meets appropriate contrast ratios for WCAG 2.0 AA compliance. Contrast Checker is one of many tools available online to help ensure appropriate contrast. Learn more about accessibility.

Line Height

The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires that line height is at least 1.5 times the font size and that spacing following paragraphs is at least 2 times the font size.

Line Length

Optimal line length for body text is considered to be 50-75 characters. If a line of text is too long, the reader’s eyes have a hard time shifting from the end of the line to the beginning of another. If a line of text is too short, the eye will have to travel back too often breaking the reader’s rhythm. In order to keep the reader engaged and help with reading comprehension, keep text within 50-100 characters per line.

Line length is not always manageable since users can set their own device width. It is important to try to design for ideal line lengths under normal controls and allow for the responsive design to modify beyond normal circumstances.

Typography Line Length Example

Accessibility

  • There must be at least one h1 on each page.
  • If it is unnecessary or not desirable for the h1 to display on the page, hide it from visual presentation by using .wdn-text-hidden. It will allow it to be still available to assistive technology and bots. Do not hide it by using “display: none”: it will also hide it from AT.
  • Do select heading levels based on the hierarchy, not their appearance: do not skip levels in html tag headings (ie. h1 to h4). You can skip styles of headings, as long as the html tags are not skipped and as long as hierarchy is maintained (smaller headings cannot come before larger headings).
  • Do not bold text when a heading is needed.
What's Changed
DateVersionNotesContributors
11/23/20201.0.0Added display fonts, fallback fonts, translated text, and desktop fonts.M. Heighway, L. Cook, A. Eidam, E. Gunther, E. Bohn, N. Springer, G. Leuhof