System UI Font Stack Test

This page verifies our system UI font implementation.

Checks to perform:
  • DevTools → Computed → font-family should start with "system-ui"
  • Network tab should show 0 font file requests
  • Body text renders at 18px (1.125rem)
  • Line length ~60-70 characters in container-measure

Typography Samples

Heading 1 - Bold System Font

Heading 2 - Bold System Font

Heading 3 - Bold System Font

This is body text at 18px using the system UI font stack. It should render using your operating system's default interface font - typically SF Pro on macOS, Segoe UI on Windows, or system-ui on Linux.

This paragraph demonstrates our 2em spacing rule. The line height is 1.5 and the measure should be around 65 characters wide for optimal readability.

DaisyUI Component Test

This card uses the same system font stack. All text should be consistent across components.

/* System UI Font Stack */
font-family:
  system-ui,
  -apple-system,
  "Segoe UI",
  Roboto,
  "Helvetica Neue",
  Arial,
  "Noto Sans",
  "Liberation Sans",
  sans-serif;