Nowy font na GitHubie – font systemowy

Zauważyliście, że GitHub zmienił fonta? Zainteresowało mnie to, gdy zauważyłem, że teraz strona wygląda inaczej na OS X i inaczej na Windowsie. Po sprawdzeniu źródła okazało się, że GitHub korzysta teraz z domyślnego fonta systemowego, który zależy od użytkownika. Jak to jest zrobione?

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?

Michał Miszczyszyn

Programista z doświadczeniem w JavaScripcie po stronie klienta i serwera. Wielki fan TypeScripta.

Subscribe to Type of Web

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!