Nowy font na GitHubie – font systemowy • Type of Web

Font systemowy w CSS

Jeśli zajrzymy do CSS–ów zobaczymy takie, ciekawe ustawienie fonta:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Jest to jedno z dwóch możliwych rozwiązań, jeśli chcemy skorzystać z fonta systemowego – to lepsze. Smashing Magazine opisuje fonty systemowe z większymi szczegółami i sugeruje użycie takiego ustawienia:

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

Tak to wygląda w praktyce:

To jest tekst pisany fontem systemowym.

Krój czcionki napisu powyżej zależy od systemu, na którym otworzymy tę stronę. Nie wierzysz? Sprawdź!

Jak to jest zrobione

Rozbijmy sobie ten CSS na czynniki pierwsze:

-apple-system – font systemowy w Safari na OS X i iOS. Różny w zależności od wersji systemu, a nawet od wielkości fonta (automatycznie przełącza się pomiędzy San Francisco Text a San Francisco Display dla tekstu większego niż 20px)
BlinkMacSystemFont – jak wyżej, ale w Chromie na OS X
Segoe UI – font z Windows i Windows Phone
Roboto – Android i nowsze Chrome OS
Oxygen – KDE (linux)
Cantarell – GNOME (linux)
Fira Sans – Firefox OS
Droid Sans – starszy Android
"Helvetica Neue", sans-serif – jeśli nic z powyższych nie zadzaiała, używamy fonta domyślnego

Problemy

Wszystko działa pięknie, jednak są dwa małe problemy. Pierwszy z nich to fakt, że wszystko działa dzisiaj – ale po kolejnej aktualizacji Windowsa albo MacOS fonty mogą się zmienić. Trzeba będzie wtedy również zaktualizować nasze pliki CSS. Ponadto trzeba uważać na kolejność, w jakiej podajemy fonty. Na przykład: Jeśli zmienilibyśmy kolejność Roboto i Segoe UI to osoby mające zaintalowanego fonta Roboto na Windowsie nie zobaczyłyby niestety Segoe UI.

Częściowym rozwiązaniem tych problemów (a na pewno dużym ułatwieniem) jest korzystanie z któregoś z języków kompilowanych do CSS, na przykład SCSS, i ustawienie tego fonta jako zmiennej:

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

…

font-family: $system-font;

Rozważam wykorzystanie tego ustawienia na blogu! Myślę, że to świetny pomysł, w szczególności dla stron z dużą ilością treści.

Więcej doczytajcie we wspomnianym artykule na Smashing Magazine oraz na medium.

Edit 12.07.2016 r., 22:31

Okazuje się, że od pewnego czasu Facebook stosuje coś podobnego. Używam OS X i na moim Facebook do elementu <body> dodana jest klasa .sf, która powoduje zmianę fonta w całej aplikacji na:

font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;

Jestem ciekaw czy użytkownicy Windowsów widzą coś podobnego?