Optimized font stacks for Web, Android, and iOS platforms

Segoe UI
Web & Desktop
Optimized for Windows desktop and web applications

CSS Implementation:

font-family: 'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;
Roboto
Android
Google's signature font for Material Design

CSS Implementation:

font-family: 'Roboto', 'Noto Sans', system-ui, sans-serif;
SF Pro
iOS
Apple's system font for iOS devices

CSS Implementation:

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
Segoe UI - Windows & Web
Microsoft's modern font family, optimized for clarity and readability

Font Weights

100Thin: The quick brown fox jumps over the lazy dog
300Light: The quick brown fox jumps over the lazy dog
400Regular: The quick brown fox jumps over the lazy dog
500Medium: The quick brown fox jumps over the lazy dog
600Semibold: The quick brown fox jumps over the lazy dog
700Bold: The quick brown fox jumps over the lazy dog

Text Sizes

48pxDisplay

The quick brown fox jumps over the lazy dog

32pxHeading 1

The quick brown fox jumps over the lazy dog

24pxHeading 2

The quick brown fox jumps over the lazy dog

20pxHeading 3

The quick brown fox jumps over the lazy dog

18pxBody Large

The quick brown fox jumps over the lazy dog

16pxBody

The quick brown fox jumps over the lazy dog

14pxCaption

The quick brown fox jumps over the lazy dog

12pxSmall

The quick brown fox jumps over the lazy dog

Implementation Guide

Complete Font Stack (globals.css)

/* Platform-specific font stack */
body {
  font-family: 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont,
               'SF Pro Display', 'SF Pro Text', 'Helvetica Neue',
               system-ui, sans-serif;
}

/* Web and Desktop - Segoe UI priority */
@media screen and (min-width: 768px) {
  body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont,
                 system-ui, 'Helvetica Neue', sans-serif;
  }
}

/* Android - Roboto priority */
@supports (-webkit-touch-callout: none) {
  body {
    font-family: 'Roboto', 'Noto Sans', system-ui, sans-serif;
  }
}

/* iOS - SF Pro priority */
@supports (-webkit-touch-callout: default) {
  body {
    font-family: -apple-system, BlinkMacSystemFont,
                 'SF Pro Display', 'SF Pro Text',
                 'Helvetica Neue', sans-serif;
  }
}

Platform Detection

Web & Desktop

Uses media queries to detect desktop viewport sizes and applies Segoe UI

Android

Uses CSS @supports to detect Android browsers and applies Roboto

iOS

Uses -apple-system and CSS @supports to detect iOS and applies SF Pro

Fallback

System-ui ensures native font rendering on all platforms