Typography

We created a new humanistic typeface, Visa Dialect, designed specifically for our brand. Its foundation is built on our core brand attributes: accessible, inclusive, and approachable. It’s modern, but still feels like it has been crafted by the human hand. It has been designed to be approachable, unique, and easily read on any device.

Visa branded digital experiences use Visa Dialect UI. Visa Dialect UI has been created specifically for user interfaces. It has narrower forms than Visa Dialect and has been designed to be highly efficient for small typographic settings.

Internal users can access Visa Dialect UI on Sharepoint (internal only).

For digital experiences that are not Visa branded, font choice can vary as needed, but should not be Visa Dialect. Mobile applications may be best suited to use native fonts based on platform, to take advantage of built in features. For browser based applications, we recommend Open Sans, which is from Google’s Open Fonts Directory.

Type ramp

For this ramp, there are type categories built in to support and simplify usage. While applying the styles, keep in mind the typographic hierarchy set in place and the intended use for each type style.

Headlines

The headline category is meant for page and section titles. Display 1 and 2 are intended for banner areas and landing pages, and may not be suitable for use across a whole application.

• Start most page designs with Headline 1 as your largest headline size.
• Use typography with a line height about 1.3x the size of the text, referred to as ‘line-height-short’ in the system.
• Use sentence case.
• Avoid adding punctuation such as periods, commas, colons, or semicolons unless completing sentences or for impact.

Overline

• Pair overline headlines with display, headline, or subtitle content. These are sometimes called an eyebrow or category.
• Use all caps for overline headlines, containing no periods, commas, colons, or semicolons after sentence fragments, and limit to 1–3 words.

Body

The body category is meant for paragraph styling for the main content areas of your page. Most applications will use Body 2 as the default body copy styling, and doing so will ensure proper relationship between the content of your page and the design system components.

• To increase readability, typography in this category uses a line height about 1.5x the size of the text. We define this is ‘line-height-default’ in the system.
• Body 1, 2, and 3 should always use sentence case and all standard punctuation.

Ordered and unordered lists

Detail

Typography in the detail category is applied to the interactive components in the design system.

• Use typography with a line height about 1.3x the size of the text, defined as “line-height-short” in the system.
• Use UI label large for tables, tabs, and navigation; it matches Body 2.
• Use UI label for labels on input fields and form elements.
• Use UI label small for labels on icon buttons.

Applying the type ramp

When using the type ramp to build an interface, it is recommended not to modify or change properties such as weight, size, and color for any type style. Each type style has been selected with consideration for user needs and systemization within the overall design system.

Hierarchy

Effective typographic hierarchy makes content easy to consume and understand. It enhances scan-ability and guides users on what information to focus on first. Use it as a tool to direct the reader’s attention to the content in the desired order.

Consistent appearance

Maintain a consistent appearance for text within the same category.

Sentence case

Use sentence case, as Visa adopts this in nearly all scenarios.

Text alignment

There are three options for text alignment: right-aligned, center-aligned, and left-aligned.

Paragraph spacing

Spacing between paragraphs can affect how users perceive relationships between information. Keep paragraph spacing between 0.75 and 1.25 times your font size. In Microsoft Word, this equates to a full line of spacing between paragraphs.

Line height

Line height, also known as leading, is the space between baselines in a block of text. It measures the distance from the bottom of one line of text to the bottom of the next.

We recommend a line height approximately 1.5 times the font size, translating to 1.5 line spacing in Microsoft Word. On iOS, this is measured in pixels (px), and on Android, in density-independent pixels (dp).

Line length

The ideal line length is around 50-75 characters, including spaces, or 12-14 words per line. Longer lines of text can feel intimidating and overwhelming to users, potentially leading them to avoid reading. Conversely, lines that are too short disrupt the reader’s rhythm by requiring frequent eye movements.

Table adapted from the Baymard Institute.

Language considerations

Visa Dialect has a vast Latin and Cyrillic character set, making it suitable for many languages. For languages not supported by Visa Dialect, we use Noto Sans, a free font available from Google.

Languages vary in average word lengths and heights, which can affect typography layout. When internationalizing our typeface, consider the differences in word length, alignment, height, and language categories. Reference Material’s guidance regarding language support for more information.

Related guidelines