Typography

Why is Typography important in the CBP Design System?

At CBP, all of our applications and websites serve a singular purpose, "communication." Strip away all of the images and user interface elements and what you’re left with is raw content. Having a well thought-out and managed typography system drives retention and understanding of information, and helps our users focus on the informed decisions that keep our country safe.

This isn’t simply what typeface we would like to use, but also the hierarchy, treatments, spacial relationships, and other refinements which augment legibility. The typographic settings we create have consequences for every component and page we build. At its core, the CBP Design System values consistency, accessibility, and legibility above all other style considerations.

Nuggets of Knowledge

Type FamilyBack to Top

Roboto

The official typeface for CBP applications is Roboto. We use this font exclusively in our products. Other typefaces should not be used in CBP applications with the small exception of Roboto Mono in certain, specific contexts.

See the Google™ Specifications for Roboto here:https://fonts.google.com/specimen/Roboto

See the Google™ Specifications for Roboto Mono here:https://fonts.google.com/specimen/Roboto+Mono

License information for Roboto (as of time of writing):http://www.apache.org/licenses/LICENSE-2.0

Download Instructions + Installing on your machine

For our internal CBP customers we provide an enterprise CDN (content delivery network) mechanism for calling our font files. This allows our end users to easily cache these files and prevents the need to call them repetitively when loading the page. Please visit our internal Confluence site or contact the Common Framework Team to receive assistance with calling assets from our servers (sorry we can't put this link on the open web). Internal CBP applications should never be directly referencing the Google™ directory when calling font files.

For local installation, please download the following folder of .ttf(truetype) formatted files and install them on your machine (you may require assistance from your IT dept. in some instances to install local files).

Because Google™ is constantly revising and improving these files you can visit the Google™ Fonts website to follow the instructions for downloading the most up-to-date font files. This will keep your local files up-to-date. We will periodically update the files hosted on our CDN and the folder above to make sure we are taking advantage of new efficiencies. Remember to download the complete font families.

A note for CBP Design System users who are self-hosting font files. Please remember to only provide the .woff (IE 9+ compatibility) and .woff2 (all modern browsers) file types when hosting. Remove any reference to extraneous filetypes like .eot, .svg, etc. as this can affect how the font is rendered on the page (we're looking at you .eot 0_0).

Font Fallback Stack

The CBP Design System Fallback stack is ( font-family: roboto, calibri, tahoma, sans-serif; ). This stack exists to allow the browser to correct for scenarios where the Roboto font file doesn't load properly, encounters"FOUT" loading issues (explained in more detail in the Reference and Research section), or encounters a unicode symbol for which Roboto does not have a specification.  This does not constitute an endorsement of using any other font in this stack as a replacement for Roboto.

Font Weights Included

For Roboto the following weights are included:

For Roboto Mono the following weights are included:

Note: Roboto Mono should only be used in instances where having a standardized width in each character is paramount. These would include instances where you are lining up tabular figures like prices, serial numbers, or other examples where vertical alignment of figures is important.

Modular ScaleBack to Top

Modular scales bring order, harmony, and meaning to typography. They reinforce a visual cadence in text sizing that allows the reader to quickly understand information structure and improves legibility. Instead of simply increasing size by an even interval (+2px) between each step we apply a ratio (1.125). This creates more distinct typography classes and creates a clearly identifiable hierarchy. Because the vast majority of CBP applications are"productive" in nature (see Reference & Research section for more information) the CBP Design System utilizes a ratio on the lower end of the spectrum, Major Second (1.125).

Units of Measurement

Our root base font size is 14px (CSS Pixels) and is set in the core.css file. All font classes sizes are expressed in"REM" values (Root EM - fun fact the EM in this instance refers to the width of the capital M in its font). Native device ecosystems like iOS and Android use different units of measurement for typography, we will continue to update documentation in the future.

Special Heading Classes

These are used when you have need to use a larger class of text than the normal heading classes can provide. If they would normally replace the page title in the content area they should be aligned to the h1 semantic tag (see more in Reference & Research).

Heading Classes

These are used in conjunction with semantic heading tags (ie. h1). Classes ending in"light" for lighter backgrounds,"dark" for darker colored backgrounds (see Reference & Research for more information).

Body Copy Classes

These are the default text classes for paragraphs of text and are directly linked to the semantic"p" tag. Classes ending in"light" for lighter backgrounds,"dark" for darker colored backgrounds (see Reference & Research for more information).

Supporting Text Classes

These are text classes with special functions. Each supporting class may have a different semantic tag associated with it. This section may grow over time to accommodate special text classes that are added.

OpenType Features

Does Roboto support Opentype features? Unfortunately no. Roboto is not currently available in an Opentype format. When and if this changes, we will adjust the guidance here.