As the main Design System Designer in the Sky Sports team, I collaborated closely with design leads, a UI designer, and iOS and Android developers to simplify and scale the system—delivering a consistent and scalable experience across platforms.Here are some of the achievements from this work:
Consolidated
font sizes
Intuitive and
scalable styles
Change didn't affect the look & feel
Clarity to support designers and devs.
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:
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.
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.
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.
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. This method struck a balance between being intuitive and maintaining consistency.
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!
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.
Eliminated redundancies while preserving the brand's visual identity, driving to an easier and consistent system.
Improved designer understanding, reduced errors, supported better design–dev collaboration, and improved adoption.
Tested changes side by side and refined styles with care, maintaining the original design’s personality while consolidating the type scale.
Created a typography usage guide helping designers choose the right styles. This improved adoption of the system.
Refining Typography at Sky Sports: scaling down to level up
Sky Sports Scalable Design Systems: Building Collaboration & Efficiency