Best practices

What—and what not—to do when using typography.

Color

Don’t use colors or color pairings that are not explicitly shown in the Color pairing tool.

A sustainability graphic with text and arrows. The foreground color is a light yellow, while the background color is a light green.

Do use solid colors for type.

A type-based ad for sneakers. The headline text is solid white on a blue background.

Don’t use gradients for type.

A type-based ad for sneakers. The headline text uses a orange to yellow to blue gradient on a blue background.

Do use the letter spacing defined for each type style in the type ramp.

A vibrant purple ad with an image of 3 people wearing fashionable clothes. The type at the top is using approved letter spacing.

Don’t increase letter spacing beyond what’s in the type ramp.

A vibrant purple ad with an image of 3 people wearing fashionable clothes. The type at the top is using very wide, tracked type which causes a lot of gaps in the letters.

Creating emphasis

Do create emphasis through shifts in type weight, size, placement, and spacing.

A type-based ad for smart phones. The headline is in bold weight, while the subtitle is in regular weight.

Don’t create visual hierarchy by incorporating fonts other than Market Sans.

A type-based ad for smart phones. The headline is in bold weight, while the subtitle is in a handwritten font.

Do create emphasis through shifts in type weight, size, placement, and spacing.

A type-based ad for smart phones. The headline is in bold weight, while the subtitle is in regular weight and is much smaller than the headline.

Don’t create visual hierarchy with type styles that are too similar.

A type-based ad for smart phones. The headline is in bold weight, while the subtitle is in regular weight and is the same size as the headline.

Do create emphasis through shifts in type weight, size, placement, and spacing.

A type-based ad for fall marketing campaigns. The subtitle area has regular weight text with a dot between different pieces of text.

Don’t mix too many type styles (such as font, weight, and size) to create emphasis.

A type-based ad for fall marketing campaigns. The subtitle area has regular weight text with a dot between different pieces of text.

Photography

Do use solid white type placed over areas of photography that are not too visually busy.

Don't place type over busy photographic backgrounds.

Do use a drop shadow and linear gradient behind type to ensure contrast ratios are met for legibility.

Don't use drop shadows alone to create separation between type and backgrounds.

Do only use white type over photography.

Don’t use colored type over photography.

Formatting

Do use text in its natural, default width and height.

The eBay tagline Things.People.Love. in it’s standard form.

Don’t manually stretch or alter the width or height of text.

The eBay tagline Things.People.Love. squished to make the words thinner.

Do chunk relevant information together.

Don’t hard return after each sentence to create emphasis.

Do single space after sentences.

Don’t double space after sentences.

Do format text so the right side of the text block looks fairly smooth.

Don’t create jagged right rags or orphans by leaving a single word on the last line at the end of a paragraph.

Do left align all text to optimize legibility.

Don’t justify text to fill margins.

Casing

Do use sentence case for titles.

A vibrant orange type-based ad with “Slay the runway” as the headline.

Don’t use title case for titles.

A vibrant orange type-based ad with “Slay The Runway” as the headline.

Do use eBay programs as they would appear in UI elements.


A vibrant purple ad for smart watches. “eBay Refurbished” is placed next to its program icon inside of a pill shape at the top of the layout above the headline “Better than new”.

Don’t use eBay program names as titles.


A vibrant purple ad for smart watches. The headline has “eBay Refurbished”.

Do keep the official spelling and casing for campaign names.

A vibrant yellow ad for motors. The official campaign name used in the headline is “Time Capsule Find”.

Don’t change the official casing of campaign names or add any punctuation.

A vibrant yellow ad for motors. The official campaign is “Time Capsule Find”, but the headline uses “Time capsule find”.

Change log

DateNotes
Jun, 2024
  • Updated to eBay Evo
  • Updated visuals to align to current marketing guidelines