Typography

Typeface

SST

SST is a humanist sans serif typeface developed by Monotype. It is universal, timeless, and highly legible at all sizes.

To obtain brand typeface files, please send email with subject line "Brand Font Request" to globalbranding@bsci.com

Font weight

Changing font weight is a simple way to communicate the importance of text. This is why headings and subheadings are usually in bold typeface. There must be a reason for bolded text that is not a heading or subheading. Never bold whole sentences.

Italics

Italicized text is generally more difficult to read. It can be especially problematic for people with dyslexia. The intention is usually to de-emphasize the text’s message but, if used excessively, it becomes harder for people to recognize the words. There aren’t many situations where italics are necessary. Avoid using them.

Type scale

Our type scale is responsive and modular. This means that the type size will change depending on the breakpoint. The type scale has a set base font size and increases and decreases based on a shared ratio.

Note to developers:
Never use a hardcoded non-scale spacing value. If you need a size that doesn’t exist in the scale, ask the designer if you should use an existing size or if the one-off size is actually necessary. If the one-off size is necessary, make sure to use rems instead of px, and to leave a comment in the code // NOTE: this is a one-off size.

Note to designers:
Use the text styles in the Anatomy - Foundations library. Refer to the Getting started section in Resources for access the Sketch libraries.

Heading elements

Text styles

Legacy type scale

Historically, developers would set the root font size to 62.5% in order to use base-10 values. However, changing the root font size negatively impacts accessibility, and modern systems use base-8 values. Base-8 values can be divided or multiplied and still result in a whole number, and 1rem and popular breakpoints and screen sizes are divisible by 8. Base-8 values also align with our type and spacing scales.

If your platform’s root font size is not set to 1rem, please make a plan to convert soon.

Instructions for updating the type scale:

1. Set up the legacy spacing scale in your platform
2. Map all hard-coded values to spacing scale values
3. After there are no more hard-coded values, update the root font size and spacing scale values

Usage

With type, form follows function. Follow these guidelines for consistency and optimal readability.

Text color

Never use link colors for text that is not a link. Don't use blue for non-link text, even if blue is not the chosen link color. Blue is still the color with the strongest perceived affordance of clickability.

It’s generally best to avoid color for text unless it’s a link. However, assuming the color differs from the link color, color in text can be applied in some cases without causing major usability problems. In these cases, color should never be relied upon to deliver information. Color should always be a secondary way to receive the same information.

An example of this would be if there is text that says “Success” in an accessible green. Since a user who is color-blind can read the word and understand its meaning, they don’t need to be able to see the green color. This is because we haven’t solely relied on that color to deliver information.

Semantic heading structure

HTML heading elements act as a table of contents or a document outline. Heading level 1 (h1) is the highest level, and heading level 6 (h6) is the lowest.

There can only be one h1 and it must be at the highest level of the page, usually as the page title. All other headings can be used multiple times, but they must follow a semantic hierarchy.

Users who need screen readers rely on semantic heading structure to navigate page content. Always make sure to use the correct heading levels.

Never skip heading levels. Skipping heading levels negatively impacts screen readers and SEO, breaks navigation, and provides inconsistent page structure.

HeadingsMap is a free browser extension that reveals the heading structure of a page for automated accessibility and SEO testing. It's available for Chrome, Firefox, and Edge.

For more information, read HTML.com’s article on semantic markup.

Headings vs. display text

Display text has no semantic value and does not disrupt the heading structure of the page. Because it doesn’t register within the page’s heading structure, display text should not be used in place of a heading element. Display text is used to highlight a short line of text that is more important than the surrounding body text.

Here are some examples of when to use display text:

• Displaying statistics
• Highlighting short lines of marketing or branding copy

Line length

Having the optimal number of characters on each line is key to the readability. The optimal line length is between 60-100 characters per line, including spaces.

Having more than 100 characters per line impacts the user’s ability to focus on the text. Too many characters complicates both seeing where the line begins and ends and staying on the correct line of text.

Having fewer than 60 characters breaks up the user’s reading rhythm. Short lines of text also tend to make user’s skim, skipping from line to line without finishing the first line of text.

Line length cannot be hard-coded because of responsive design and different viewports. Users can also change their browser settings for larger or smaller text which impacts the number of characters on a given line. The best practice is to design for optimal line length and use responsive design and development to solve for as many other situations as possible.

Alignment

Left alignment

Left alignment is our default text alignment. It is the easiest to read and best for usability and scanning. Always left align paragraphs of text.

Center alignment

Center alignment should only be used for headings and small amounts of text. Center aligned text can be visually appealing, but users have a harder time reading center aligned text. After finishing one line of text the user must search for where the next line starts, slowing down reading time. Do not use for paragraphs longer than two short sentences.

Right alignment

Right alignment is bad for reading and should only be used in small quantities such as a single word or sentence, if necessary.

Justified

Never justify text.

Responsive typography

• The   character entity prevents text wrapping
  • Do not use the non-breaking space character entity — it can shatter text wrapping on longer words and negatively impact accessibility
• The <br> element produces a line break in text
  • The line break element should only be used for line breaks that are part of the content and where the division of lines is impactful, like with addresses and poems
  • Using the line break element to create white space is not only bad practice, it is also problematic for users who navigate the web with assistive technologies
  • Do not use the line break element to create white space, separate paragraphs, or separate lines of text. Use paragraph elements with proper opening and closing tags

We cannot prevent orphans or widows on a responsive site.

Here are some quotes on this topic:

• “How to fix a widow or orphan: edit the text.”
• “What is the issue with typesetting on websites? Print is a comfortable medium. A designer can layout exactly when a text line breaks. The web does not work like this.”
• “What is a solution? Text is liquid content that flows with the size of the viewport when used in a responsive layout. Browsers and operating systems also render fonts differently, which affects the width of a text line. There is literally no control of text design. With responsive it seems like we completely lost control over this topic.”