This is the new Intuit Design System typography guidelines. See existing QuickBooks typography guidelines.

Typography is a cornerstone element of any brand’s visual language.  It transcends physical, digital,  and countless other mediums to deliver commonly understood information.  Intuit has long history in quality user experience craftsmanship.  Here are a summary of Intuit Design System typography and spacing guidelines.

Resources
Download fonts

Type scale

Geogrotesque is a display font and should only be used as such. It is our headline font, is used in the badge and sometimes as call out text in advertisements and other publications. In digital environments, it is available in three sizes.

AvenirNext forINTUIT is our text font that has five sizes in three styles: Regular, Demi and Italic.

Basic typography rules to create clear visual hierarchies:

Headline 1Geogrotesque Medium 44px/48px
Headline 2Geogrotesque Medium 36px/40px
Headline 3Geogrotesque Medium 28px/32px
Headline 4         AvenirNext forINTUIT Regular 24px/28px
Body 1AvenirNext forINTUIT Regular 19px/24pxAvenirNext forINTUIT Demi 19px/24px
Body 2AvenirNext forINTUIT Regular 16px/20pxAvenirNext forINTUIT Demi 16px/20px
Body 3AvenirNext forINTUIT Regular 14px/20px
(Exception: Use only in information dense pricing cards.)        
AvenirNext forINTUIT Demi 14px/20px
(Exception: Use only in information dense pricing cards.)
Body 4 AvenirNext forINTUIT Regular 12px/16pxAvenirNext forINTUIT Demi 12px/16px

 

How we created the type scale

To develop the scale, we tested the most common text size first. In our case, it is 16/20 AvenirNext forINTUIT. Type scales are developed not by type size, but by line-height. In our case this is 20 pixels. The line height is divisible by 4, the size of our atomic grid.

16/20 is the base size we start to calculate the type scale from.

20 pixels is also a typical number in our spatial system, allowing us to synchronize spatial units and type scale and creating a mathematical rationale that is consistent and easy to follow.

Establishing the common text size lets us create the scale. The criteria for the scale are font sizes that are distinct enough from each other to create interesting and engaging layouts as well as clear information hierarchies. Each font size needs to display a line spacing similar to the next font size. The result is an evenly spaced, overall homogeneous field of text, with line heights that sit perfectly on our atomic grid.

The visual appearance in line height is similar from font size to font size. All line heights are dividable by 4 and sit on the atomic grid.

Type scales are often decided by using ratios. Done well, these ratios correlate to musical scales and can help to create a beautiful rhythm to the eye. In our case, we use ratios such as 1.2 (a minor third) and 1.25 (a major third). These ratios will play an ongoing role as we decide on and the size and scale of elements and components in the system.

It’s best to decide on a type scale with the least amount of type sizes. We try to select just enough sizes to cover all major use cases. That way we change type sizes as little as possible to decrease cognitive load for our users.

In our case, we decided on eight type sizes. We selected them to be easy to remember for anybody working with our design system and distinct so that they are easy to identify without the need to measure in a layout.

Our type scale helps to create balanced and synchronized layouts across the ecosystem and ideally contributes to a visual rhythm that users unconsciously identify us with. With a focus on order and harmony, our type scale supports us as we strive for excellence in UI design and user experience.

Customer and Intuit benefits of typescale

Legibility, usability, adaptability are some of the most valuable outcomes from good typography and scale. Consistent and durable user experiences are impossible without careful thought of how the written word is presented.   Universal components like headers and fields have a uniformity in size. In tables, rows height and buttons are equal size and are integral parts to a larger family.

The objective of the type scale is to create a harmonious scale while reducing variables in the UI. Every variable added to the system needs to be developed, maintained and quality controlled and has the potential to create expense and inconsistent user experiences. The inherent goal is to reduce the amount of variables using simple logic in order to create the greatest variety in layout and innovation without compromising quality.

Core typography guidelines

 

 

 

 

 

How to create create clear visual hierarchies:

We don’t use color in typography (unless it’s for specific display purposes such as advertisements). 
If you’re thinking of using color, please visit us at office hours.

We also don’t use uppercase styling. The one exception is eye brows in marketing and product. It is only used for references because it’s legibility is compromised.

  • Good typography should have a minimum amount of style changes to create clear hierarchies
  • Aim for no more than 3-5 with on any given page

For Geogrotesque (font-family)

  • Geogrotesque headlines can never show up more than 2-3 lines
  • Geogrotesque will never be used as plain body text, because it is truly a display font
  • Was this Helpful?
  •