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 :

Kendo, une bibliothèque javascript de composants UI

Kendo UI : une bibliothèque javascript de composants UI

Aujourd’hui on va vous parler de Kendo Ui, une bibliothèque Javascript distribuée par la société Télérik.
Si vous ne le savez pas, le kendo est un art martial japonais moderne s’apparentant à de l’escrime, et c’est justement sur cette représentation que s’appuie l’outil dont nous allons vous parler. Non, nous n’allons pas vous parler de sport de compétition, mais bien d’un outil pour vous faire gagner du temps lorsque vous développez une application Web.

Context API : la nouveauté de React 16.3 qui affole la toile

Comme vous le savez sûrement, la version 16.3 de React est sortie aux alentours du mois de mars. Dans cet article, nous allons vous parler d’une nouveauté qui fait beaucoup parler d’elle au sein de la communauté React : l’API Context.

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