Typography Settings — Customizable Density & Type Strategy

Project: Delivering user-controlled typography settings to modernize Outlook while meeting legacy expectations

My Role

Design Lead defining and integrating typography and type density settings for new React-based Outlook experience with cross-platform considerations.

Opportunity

Led effort to define and integrate typography and type density settings into new React-based Outlook experience. Primary Goal: Offer users control over content display through adjustable type size and spacing— a frequent request from power users and enterprise customers.

Strategic Alignment: Balance M365 web typography patterns with denser preferences of Outlook Win32 users. Deliver seamless, flexible experience satisfying both new and migrated users.

Process

Typographic Strategy: Developed scalable styles adhering to M365 standards while adapting for Outlook’s unique surface needs. Ensured accessibility and readability across all density modes.

Density Framework: Collaborated with research and design partners to define and test content density tiers (spacious, cozy, compact) with clear guidelines for line spacing, font size, and padding.

Legacy Compatibility: Mapped density modes to Win32 expectations, enabling smooth transition for long-time users without visual disruption.

Engineering Partnership: Delivered clear design tokens and system logic enabling adaptive typography at scale. Ensured responsiveness and alignment across modules.

Cross-Platform Consistency: Maintained unified experience across desktop, web, and mobile endpoints supporting One Outlook vision.

Implementation Support: Multiple design reviews, interactive prototyping, and close engineering iteration to handle layout edge cases and refine behavior.

Results

Flexible Foundation: Delivered scalable typography system successfully bridging modern design principles and legacy user expectations.

User Satisfaction: Improved feedback in sessions with migrated Win32 users, demonstrating successful transition support.

System Alignment: Strong alignment with M365 typography guidance while honoring Outlook-specific needs.

Development Efficiency: Increased engineering team efficiency through clear documentation and tokenized styles.

Strategic Impact: Supported business goals around accessibility, personalization, and user retention during platform transition.

Modernization Success: Balanced innovation with user familiarity, enabling smooth migration to modern React-based experience.