Geist Font by Vercel - Une Police pour ton SaaS

0:00bon les amis je voulais faire une vidéo aujourd'hui sur un sujet intéressant dans le sas dont on ne parle pas énormément c'est le sujet des polices et des fontes et on m'a envoyé il y a une semaine une fonte que j'ai trouvé très intéressante qui s'appelle GIST qui a été fait par en fait la team de vercell et cette fonte elle est assez chouette parce que c'est une fonte qui est épurée qui est minimaliste et qui a été développé en fait finalement pour les les développeurs et designers alors faisait la remarque en le site que j'aV que j'avais développé dans dans le passé il était comme j'utilisais pas de fonte bah

0:34forcément sur Windows et sur Mac ça rendait pas la même chose ça utilisit la fonte par défaut du navigateur sur Mac ce n'est pas la même que sur un navigateur sur Windows et donc en fait on a finalement une différence de rendu entre différents systèmes d'exploitation et ça c'est quelque chose qui est qui est compliqué et qui en fait qu'il faut surtout pas faire donc c'est pour ça que est plutôt préférable d'utiliser une fonte et là franchement cette fonte là pour cette fonte quiiste elle est vraiment très très propre je pense que c'est un aspect souvent dé laissé quand boostra un sas parce que en fait c'est

0:58quelque chose qui peut changer de manière importante une interface notamment bah en fait en augmentant la visibilité hein tout simplement l' x aussi l'exutilateur et bien évidemment en fait si on améliore le X on amélore aussi la conversion derrière alors cette fonte pourquoi je vous la montre et ben tout simplement parce que déjà elle est gratu vous pouvez l'utiliser possède différentes profondeurs on aa le temps d'en parler en détail elle a une tonne de caractères 652 elle a des styles différents et aussi elle couvre à peu près autant de langage qu'on veut ça veut dire que si on a un site qui nécessite de d'internationalisation ça

1:28va pas être un problème pour avec cette fonte là de de pouvoir tout simplement avoir accès des caractères un peu spéciaux donc pourquoi je voulais faire cette vidéo c'est parce qu'en fait j'y connaissais rien au fond et j'ai creusé un peu le sujet et je j'ai découvert plein de trucs alors cette fonte elle est elle est disponible en deux deux parties en 100 et en mono ok alors ce qu'il faut savoir c'est que en fait 100 c'est l'abréviation de s seréif en fait çaà dire qu'il y a si je vais vous montrer là attendez on va regarder ici vous pouvez voir ok euh là si je suis en

1:58100 là si je suis en en mono ce qu'il faut retenir c'est que S c'est l'abréviation de s sériif ça veut dire qu'il y a pas d'empattement en fait au niveau des des pattes ici donc on n'est pas dans dans quelque chose qui va avoir comme dans le temps et cetera c'est pour ça qu'on a un aspect un peu plus moderne par contre au niveau des le mono c'est c'est l'abbréviation de monospace et en fait ce que ça veut dire c'est que chaque caractère il occupe exactement la même la même largeur et la même hauteur et cetera et ça donne du coup un aspect uniforme et c'est un aspect qui est très

2:23technique qu'on va retrouver notamment beaucoup dans le code et euh ou le contexte dans un éditeur de code par exemple ou un terminal où le contexte en fait et l'alignement il est absolument crucial et je vous expliquerai un peu pourquoi justement parce que nous on a donc vous avez C cette cette fonte elle vient en deux deux catégories soit le 100 soit le mono et c'est assez chouette parce que par exemple elle s'installe tout simplement avec NPM on pouvez la mettre en place très facilement avec Tywin et par exemple là jouis vous pouvez voir tu vois là tu peux voir que le W c'est la même hauteur que le H en

2:55fait c'est la même largeur et cetera c'est la même largeur je veux dire alors que en S on n pas du tout sur des largeurs similaires le i par exemple il est plus petit que le W alors si on switch en mono hop là on peut voir que c'est exactement la même taille donc c'est vraiment ça quand quand on voit 100 en fait faut penser à 100 séif donc on a pas les empattements au niveau des têtes truc et mono on est en mono space donc on va avoir exactement la même taille et ce qui va être très pratique du coup dans un éur de code et donc

3:19c'est pour ça en fait que par exemple nous dans on est en train de redésigner documentation à P là vous pouvez voir que par exemple bah en fait sur cette partie là j'utilisé plutôt la fonte monospace et ici par contre je suis sur une fonte qui va être la la 100 en fait tout simplement la 100éif donc on est en guist 100 et là en guist mono et ça vous permet d'avoir un contraste comme ça qui est assez clean et assez propre vous pouvez voir ici en fait qu'elle vient avec différentes épaisseurs donc on en a on a plus de neuf donc c'est pas du tout

