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-system → system → system-ui.