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 :

BEM, une méthodologie pour mieux structurer son DOM

Comment rendre son code moins indigeste et plus efficace ?
C’est une réalité à laquelle nous sommes souvent confrontés. Heureusement, des solutions ont été trouvées pour faciliter le travail collaboratif.
Aujourd’hui nous allons parler méthodologie et cela à l’aide de la convention de nommage Blocks Elements Modifiers (BEM), qui vous aidera à mieux organiser et structurer votre CSS.

Capacitor : utilisez des plugins natifs dans vos applications Ionic

Au premier coup d’œil, on pourrait croire à une réponse d’Ionic à React Native, mais cette fois-ci, le framework dédié aux applications mobiles a préféré se tourner vers les PWA. Découvrez cette semaine Capacitor : le nouvel outil open source d’Ionic qui vous propose de créer des NPWA (des PWA en natif).

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