Type Scale Update
The Problem
Our previous typography system relied on fixed type sizes with no clear rationale behind them. This led to inconsistent designs, accessibility issues, and miscommunication between design and engineering, as there was no shared language or understanding of how type should scale across different devices. Designers and engineers often disagreed on sizes and units, making collaboration inefficient and inconsistent implementation across the application.
The Approach
To create a dynamic type system, we conducted a full audit of the application to identify inconsistencies and gaps. We then defined a variable type scale and established clear naming conventions, creating a shared visual language that aligned across the enterprise.
Creating a scalable, accessible, and shared type system
Utilized for web and large tablets, this scale is optimized for spacious layouts and desktop readability, providing a balanced hierarchy.
Designed for mobile, this scale is optimized for small screens and tighter layouts, ensuring clear readability in limited space.
Method
Our approach to typography began with defining a consistent type scale that relates all sizes through a shared ratio. We categorized text styles by role to establish hierarchy and determine appropriate sizing and weight for each purpose. This method allowed us to generate scales that are both balanced and contrasting, ensuring clarity and readability. By applying the same ratio across devices, we created a system that is adaptive, scalable, and easy to maintain for web, tablet, and mobile contexts.
Styles & Categories
In order to create clear hierarchies, organize information, and guide users through content, we categorized our type styles by role and purpose. Each style was defined not only by size but also by function, such as headings for structure, body text for readability, and captions for supplementary detail. This role-based approach allowed us to build a consistent and predictable scale that adapts across web, tablet, and mobile contexts.
Type Sizes
Our typographic scale establishes balance and contrast by relating all font sizes through a shared ratio. This method ensures scalability and adaptability across different devices. Text size and weight are predefined for each style, and the system consists of two scales — normal and compact — that support a wide range of use cases.
Usage Guidelines
We developed guidance for not only our design team, but our partners in engineering and product to share the same visual language, by establishing guidelines that provided specific examples of proper usage of our type styles and sizes.
Implementation
To roll out the new typography system safely, we followed a careful, methodical process. Each change was audited, documented, and tested in phases to maintain consistency across pages, devices, and browsers, while ensuring production remained stable. By collaborating with our partners in engineering, QA, customer support, and product, we all worked together to make sure any change to the application was not a surprise.
Audit & Inventory
We conducted a full audit of every page and container, marking each type style, noting inconsistencies, and making informed design decisions along the way. This step not only helped identify where updates were needed but also provided a clear understanding of how typography was being used throughout the product, and how we could create a more consistent typographical experience within the product.
Phased Implementation
Changes were deployed in phases, organized around main parent pages and their child pages. We used a dedicated runway server to stage updates, which allowed the team to test and validate changes before pushing them to production. This approach ensured that updates could be introduced incrementally without disrupting users or ongoing work.
Documentation for Accountability
Every change was carefully documented so QA could verify consistency across devices and browsers. This included marking each updated element and noting any fixes that were required. By providing detailed records, we ensured that no inconsistencies slipped through and that the typography system remained reliable and cohesive.
Retrospective
Setting expectations and giving consistent updates on a complex and slow moving project is not always easy, but important when releasing any major changes into the wild. I had set up a weekly update not only with our engineering and product partners, but we also included customer support, as they were the frontlines and first point of contact with our users when any changes disrupt their workflow. We fortunately had very few errors or user complaints when the update was rolled out into production, but in the cases where their were disruptions, they were quickly documented and resolved before users had reported any issues with our changes.
Documenting everything, allowed us to have well established artifacts that were crucial to setting expectations and to talk through decisions that were made. It also improved our shared design language when speaking about type and our approach towards how we use and implement typographical elements in our application. We were able to resolve inconsistent implementations in our codebase, while providing an improved vocabulary with our engineering partners when discussing type usage.
Through this process, I became intimately familiar with every page in the product. This allowed me to make informed design decisions that balanced user experience, designer intent, and engineering constraints. My work ensured that updates were not only consistent and readable but also practical and implementable across the entire platform.