GitHub adopte San Francisco sur le web

Nicolas Furno |

Depuis la sortie d’OS X El Capitan, les sites web peuvent utiliser la police du système d’Apple pour leurs textes (lire : Safari permet aux sites d’utiliser la police du système). Sur un Mac, c’est désormais San Francisco, la police créée par le constructeur, qui a ce rôle. Jusque-là, en dehors de celui d’Apple, aucun gros site n’avait franchi le pas, mais c’est en passe de changer. Et c’est GitHub (service d’hébergement et de partage de code) qui ouvre la marche avec une nouvelle interface qui remplace Helvetica Neue par San Francisco.

San Francisco en action. — Cliquer pour agrandir
San Francisco en action. — Cliquer pour agrandir

La différence est assez nette, même si on ne s’intéresse pas à la typographie de près. Il suffit de consulter les réactions hier, suite au changement, pour constater que le changement a été repéré par de nombreux internautes. Avec, comme à chaque changement, des réactions contrastées entre amateurs et détracteurs. Une extension pour Chrome existe déjà pour revenir à l’ancienne police et on imagine qu’on trouvera rapidement la même chose pour les autres navigateurs.

Comparaison avant et après — Cliquer pour agrandir
Comparaison avant et après — Cliquer pour agrandir

GitHub est le premier service d’envergure à faire ce choix, mais ça ne sera pas le dernier. La prochaine mise à jour de WordPress, prévue pour le mois d’août, abandonnera Open Sans dans son interface d’administration. À la place, on aura la police du système et donc également San Francisco sur macOS et iOS. Sur Windows, ce sera Segoe UI et Roboto sur les appareils Android et les Chromebook.

Si vous concevez un site web et que vous voulez proposer la police du système pour tous vos utilisateurs, voici la liste utilisée par GitHub et WordPress. Vous pouvez l’insérer dans les fichiers CSS pour avoir toujours la bonne police.

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

Pokémon Go sort = une extension Chrome permet de masquer les actus sur Pokémon Go.
Github change sa police par défaut = une extension Chrome permet de revenir à l'ancienne.

Décidément, les gens détestent la nouveauté et le changement.

San Francisco est bien plus lisible qu'Helvetica Neue, c'est plutôt une bonne nouvelle ce changement pour Github.

avatar DouceProp | 

Tiens, ce qui me rappelle que je n'ai jamais pu l'utiliser cette police... Je l'avais, il me semble, téléchargé avec lien de MacG, glissé dans Suitcase et impossible à activer... Il y a point devant le nom de la typo... « .sanfrancisco » alors que les fichiers .otf s'appellent bien « SanFranciscoText-Bold.otf » (par exemple)...

avatar mat-u | 

Avec un soucis de kerning sous Chrome vs. Safari concernant la font San Francisco :) voir https://bugs.chromium.org/p/chromium/issues/detail?id=627609

avatar Tekta | 

Je sais que ça n'a rien à voir avec le sujet, mais vous avez aussi des problèmes de téléchargement d'app du store?

avatar Wes974 | 

En fait je crois que ça va faire une semaine au moins que j'avais remarqué ce changement. Il y a aussi 2 ou un mois environ, pendant un petit moment Facebook aussi avait adopté San Francisco comme police mais c'est resté une semaine je crois et il sont revenu à l'ancienne, ce que je trouve dommage.

Et pour ceux que ça intéressent grace à l'extension Fontface Ninja sur Safari on peut savoir facilement en quelle police est écrite un texte sur le web.

avatar pombour | 

Apple n'a qu'à "libérer" cette font et la mettre sur un CDN ! ©a arrangera tout le monde :p

avatar Bigdidou | 

Franchement, entre la police de San Francisco et la police Helvétique, j'ai une préférence nette pour la seconde qui paraît bien plus placide.
Mais je n'ai peut-être pas très bien compris de quoi l'article parle.

avatar ThibaultV | 

Au passage, sur Windows ils ont aussi mit la nouvelle police système, Segoe UI.

avatar xDave | 

En général on met les typos système en dernier dans la liste (CSS font-familiy...) à moins de vouloir un web aseptisé où tout se ressemble, je ne vois pas de quoi en faire une news.
Avec tous les progrès dans le domaine de la typographie sur le web ces dernières années, c'est d'un grand dommage de s'exciter sur une police système...

avatar CNek | 

Je me suis dis la même chose, mais après réflexion pour des services comme GitHub ou le panneau d'admin Wordpress je trouve ça logique que l'interface s'efface derrière la fonction. En étant dans le prolongement du périphérique et son environnement on se focalise sur la tâche a effectuer et pas les ornements. (Pensée "App")
Et puis on peut pas dire que GitHub ou le backoffice de WP soient super folichons en matière d'émotions visuelles à la base ;)

avatar xDave | 

Certes, ce n'est pas folichon GitHub ou le BO de WP (on dirait que tu l'emploies comme un générique pour CMS, ça m'inquiète! hehehe) mais pourquoi en parler alors?

Mais je ne suis pas d'accord qu'une interface d'admin Web soit le prolongement du système DESKTOP, ça n'a aucun rapport. Et il y a un paquet de typos qui font la blague pour un BO (OpenSans par exemple) et disponible pour toutes les plateformes!
ça me ferait bizarre de voire la tronche de mon BO changer de typo parce que je change d'ordinateur (PC/MAC).

ET s'effacer devant la fonction, ça signifie quoi? faire un truc moche et non ergonomique?

bref... :)

avatar CNek | 

On assiste à la convergence desktop / web depuis quelques années déjà. Pour la majorité des utilisateurs la distinction n'a plus lieu d'être...
Le futur backoffice de WP (Calypso) est conçu avec des libraries de types Single Page Application.

Tu utilises Instagram sur ton tel Android -> Roboto, sur ton iOS -> San Francisco, sur ton Win 10 dans un navigateur Web -> Segoe UI.
(Exemple théorique...)

L'idée c'est d'avoir une app qui s'intègre bien dans chaque environnement avec ses spécificités. Ça montre que le designer prend aussi compte des choix de l'utilisateur et ne cherche pas à imposer le sien.
Le web c'est avant tout du contenu (90% de texte) et celui-ci est de plus en plus abstrait de sa forme, exemple des Instant Articles de FB, l'explosion des APIs...

Et puis entre nous, il y a parfois plus de différence visuelles entre les navigateurs avec la même font à cause du moteur de rendu lui-même ;)

Rien que la dif OS X / Win est pharaonique en terme d'épaisseur perçue (méthode de sub-sampling...)

CONNEXION UTILISATEUR