Optimizing Typography on macOS: Leveraging System Fonts for a Richer Font Weight Range
When designing cross-platform web applications, achieving a native feel often involves careful font selection and rendering considerations. A common challenge arises when using the CSS system-ui generic font family on macOS, which tends to limit font-weight variations to only 400 and 700, despite the underlying font—such as San Francisco (SF Pro)—offering a full spectrum from 100 to 900.
The Issue with system-ui on macOS
On macOS, browsers like Chrome rendering system-ui typically restrict font-weight rendering to standard weights—400 (normal) and 700 (bold). This limitation stems from how the operating system’s default system fonts are mapped and rendered in different browsers. Although SF Pro includes nine weights, they are not fully accessible via system-ui in all contexts, leading to a less nuanced typographic hierarchy.
Why Not Embed SF Pro Directly?
While it might seem straightforward to specify SF Pro directly, doing so is generally illegal unless you have proper licensing and distribution rights. Consequently, many developers seek alternative strategies to emulate the desired font weight flexibility without violating licensing agreements.
Proposed Solution: Custom Font Stack with Fallbacks
One approach is to define a layered font-family stack that prioritizes custom fonts when possible, but gracefully falls back to system fonts otherwise. For example:
css
font-family: "SF Pro Display", "SF Pro Text", "SF Pro", ui-sans-serif, system-ui, sans-serif;
This stack attempts to load SF Pro’s fonts first (if locally available and licensed), then falls back to the system’s default sans-serif fonts. On macOS, if “SF Pro” is available, you can leverage its full range of weights; on other platforms, the fonts will adapt accordingly.
Advantages of This Approach
- Cross-Platform Compatibility: Ensures consistent appearance across different operating systems.
- Use of Full Font Spectrum: When local fonts are available, utilize all weights for nuanced typography.
- No Licensing Violations: Avoids shipping proprietary fonts without permission.
- Graceful Fallbacks: Defaults seamlessly on platforms without SF Pro.
Considerations and Potential Challenges
- Font Availability: You’ll need to ensure “SF Pro” fonts are installed locally or hosted appropriately for your development environment.
- Performance Impacts: Custom font loading might introduce performance considerations
