Front-end, UX/UI

Personnaliser et animer soi-même la graisse d’une police ? C’est désormais possible avec les variables fonts !

Lorsque l’on télécharge une police (par exemple, la Roboto), on doit installer en même temps plusieurs fichiers (Light, Italic, Regular, Bold, etc.), soit une douzaine au total. Pour les Variables Fonts un seul fichier est requis, ce même fichier contient toutes les caractéristiques de la police.

Pour modifier la police, il suffit de manipuler le CSS : contrairement à une font classique, on peut ajouter des options qui ont chacune un rôle précis :
weight ; width ; optical size ; slant ; italic , etc. (Les options peuvent varier selon la variable font sélectionnée).

Dans l’exemple ci-dessous, nous avons illustré la Variable Font « AvenirNext».
Le but de cet exemple est de passer d’une font qui a une largeur de 1000 à 50 à l’aide d’un hover (et d’un delay de 1,5 secondes). Essayez de passer la souris sur le texte du CodePen ci-dessous !

See the Pen Variable fonts by Matthieu (@Matthieu87) on CodePen.

Cet exemple est valable pour la police AvenirNext, mais il existe également d’autres fonts avec d’autres caractéristiques, comme Decovar qui en possède plus de 15.

En plus de fonctionner sur des pages web avec du CSS, les variables fonts fonctionnent également sur des logiciels de créations graphiques comme ceux de la suite Adobe.

variable-font

Capture d’écran de photoshop avec les options d’une variable font. Source : webdesign.tutsplus.com

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

Bootstrap

Que peut-on attendre de Bootstrap 5.0 ?

Bootstrap est une framework d’interface mobile first open source largement utilisé dans la création de sites web. Il permet de créer des sites et applications web avec des mises en page dynamiques et réactives, adaptables aux différents supports plus aisément.
La version actuelle de la framework est 4.4.1, cependant, une prochaine version majeure est annoncée pour la fin du printemps 2020. On devrait donc avoir une version 5.0 pour bientôt.

Voir notre article sur : Bootstrap 4, un framework CSS innovant

Firefox Reality : un navigateur dédié à la AR/VR

Après avoir amélioré les performances de son navigateur phare, la société Mozilla a décidé
de s’imposer sur le marché de la réalité mixte en lançant son navigateur dédié : Firefox
Reality. Que propose-t- il ? Est-ce une révolution ? La réponse dans cet article !

Centre de préférences de confidentialité

Cookies Fonctionnels

gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

Advertising

Cookies Satistiques

_ga, _gat, _gid

Cookies externes

PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
CONSENT, 1P_JAR