3:40un souci quand on utilisen par exemple on va voir on va utiliser fon bold fonte ultra black fonte semibold en fait on va P ça on va pouvoir très facilement le customiser et on va pouvoir on a accès du coup à ici j' expliquerai pourquoi après ça c'est très intéressant pour les fond face et ça aussi au spacing donc c'est vraiment tout est comme vous pouvez le voir très très customisable on va donc télécharger cette fonte là simplement on va prendre le point zip OK et là on va donc se retrouver en fait avec différents formats ok alors ça va être l'occasion un peu de parler de tous

4:09les formats qui existent pour pas que vous soyez perdu parce que effectivement nous ce qui va nous intéresser je vous c'est tout ce que wof en fait il y a différents format qui existe dans le système des fontes vous avez un premier format qui est le format otf en fait c'est un format qui a été développé par Apple et Microsoft dans les années 80 donc il y a très longtemps le format otf il est simple il contient à peu près tes les informations nécessaires pour l'affichage et l'impression des polices c'est le tout premier format de police qui est sorti et il est très largement compatible du coup avec la plupart des

4:32systèmes d'exploitation et des logiciels et cetera donc en général quand on quand on c'est un format qu'on qu'on a installé très souvent c'éit les premiers format de fonte euh après il y a un nouveau format qui a été construit dans les années par Adobe et Microsoft dans les années 90 donc en fait c'est ils se sont rendus compte qu'ils avaient besoin de plus de fonctionnalités typographiqu par exemple comme les ligatures tout ce qui est les alternatives stylistique tout ce qui est petite capital et cetera et donc c'est quelque chose qui est aussi qui date de très longtemps donc c'est c'est très c'est très flexible ça a beaucoup de fonctionnalité le format

5:02TTF par rapport à l'otf et c'est surtout utilisé pour les polices de haute qualité qui sont destiné en fait finalement à l'édition professionnelle et tout ce qui est publication numérique et cetera c'est pour ça que voilà vous pouvez voir à l'intérieur qu'on a coup toutes les toutes les les les fondes pour chaque épaisseur en fait ok donc soit en otf en ou en TTF ce qui s'est passé c'est que on a forcément sur une les pages Web on a des problématiques de rapidité et ce qui se passe c'est que on veut du coup que les les fontes ell soient chargé très vite qu'ell soi chargé vite qu' soi optimis qu'on est et

5:31c'est pour ça qu'en fait il y a un format qui a été développé par la W3C et qui en collaboration notamment avec plein de créateurs et et cetera et surtout les navigateurs très important et c'est un format en fait qui est optimisé pour le web et qui comprend des métadonnées en fait qui utiliseent aussi une très forte compression pour réduire la taille des fichier et c'est pris en charge par quasiment tous les navigateurs c'est c'est vraiment un format qui a été fait pour le web et qui est principalement utilisé pour les polices du coup du web qui permett un chargement rapide des pages tout en conservant la qualité des polices ok

5:58vraiment dans une notion de de de de performance et on a un autre type de format donc c'est plutôt ces formats là nous qu'on va dans dans le sasin c'est pas c'est pas les formats TTF ou totf donc c'est pour ça que je faisz cet aparté c'est maintenant vous comprenez pourquoi c'est plutôt ces format wof qu'on va utiliser et il y a un autre format du coup qui est très important c'est le wof2 là que vous pouvez voir qui est tout simplement en fait aussi développé par le W3C en fait c'est ça se veut comme le successeur du format wof et ça offre une meilleure compression

6:23donc c'est un format amélioré hein ce qui réduit encore plus la taille des fichiers et ça améliore le temps de chargement en fait en dans les pages Web encore donc ça toujours dans cette logique de performance tout le temps et de fonctionnalité dans un minimum de de kilobit et bien évidemment c'est ce format là qu'on va plutôt utiliser le wof2 par pour ses performances et qui sont efficaces donc là en l'occurrence comme vous pouvez le voir vous avez toutes lespurs qui existent à la fois en wff et en wff2 alors maintenant vous allez me dire ouais mais c'est cool mais là en fait on se retrouve avec plein de

6:49fichiers et c'est là où où il y a un truc qui est intéressant qui arrive c'est que en fait face à ça euh on a un truc qui s'appelle les les variable font c'est les fonts de et donc les les fond de variable vous pouvez voir ici donc on a à la fois en TTF voyez donc c'est pareil hein on pouve voir que le TTF c'est un format plus puissant que le TF donc ça permet de faire ça et on a plus que une seule fonte ici avec et aussi pareil en wff et en wof2 et ça contient toutes les épaisseurs pourquoi ça a été construit les les les variable font

7:16c'est que c'est un format de police qui contient plusieurs variations d'un même style de caractère dans un seul fichier ok donc au lieu de nécessiter des fichiers de police séparés pour chaque version comme bol du trbol semibol et cetera euh tout ce qu'on va faire c'est qu'on va avoir une police variable qui va tout inclure dans un seul fichier et ça ça réduit quoi ça réduit à la fois le nombre de Requet TTP qui sont nécessaires pour charger les polices sur une page web mais ça permet aussi tout simplement une plus grande flexibilité des performance amélioré pour les développeurs et tout ce qui est qui font

