Juliana · Product Designer

The Typography Takedown: How We Scaled Down to Level Up

Overview

OVERVIEW

When Sky Sports approached us, they had already made significant strides in their design system. They had a library, colour schemes, and font styles, which visually looked impressive. However, the issues they faced included:

Inconsistent Design Application: Despite having a design system, consistency across components was lacking.
Process Deficiencies: There was no clear process for updating and maintaining the design system, leading to outdated or missing elements.
Collaboration Challenges: Teams struggled to collaborate effectively due to the absence of clear guidelines.

MEET THE TEAM

As the main Design System Designer in the Sky Sports team, I collaborated closely with designers, stakeholders, devs. Here's an overview of the team I collaborated with:

2 UI Designers

Stakeholders: UI lead, engineering manager, PMs.
15 iOS and Android developers

AUDITING TYPOGRAPHY

As part of our comprehensive audit, I conducted an in-depth review of typography usage across Sky Sports' mobile and tablet platforms. Collaboration with the Sports team was crucial during this phase to ensure alignment on essential elements and identify areas for improvement. Here are the key findings and actions taken from the typography audit.

Unclear Naming Convention

Issue: The naming convention approach was unclear to designers. Styles were named by category followed by a number and, in some cases, the use case (e.g., body 1, body 2 article, body 1 medium, headline 4).

Impact: This lack of clarity made it difficult to maintain consistent typography across the product. Designers weren't linking styles to components; instead, they would assign sizes and line heights as they saw fit, resulting in an overly extensive typography set within the product.

Excessive Font Styles

Issue: Over 200 font styles were in use, including those from the system as well as additional sizes and line heights that were not part of it. Additionally, multiple font libraries were being used.

Impact: This variety made it difficult to maintain a cohesive visual identity and added unnecessary complexity to the design system.

TYPOGRAPHY & VISUAL EXPLORATION

Given the excessive number of font styles with minimal differences, our task was to create consistency without altering the established visual appeal of the designs. Our goal was to reduce disparities, make the design system easier to use, and improve its adoption.

Identifying Key Typography Styles

Grouping Similar Styles: By grouping similar font styles, I identified redundancies and unnecessary variations.    
Selection Criteria: The criteria for selecting key styles included readability, scalability, and alignment with the overall visual identity.    
Harmonising Styles: Adjustments were made to harmonise typography styles across different elements such as headings, subheadings, body text, and captions.    
Maintaining Look and Feel: Care was taken to ensure that changes maintained the original look and feel of the designs, preserving the brand’s visual identity.

Testing the Consolidation of Sizes

Screen Duplication: I began by duplicating existing screens to create a sandbox environment for exploration. This allowed me to experiment with different typography styles without affecting the original designs.    
Side-by-Side Comparison: Each modification was compared with the original to ensure the visual integrity remained intact. This iterative process helped identify the most suitable styles.

INTRODUCING NEW TYPOGRAPHY STACK

One important detail about the old typography set is that it included different sizes for mobile and tablet. I spoke with the developers to confirm whether they were using separate fonts, and they weren’t. Instead, they were implementing mobile sizes and adjusting font sizes for mobile and tablet based on users' accessibility preferences. As a result, the mobile and tablet font stacks were also consolidated.

This is the new typographic scale. It helps show the visual hierarchy in text and keeps the sizes of headings, body text, and labels consistent.

NAMING CONVENTION: A FRESH APPROACH

After finalising the typography set and consolidating sizes and line heights without impacting the product, the next step was to establish a clear and user-friendly naming convention.

Benchmarking for Inspiration

To find the best solution, I conducted a benchmark and discovered some great examples. One system stood out for its simplicity, using only two categories: headline and body. Initially, I thought this might work well for us, so I tested it within the product. However, it felt too broad and lacked the structure needed to maintain consistency across the product.

The Chosen Method

‍I then explored another approach that combined simplicity with clarity: organising styles into categories, each with t-shirt sizes, and 6 key type styles: Headline, title, subtitle, body, label, and button. This method struck a balance between being intuitive, maintaining consistency and scaling typography decisions across devices, this includes not only font size, but line height and weight.

Team Collaboration and Approval

I introduced this approach to the UI team, encouraged them to experiment with it, and gathered their feedback. The response was overwhelmingly positive, and the new naming convention was approved.

This was a significant win for the team, paving the way for a more cohesive and streamlined design system!

DOCUMENTING TYPOGRAPHY USAGE

To support the designers on their choice to chose the right font style, I gave them access to the template where we have all the set of categories and the components used in each category. This would be a good clue for them, but it wasn't enough, so I wrote down rules to document how to use each category.