Les avantages d’une police de haute qualité

• Les fonctionnalités cachées des polices : axes variables, glyphes alternatifs, substitutions stylistiques, swashes, chiffres, petites capitales, substitutions contextuelles

Axes variables

• Les polices OpenType peuvent avoir un ou plusieurs axes, et modifier la valeur d’un axe permet de changer l’apparence de la police
• L’axe le plus courant est wght, qui ajuste l’épaisseur de la police
• Parmi les autres axes courants, on trouve wdth (largeur), slnt (inclinaison), ital (italique) et opsz (taille optique)
• Les axes peuvent être manipulés à l’aide de propriétés CSS
• La propriété font-variation-settings peut poser des problèmes d’héritage ; il vaut donc mieux utiliser des propriétés CSS spécifiques lorsque c’est possible

Glyphes alternatifs

• Une police peut inclure des glyphes alternatifs pour certains caractères
• Les glyphes alternatifs couvrent différents styles, notamment les chiffres, les swashes et les ligatures

Substitutions stylistiques

• Les substitutions stylistiques permettent d’activer des formes alternatives pour certains caractères
• salt active les substitutions stylistiques pour tous les caractères
• Les jeux stylistiques comme ss01, ss02, etc. remplacent des ensembles de caractères spécifiques
• Les variantes de caractères comme cv01, cv02, etc. remplacent un caractère unique
• Les propriétés CSS font-feature-settings et font-variant-alternates permettent d’activer les glyphes alternatifs

Swashes

• Certaines polices incluent des swashes qui peuvent servir à donner un peu plus de personnalité à un titre
• Les swashes sont des éléments décoratifs qui peuvent apporter du caractère aux titres
• Les swashes peuvent être activés avec font-feature-settings et font-variant-alternates

Chiffres

• Une police peut inclure différents jeux de glyphes numériques
• Les chiffres peuvent être lining ou old-style, tabulaires ou proportionnels
• Les chiffres tabulaires ont tous la même largeur, tandis que les chiffres proportionnels ont des largeurs variables
• Les chiffres lining ont la même hauteur que les majuscules, tandis que les chiffres old-style ont la même hauteur que les minuscules
• La propriété font-variant-numeric permet de définir le style de chiffres souhaité

Petites capitales

• Les petites capitales sont une variante majuscule qui remplace les minuscules
• La propriété font-variant-caps permet d’activer les petites capitales
• Si la police ne contient pas de petites capitales, le navigateur peut les synthétiser

Substitutions contextuelles

• Les substitutions contextuelles remplacent automatiquement des glyphes en fonction des caractères qui les entourent
• Par exemple, elles peuvent remplacer -> par une flèche, ou ajuster la position de @ lorsqu’il se trouve entre des majuscules
• Les substitutions contextuelles sont activées par défaut, et peuvent être désactivées avec la propriété font-variant-ligatures

Le résumé de GN⁺

• Les polices de haute qualité offrent de nombreuses fonctionnalités, et les exploiter peut nettement améliorer la qualité de la typographie
• Les axes variables et les glyphes alternatifs des polices OpenType sont particulièrement utiles
• Des fonctions comme les substitutions contextuelles sont pratiques à la fois pour les développeurs et pour les utilisateurs

[halfenif]

Je me demande pourquoi il est si difficile de prendre correctement en charge les fonctionnalités des polices.

C’est un problème qui accompagne toute l’histoire de l’humanité… alors, combien de choses y a-t-il à faire !

[seunggi]

Le rendu des polices est difficile

https://faultlore.com/blah/text-hates-you/

[wedding]

Je n’arrive vraiment pas à m’habituer aux ligatures...

[GN⁺]

Commentaire Hacker News

• Utile lorsque des chiffres doivent être alignés sur plusieurs lignes
• Utile aussi pour des horloges ou des comptes à rebours
• Il est très agaçant de voir l’heure sauter à l’écran
• Si vous voulez inspecter un fichier de police, Wakamai Fondue est recommandé
• Les chiffres tabulaires sont une fonctionnalité très utile
• Google Fonts supprime presque toutes les fonctionnalités OpenType avancées pour réduire la taille des fichiers
  • Exemple : la version Google de la police Inter offre 11 fonctionnalités, tandis que la version complète en propose 44
• La police de la page est magnifique
• L’usage des petites capitales est élégant, on aimerait en voir sur davantage de sites web
• Vérification de la sortie de Berkeley Mono v2 : pas encore disponible
• Le comportement de l’axe wght (poids) est étrange : en dessous de 400, le texte s’affine et se comprime, mais au-dessus de 400, il ne fait que s’épaissir
• Pour utiliser une autre police dans VSCode afin de prendre en charge les commentaires, les jsdocs et d’autres éléments de coloration syntaxique, il faut utiliser l’extension vscode-custom-css
  • Exemple :

    .mtki {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment:not(.punctuation) {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    

  • La gestion des polices dans VSCode est assez boguée, il faut beaucoup expérimenter
• On se demande pourquoi il est si difficile de bien prendre en charge les fonctionnalités des polices
• Si la typographie vous intéresse, Butterick's Practical Typography est recommandé
  • C’est rempli de conseils pratiques pour rendre beaux les documents imprimés et numériques
  • Sa licence de police est très généreuse, sans limite sur le nombre de pages vues
  • Ses polices ne sont pas open source, mais elles sont magnifiques
  • J’ai acheté les polices Valkyrie et Concourse, et Concourse est très souple en matière d’alternatives contextuelles