Typography

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

Mobile Application Scale

Desktop Applications Scale

In-Field

Base fonts size is 22px for Android use sp (scalable pixels). Some application may suit Mobile fonts sizes depending on use.

Display Heading

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:

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.

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 (i.e. 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.