system-ui · variable

San Francisco

Same face, many voices — weight and width axes put to work in small everyday layouts.

Magazine masthead

Vol. 12 · No. 4 · April

Fog City

Features

What the hills remember after the rain

A walk from Twin Peaks to the Embarcadero, counting every stair and every shade of gray.

Weather strip

San Francisco

California, United States

69°

  • Mon64°
  • Tue61°
  • Wed58°
  • Thu62°
  • Fri67°

Article cards

Transit

The 38 Geary never ends

Forty minutes, twelve neighborhoods, one unbroken ribbon of stories.

8 min read · Apr 11

Design

Condensed type on Muni maps

When every station name has to fit, width becomes a feature.

5 min read · Apr 9

Food

Cioppino, thrice

Three kitchens, one stew, and a debate about fennel.

12 min read · Apr 2

Evening schedule

Saturday

April 18

  1. Ferry Building walk

    Meet at the clock tower

  2. Dinner · North Beach

    Reservations under “SF Variable”

  3. Film at the Castro

    Balcony seats · doors at 8:45

Settings panel

Typography

System font · SF Pro axes

Weight

Ultralight to Black

350

Width

Compressed to Expanded

100

Stylistic set

Alternate digit forms

ss01

Dashboard strip

Sessions

12,480

+4.2%

Bounce

31.6%

−1.1%

Avg. width

wdth 92

flat

Order ticket

Ferry Coffee

Order #1842

  • Oat latte5.50
  • Almond croissant4.25
  • Drip · large3.75

Total13.50

Thanks — see you on the Embarcadero

Axis reference

Weight

  • 100 Ultralight
  • 400 Regular
  • 600 Semibold
  • 900 Black

Width

  • 50 Compressed
  • 75 Condensed
  • 100 Normal
  • 150 Wide