Usage

Text over images

When using typography over an image or brand pattern, make sure there is enough visible contrast from the background to protect legibility.

Text and photography

When using text overlaid on photography, you can apply a dark overlay to the photo to let the text pop off the background. This can either be full coverage or a select portion of the image using a gradient effect.

A tractor going through a filed of corn. The image has a dark gradient on the bottom to make text more readable.
Checkmark Icon
correct

Use a gradient to increase the contrast of the text.

A tractor going through a filed of corn. The image does not contain enough contrast to make the text readable.
"X" icon.
incorrect

Don't just place the text on an image.

Text and brand patterns

When using text overlaid on a brand pattern, make sure to follow the brand pattern guidelines to avoid using pattern colors that have too much contrast. In the areas where the text and pattern overlap, you can feather the pattern, so it does not appear at full opacity under the text.

Feathered out background pattern enabling text to be readable.
Checkmark Icon
correct

Feather out the pattern where the text overlaps it.

Background pattern doesn't enable text to be readable.
"X" icon.
incorrect

Don't just place the text over a pattern.

Text color and accessibility

Generally speaking, neutral900 should be used for all text on light backgrounds.

Generally speaking, white should be used for all text on dark backgrounds.

All text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5:1 color contrast between text and background for normal text, and 3:1 to large text.

In circumstances where additional colors besides gray and white are desired, feel free to use any colors within our brand color palette provided there is sufficient color contrast between the font color and background color. Use the Adobe Contrast Checker to determine if your color pairing passes or fails a contrast check.

To learn more about color, contrast, and accessibility design, read Google Material Design Accessibility.

Guidance

Below are some best practices to keep in mind when creating the various assets for your event.

Do

Use pre-set type styles whenever available

Use the correct typeface for headlines and body copy

Maintain a clear messaging hierarchy

Maintain ample white space throughout your design

Maintain 50–60 characters per line in body copy

Checkmark Icon
correct

Don't

Overuse bolder weights

Use all-caps for headlines

Use headlines that exceed three lines

Use inaccessible/low contrast color combinations

Overcrowd layouts with large typography or excessive body copy

Exceed 60 characters per line in body copy

"X" icon.
incorrect

Available resources

Typography Headline Quick Guide

This guide highlights our standard font headline styles based on the new Collateral Design System, which should now be used for all print ads, corporate literature, and flyers.