Typography and Musical Scales
The original typography we inherited within the Intuit Design System (IDS) was not being adopted by many of the product teams or marketing within Intuit. The typeface was solid since Intuit had already invested in a customized typeface, and IDS provided guidance on native fonts for its mobile apps. This meant the type scale, ramp, accessibility, and usage guidance needed to be revisited.
Early in my work with the Intuit Design System, I spent time with one of the designers discussing the ability to create a rhythm within our interfaces. We examined studies, work, and writings from well-known print and graphic designers. We understood that all foundations and elements within the system contributed to the interface's rhythm or lack thereof.
In researching how to complement the existing design language with a new version of the design systems typography, it became apparent that aligning with the correct musical scale would be the best method. My task was to convince a group of highly talented designers with far more experience in typography to try another way to produce an outcome that would serve all of Intuit.
Challenge
Enhance the existing IDS typography for a unified system that will work for use cases across Intuit's ecosystem, products, platforms, and care experiences globally.
Complimentary type scale and type ramps that work across platforms and screen sizes
Accessible
Global
Type ramps that simplify coding and continuity across widgets, products, and the ecosystem
Guidance on how to best apply
Role
Strategist collaborating with design, development, and executive leadership to set goals, priorities, and roadmaps.
Design Lead forming the project team, providing design direction and project oversight.
Designer researching and creating the native app solution.
Type Scale
We started with the type scale by collecting and analyzing the various scales used around the organization.
We then analyzed the alignment of our most used type sizes with each musical scale and chose the Minor 3rd. To align with WCAG 2.1 guidelines, we began with a 1.5 calculation for line height and found that spacing in the larger font sizes was far too spacious, so we began to assess various line height calculations. We would follow up with accessibility experts to ensure we were landing on a good combination.
We then analyzed the alignment of our most used type sizes with each musical scale and chose the Minor 3rd.
To align with WCAG 2.1 guidelines, we began with a 1.5 calculation for line height and found that spacing in the larger font sizes was far too spacious, so we began to assess various line height calculations. We would follow up with accessibility experts to ensure we were landing on a good combination.
WCAG 2.1 Guidelines
Line height (line spacing) to at least 1.5 times the font size;
Spacing the following paragraphs to at least two times the font size;
Letter spacing (tracking) to at least 0.12 times the font size;
Word spacing to at least 0.16 times the font size.
Rules we applied:
Begin with a modular scale and adjust sizes and line heights individually
Type sizes within the scale should be divisible by two
Line heights should start from a ratio of 1.5 :1
Line heights should be divisible by four and align with a 4px grid
We worked with our stakeholders and had them test the different approaches with the work they were already doing. We also contacted accessibility experts to review our options and ultimately landed on a 1.3 line spacing for all font sizes above 20 pixels.
“…Even between the 1.2 and 1.3 for Headers, I prefer the 1.3 so pretty happy with this change. I wouldn't have thought about testing "É" below a "g"!”
“1.3 is preferred over 1.2. Airier, less intimidating to read big blocks of text…Being declarative is awesome, with guidelines that aren’t so strict that designers can’t use it.”
Type Ramp
Our next step was to get to a standard ramp that could be applied across the organization. Once again, we collected and analyzed the various type ramps across the company.
We developed a common terminology and ramp for our various products and platforms.
“I've been utilizing the new type ramp that was shared and really loving the improvements! When will this be rolled out? When can we start using it officially? We’re discussing design debt and I think I can feasibly get these type changes prioritized in Mint and Turbo native. 🤓 So excited.”
Solution
Web Type Scale and Ramp
Native App Type Scale and Ramp
Finally, we developed and documented guidance to help our designers utilize the new system with repeatable and predictable results.
Weights
Line Length
Pairings
Paragraphs
Bullets and Lists
Outcomes
We developed a system that worked across product lines, customer types, and platforms.
The solution greatly simplified the system.
The alignment with the musical scale allows the team to add larger or smaller sizes based on the next step in the scale.
The type scale, with rules based on existing decisions within the design system, helped to create the rhythm we wanted to achieve between our components and content within interfaces.
Experienced designers initially hesitated to follow musical scales and formulas derived from the existing design system. Still, they later discovered that it produced results similar to what they would create based on their previous methods with more predictable results.