7:39du du web et des tout ce qui est designer en fait les designers ils ont ils vont avoir plus de contrôle et je vais vous montrer après c'est assez intéressant il vont per pour ajuster les polices précisément selon bah en fait tous leurs besoins leur design et cetera sans être limité en fait au style prédéfini queune police impose so la largeur l'épaisseur des la largeur des lettres l'espacement entre les lettres et cetera et c'est là en fait où vous allez me dire B Julien comment est-ce qu'on fait pour en fait utiliser ces polices là sur le web alors c'est là qu'on utilise des des polices qui

8:03s'appelleent a fond face et c'est très simple en fait je vais vous montrer un truc regardez si on revient sur versel ici vous pouvez voir ici que vous avez différentes valeurs ok donc c'est la ça c'est la taille mais vous avez aussi le spacing et le spacing là on peut l'écarter ok donc on peut définir forcément un emplacement entre les lettres et cetera on peut changer la taille et Cera et en fait qu'est-ce qui se passe en fait pour installer ce ce type de fond c'est extrêmement simple tout ce que vous avez besoin de faire c'est de définir une une fond face simplement ok à fond face définir un

8:35pass donc à la fois pour wff2 et à la fois pour wff de manière à soit compatible sur T les navigateurs et ensuite ici vous pouvez voir vous avez différentes en fait vous allez pouvoir dire le font weight donc ça po de 100 à 900 ok ce qui qui correspond d'ailleurs simplement au nef tailles qu'on avait sur versell de ultra light à ultra bold ok le fond stretch donc ça supporte la largeur de 75 % à 125 % et le fond style par défaut en fait de la fonte et là en fait ce qui est assez intéressant c'est que bah forcément sur le body on va dire

9:02B maintenant tuutilises la font gaste donc là ça va vous prendre LA FONT g parce qu'il a le Pass ici he qui est qui est qui est bien mis et en fait vous allez pouvoir faire des variations ici fond de variation settings et à la fois aussi modifier la font size et vous allez pouvoir même regarder ici modifier l'espacement à 125 entre les lettres et donc pouvoir avoir C degré de de précision extrêmement puissant entre vos diff avec une simple avec une seule fonte en fait hein tout simplement donc voilà dans les grandes lignes pour tout ce que j'avais dire au niveau des fontes j'espère que j'ai été clair donc vous

9:34avez différents formats qui existent vous ce qui vous intéresse c'est wof 2 et et puis après derrière on peut customiser absolument tout ce qu'on veut et avoir finalement un site vous changez la fonte et sans rireen moi je trouve que tu changes la fonte et tuas tuas un rendu qui est quand même vraiment plus cool j'aimerais finir cette vidéo sur une petite anecdote en fait quand je me suis mis à faire cette vidéo je me suis souvenu de un passage du livre de la biographie Steve Jobs que j'avais eu y a très longtemps je me suis un passage alors j'avais creusé un peu parce que sa

9:59que Steve Jobs il avait beaucoup bossé dans la typographie lorsque Steve Jobs il a quitté le le rid College il a constiué en fait il a continué à assister en fait à des cours en tant que auditeur libre et l'un des cours les plus marquants pour lui ça a été un cours de calligraphie qui a été notamment enseigné par un gars qui s'appelait Robert Paladino c'est un ancien Mo trapiste apparemment et Jobs il a appris l'importance de la typographie et des espaces entre les lettres et des polices l'importance d'avoir une police qui est élégante pendant justement cette ce cours là en fait c'est ça qui vraiment qu' AA

10:26vraiment initié et il a mentionné en fait que ce cours a permis de comprendre l'importance de parce qu'il appelle la beauté l'art le design et ça a profondément influencé en fait sa vision et la création de de produit ça s'est vu en fait dans le premier Main toouch qu' sont sorti euh parce qu'en fait avant le main tochch les ordinateurs personnels ils avaient que des polices de caractères monos Spice donc c'està dire avec la même largeur c'était souvent des trucs très basiques non esthétiques et Jobs il voulait que le min toosch en fait il se distingue en ayant notamment une typographie qui soit belle variée et

10:51il a insisté beaucoup pour inclure des polices multiples et proportionnell permettant en fait aux utilateurs de choisir parmi une gamme de de styles typographique qui sont beaucoup plus large et en fait ça a été une fonctionnalité qui est ass assez révolutionnaire pour l'époque qui a eu beaucoup de succès et cette attention en fait à la typographie ça a contribué à rendre le Making toouch particulièrement attrayant pour tout ce qui était designer et les éditeurs en fait tous ceux qui écrivaient du texte et cetera j'espère pas avoir été trop long je vous souhaite une j'espère nésitez pas à vous abonner si ça vous a plu et je vous

11:19souhaite une agréable semaine à bientôt