Troubleshooting Font Rendering Across Platforms
The same font looks different on Windows, macOS, and Linux because each platform uses a different text rendering engine. Learn how to minimize cross-platform inconsistencies.
Font Pairing Suggestions
Why Fonts Look Different
macOS uses Core Text with subpixel antialiasing, producing smooth, slightly heavier text. Windows uses DirectWrite (or GDI on older systems), rendering text sharper but thinner. Linux uses FreeType with various hinting and antialiasing options depending on the distribution and user settings.
The Weight Perception Problem
A font at 400 weight on macOS appears visually similar to 500 weight on Windows because macOS applies more antialiasing smoothing. This means text that looks perfectly readable on a Mac designer's screen may appear thin and washed out on Windows.
CSS Rendering Hints
-webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale on macOS reduce the smoothing that makes text appear heavier, bringing it closer to Windows rendering. However, this can make small text harder to read, so apply it selectively to headings and UI elements rather than body text.
Font Choice Mitigations
Choose fonts designed for screen rendering: Inter, Roboto, and Source Sans Pro are optimized for both macOS and Windows. System font stacks (font-family: system-ui, sans-serif) give the best platform-native rendering at the cost of visual consistency. Test your chosen fonts on both platforms during the design phase, not after launch.
Web Font Loading Impact
Font loading affects perceived rendering. Flash of unstyled text (FOUT) shows the fallback font briefly before the web font loads. Flash of invisible text (FOIT) shows no text until the font loads. Use font-display: swap for content and font-display: optional for decorative fonts to balance performance and visual stability.