San Francisco: jablečné písmo a jeho použití na webu

Pro weby s primárním cílením na rychlé načtení se často vyplatí obětovat písmo. Odpadne tím starost o odezvu cizích serverů s pokusy o cachování, případně nutnost přímé implementace a licencování pro doručování ze serveru vlastního.

Instalace

Nejrozumnější cestou je použití systémových písem. Grafik se tím sice vzdává kontroly nad jednotnou podobou, web však zase více koresponduje s konkrétním operačním systémem. Pro Apple zařízení je výchozím písmem San Francisco.

To i přes přítomnost v každé čisté instalaci nelze vybrat v grafických editorech. Pro použití v návrzích proto Apple nabízí San Francisco ke stažení samostatně (seznam změn a tedy i nové verze písma lze sledovat na dedikované stránce).

Návrh

Samotný balíček obsahuje úctyhodných 51 souborů, vyplatí se tedy zkontrolovat HIG. Poté lze systém uchopit velmi snadno – varianty se liší cílovým zařízením a konkretní velikostí písma. SF Compact vzniklo přímo pro Apple Watch, pro naše účely ho tedy můžeme (alespoň zatím) ignorovat.

U varianty SF Pro podle doporučení platí následující pravidlo pro iOSmacOS:

  • SF Pro Display: prvky o velikosti 20 pt a více,
  • SF Pro Text: prvky o velikosti pod 20 pt.

Kód

Zajímavé je, že na straně CSS není nutné vybírat mezi SF Pro DisplaySF Pro Text. O to se stará operační systém automaticky. Kodérovi tedy stačí samospád, který zajistí použití systémových písem napříč platformami:

font-family:
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  "Roboto",
  "Oxygen",
  "Ubuntu",
  "Cantarell",
  "Fira Sans",
  "Droid Sans",
  "Helvetica Neue",
  sans-serif;

Rozhodně se vyplatí navštívit System Fonts in CSS (furbo.org), odkud je tato konkrétní podoba převzata. Podobných samospádů koluje po internetu více, některé z nich jsou ostatně odkazovány přímo z článku, ve kterém je mimo jiné i stručná historie celé kauzy kolem vývoje -apple-systemsystemsystem-ui.