AvenirNext forINTUIT is a cornerstone element of our brand’s visual language. Our typography aligns our use of weights and sizes in our product. And it helps us meet the needs of all users. Content on any given page is easier to scan and read. Our typography brings us one step closer to meeting WCAG 2.0 accessibility. 

 

Usage

Typography is integral to the look and feel of our brands and the success of our products. It needs to be legible, accessible, and seamless between product lines and across devices. It establishes a hierarchy to guide users through the completion of tasks in a multitude of languages. Through a cohesive use of typographic styles in the interface, we can establish a clear visual pattern for users interacting with our products. Our text sizes and line heights are harmonious with our spacing units and align to our 4 px grid.

 

Type scale

Type scale refers to point sizes and line heights. We use our type scale across our products and ecosystem to ensure continuity and a cohesive experience. Type scales are helpful when we deliver content and product frameworks through different platforms.

84/108     72/92     60/76     48/60     40/52     34/44
28/36       24/32     20/28     16/24     14/20     12/16

 

Weight

Weight refers to a font’s stroke thickness, which can create a content hierarchy by adding or removing emphasis to fonts of the same size. We balance our font weights and sizes carefully to work with our products. The QuickBooks Design System uses the following font weights:

QuickBooks font weights: Bold 700, Demi 600, Medium 500, Regular 400.

We target our type ramps to be screen-size appropriate. They pull from our One Intuit type scale, with adjusted sizes for QuickBooks desktop and mobile screens.

Our native type ramp has a reduced set of steps due to constraints created by the dynamic type technology in iOS. Larger display and headline text scales down for users on small screens. We define breakpoints within our Responsive Grid 2.0 spec.

 

Color

The following colors meet WCAG 2.1 standards. We still use legacy colors in the product, but we encourage teams to update these when possible. All typography should meet a minimum of 4.5:1 contrast ratio. If your typography appears on a gray background, it will affect the contrast ratio.


Stationary web

The majority of our sizes remain the same. We’ve indicated any changes below and the addition of “display” sizes.

 

Responsive

Leverage responsive typography at the XS and XXS breakpoints (≥480 and <480). Avoid using 14/20 for body copy if possible. Please note this is currently being finalized.

Native

The scale below applies to Android and iOS.

Use type pairings to create contrast and establish a visual hierarchy that can help users differentiate sections of content, forms, and components. Establish a visual hierarchy by combining font sizes, weights, and colors that create sufficient contrast while maintaining an aesthetic balance. You may use your best judgment when it comes to type pairs. 

 

Type pairing best practices

Headers should be at least one size larger than the body text. We recommend that headers have more visual weight than body text. We also recommend the space after the header be relative to your type sizes. 

 

Type pairing examples

Review these in-product examples, but remember that they merely provide guidance. You may need to adapt type pairings for your design.

Our ramp in the product is flexible, but following these guidelines can help you establish a hierarchy and create a cohesive experience.

 

How to use

  • Use the appropriate scale for your platform.
  • Find libraries in Figma: add “QB-Typography (Web),” “QB – Components (Android),” or “QB – Components (iOS).”
  • The responsive type scale “kicks in” at the XS and XXS breakpoints.
  • Leverage page structures, pairing information, and design system office hours for guidance.
  • If your needs deviate from this guidance, please reach out to the design systems team.

 

Page structures and templates

For your convenience, we will provide templates and examples in Figma. Combining templates with QuickBooks components should help you determine which typography to use. When you need to create a layout from scratch, start with templates and pairing guidance, and adjust as needed.

QBO Shell & Navigation (Current State)

 

Templates: trowser (COMING SOON)

 

Templates: page (coming soon)

 

When to use 14 px vs. 16 px

Historically, our product has used 14 px AvenirNext forINTUIT as the base size. We’ve introduced the 16 px base size for accessibility purposes and to better align with the Intuit Design System. However, some pages within our product still use 14 px. Visit our office hours to discuss the pros and cons of your situation.

Use 16 px for

•  Zero-hero states
•  Modal dialogs
•  Body copy
•  Components

 

Use 14 px for

•  Tables
•  Body copy
•  Components
•  Detailed information

 

  • Created by
  • Last modified October 7, 2020 by
  • Was this Helpful?
  •