Typography

Complete

Overview

Typography guidelines include style specifications for typeface, line height, line length, and color contrast. This guidance describes how to use our typography styles across Schwab websites. Having a streamlined typography set improves consistency across Schwab sites, improved readability, and a good user experience.

Typeface

Schwab has its own typeface, or font, Charles Modern that is the standard for all websites. Schwab uses six different weights/styles: Regular, Italic, Bold Italic, Bold, Light, Light Italic.

Typeface sizes and styles were developed to balance content density and reading comfort under typical usage conditions. In addition, styles are designed for optimization across a variety of user interfaces (including mobile), as well as for accessibility.

Line height

To achieve proper readability and appropriate pacing, line heights are based on each style’s individual size and weight. Line height guidelines use a ratio of font size to line height. This determines the amount of space used on each line of copy. If you’re using Sketch files, this ratio is already pre-determined, so you don’t need to calculate it.

Follow these guidelines for line-height ratios:

• Use a 1.6 ratio for body copy and smaller styles – M Body is 17px with a line height of 28 (1.64705)
• Use a 1.3 ratio for copy contained within a card or tile and for bulleted/numbered lists – L Card Body is 17px with a line height of 25 (1.3157)
• Use a 1.2 ratio for everything else - L Article Heading is 42px with a line height of 50 (1.1904)

Text within containers
When wrapping text is placed within contained areas like cards and tiles it’s necessary to tighten the leading to properly group the different sections of a card. Using the Card Body style shortens the line height to a 1.3 ratio to improve the grouping.

List Styling
When using bulled or numbered lists, it’s necessary to tighten the line height and increase the spacing after each list item create the proper visual grouping for maximum readability.

Body Copy

Line length

Having the right amount of characters on each line is the key to good readability of your text. You should target 40 to 60 characters per line for a good reading experience. If lines are too wide or too narrow this distracts from the content.

Following line-length guidance and using proper line spacing and line breaks ensures optimal readability for most users. Note: Image is not actual size

Descriptions under images—-Ideal line lengths for body copy. The maximum for long form copy is 8 columns. Smaller copy blocks should use the standard body copy and be limited to 6 columns.

Colors and contrast

It’s important to consider how text color contrasts with the background color. A text color that is too similar to the background color is hard to read as is text with too much contrast. This is especially true of light-colored text against dark backgrounds. Also consider contrast ratios for users who perceive color differently (not everyone sees all colors). Text contrast over images is also important to consider.

Follow these contrast guidelines:

• Small text should have a contrast ratio of at least 4.5:1 against its background. Check your contrast ratio.

• Large text (18.75 px bold and 24 px regular and up) should have a contrast ratio of at least 3:1 against its background.

Note: You can check your contrast ratios with the WebAIM contrast checker.

All text and background color combinations should follow the Color Guidelines and Schwab Accessibility guidelines.