Implementing typography at scale: the journey behind the screens

This post details the journey of rebuilding the Atlassian typography system, focusing on establishing a consistent and modern visual identity, improving readability and accessibility, and creating a strong foundation for future growth. The process involved incremental improvements, starting with baking typography tokens and components into apps to mimic the old system for testing. Subsequent phases enhanced visual hierarchy with a cohesive scale based on the minor third, bolder headings, increased minimum body size to 12px, removal of all caps for legibility, and simpler naming conventions. The introduction of new fonts, Atlassian Sans (derived from Inter Variable) and Atlassian Mono (derived from JetBrains Mono), addressed inconsistencies caused by system fonts. Key lessons learned include the critical nature of co-design, the importance of removing confusing elements ('UI text'), the necessity of cross-functional collaboration between design and engineering, planning time for iterations, and prioritizing naming conventions.