This page contains existing QuickBooks typography examples. Preview the new Intuit Design System typography guidelines here.

Simplified typography

This typographical scale is comprised of a subset of the existing text styles currently used in QuickBooks. By narrowing down the number of available font sizes, we ensure consistency across the site. This will help pave the way to an improved typographical scale using the new math in future versions of our design system.

If at any point you encounter a font size that is not represented on this subset, please choose the nearest value according to the hierarchical requirements in your design.

Available text sizes

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

AvenirNext forINTUIT is our body font and has four styles: Regular, Medium, Demi and Italic.

Product Styles

Xtra-Large NumeralsGeogrotesque Medium (500) – 40px / 40px
Large NumeralsGeogrotesque Medium (500) – 28px / 32px
Headline 1Geogrotesque Medium (500) – 24px / 28px
Headline 2AvenirNext forINTUIT Medium (500) – 22px / 24px
TitleAvenirNext forINTUIT Medium (500) – 19px / 24px
SubheadlineAvenirNext forINTUIT Medium (500) – 16px
Body 1AvenirNext forINTUIT Regular (400) – 16px / 23px line height
Body 2AvenirNext forINTUIT Regular (400) – 14px / 20px line height
Table HeadingsAvenirNext forIntuit Regular All Caps (600) – 12px
Caption 1AvenirNext forINTUIT Regular (400) – 12px / 16px line height
Caption 2AvenirNext forIntuit Regular All Caps (600) – 12px
Ghost TextAvenirNext forINTUITItalic (400) – 14px / 20px line height

Core typography guidelines

  1. Create clear visual hierarchy
  2. Minimize use of styling and color per page
  3. Avoid uppercase


For Geogrotesque

  • Headlines should be short and no more than 2-3 lines.
  • Avoid using as plain body text, because it works best as a display font.

 

  • Was this Helpful?
  •