Polices Web

Vous aurez besoin de fontes Web toutes les fois que vous voudrez utiliser des polices personnalisées sur le Web. Et toutes les fois que vous voudrez fabriquer des polices Web, la taille des fichiers sera votre principal souci. Plus les fichiers sont petits, mieux c’est. Une police Web bien exécutée devrait faire en dessous de 20 Ko.

Survol du format

Je viens tout juste de souligner que la taille du fichier est l’enjeu le plus important. Le support du navigateur viendra en deuxième sur votre liste de priorités, car certains navigateurs sont incapables de gérer certains formats de fichiers de fontes Web. Glyphs peut produire quatre sortes de polices Web: EOT, WOFF, WOFF2, ainsi que les polices OpenType standard (TTF/OTF). Voici un sommaire:

• EOT: Embedded OpenType. C’est-à-dire, OpenType intégré. Seulement pour Internet Explorer; nécessaire pour les versions 6-8 (la part actuelle de marché est moins de 0,19%), les versions 9 et plus récentes supportent WOFF. Pour plus d’informations à propos du support EOT.
• WOFF: Web Open Font Format. Le format le plus répandu; Chrome 5, Firefox 3.6, IE9, Edge, Safari 5.1, Opera 11.1, Android WebKit 4.4, ainsi que toutes leurs versions plus récentes. Pour plus d’informations à propos du support WOFF.
• WOFF2: Web Open Font Format 2. Meilleure compression, mais le support des navigateurs est encore limité; Chrome 36, Firefox 39, Safari 10 (macOS 10.13 High Sierra et iOS 11 et plus récent), Edge 14, Android Webkit 67, et Opera 23; n’est pas supporté par IE, Opera Mini, Android UC et BlackBerry. Pour plus d’informations à propos du support WOFF2.
• OpenType standard: OTF et TTF. Le format dit fallback des anciennes versions de navigateurs qui ne supportent pas WOFF: Chrome 4 (0%), Safari 3.2–5.0 (macOS et iOS, environ 0,02%), Opera 10.1–11.0 (0%), Android WebKit 2.2–4.3 (0,28%). Plus d’informations à propos du support TTF.

Vous pouvez ignorer les formats EOT et OpenType standard. Il est certain que cela ne ferait pas de mal de les implémenter, mais bon. Au moment d’écrire ces lignes, il était estimé qu’un maigre demi-pour cent de navigation Web est faite avec des navigateurs qui nécessitent ces formats. Probablement encore beaucoup moins au moment où vous lirez ces lignes.

En conclusion, concentrez-vous sur WOFF et WOFF2. Maintenant, lisez ce qui suit.

Exporter les polices Web

Évidemment, pour exporter les polices que vous avez définies dans Fichier > Informations de police… > Instances, il vous suffit d’aller à Fichier> Exporter (Cmd-E) et de sélectionner l’option fontes Web en haut à droite. Vous verrez ensuite ce dialogue:

En bref, vous devez prendre ces trois décisions:

1. OpenType/CFF vs TrueType: les boutons circulaires déterminent le format d’exportation des contours des polices WOFF et WOFF2; EOT est toujours importé en TrueType. Les polices basées sur le TrueType utilisent des composantes qui permettent de maintenir une petite taille de fichier; les polices basées sur le PostScript utilisent une technologie dite de sous routines. Les contours complexes ne peuvent contenir de sous routines. Windows a des problèmes de performance avec les contours PS complexes, et vous verrez parfois une différence dans le rendu à l’écran, en particulier avec le hinting (plus de précisions au point suivant). Le mieux est de tester WOFF et WOFF2 dans les deux formats afin de comparer la taille des fichiers et la qualité de l’affichage à l’écran, puis de faire un choix.

2. Hinting automatique: lorsqu’il est activé, ttfAutohint sera utilisé pour les WOFF/WOFF2 basés sur EOT et TT, et l’algorithme de hinting automatique d’Adobe sera appliqué sur les WOFF/WOFF2 basés sur CFF, respectivement. Les polices complexes sont incompatibles avec les hints.

3. WOFF, WOFF2, EOT: les formats d’exportation des fichiers, tels que discutés précédemment. La variante standard n’est pas offerte ici. Vous pouvez aller dans la section OTF, en la sélectionnant en haut, ou bien utiliser un paramètre personnalisé pour outrepasser les options de l’interface utilisateur graphique (GUI). Ou plus simplement, vous pouvez ne pas vous en soucier, puisque de toute façon ce n’est pas un format utile pour le Web.

Au fait, la quatrième décision; la Destination de l’exportation est la même que dans la fenêtre de dialogue habituelle OTF. Vous pouvez prérégler un dossier, ce qui vous évitera le dialogue supplémentaire, qui autrement, viendra ensuite. Cela peut considérablement accélérer votre processus d’exportation, en particulier si vous vous retrouvez à réexporter de nombreuses fois dans le but de soustraire un énième kilobit de vos WOFF.

Paramètres personnalisés

Vous pouvez utiliser les paramètres qui suivent dans Fichier > Informations de police… > Instances, ou encore dans un fichier .glyphsproject.

• Webfont Formats: ce paramètre vous permet de spécifier les formats qui seront exportés de l’instance en question. Vous devez l’utiliser si vous délocalisez votre production de polices Web dans un dossier .glyphsproject. Assurez-vous de toujours sélectionner WOFF et WOFF2, à moins de vraiment savoir ce que vous faites. Peut-être voudrez-vous aussi ajouter le bon vieux EOT et les fichiers TTF standards.
• Webfont Only: bricolera les tables de la police de telle sorte qu’il sera difficile à un utilisateur mal intentionné d’obtenir les fichiers OTF ou TTF par ingénierie inverse de la police Web. Nous ne recommandons toutefois pas de faire cela et d’utiliser ce paramètre uniquement si votre client insiste pour obtenir cette mesure de sécurité supplémentaire.
• Save as TrueType: force l’option TrueType du dialogue d’exportation.
• Autohint: force l’option Hinting automatique du dialogue d’exportation.

Ce n’est pas tout, plus de paramètres personnalisés sont disponibles pour satisfaire le geek de police Web en vous. Poursuivez votre lecture.

Sous-ensembles

L’utilisation de sous-ensembles réfère au retrait de glyphes (superflus) de la police, ce qui réduit un peu la taille du fichier. Il existe deux façons de faire des sous-ensembles avec Glyphs: soit vous spécifiez quels glyphes vous souhaitez garder, soit vous indiquez les glyphes à exclure. Dans les deux cas, les sous-ensembles sont créés avec un paramètre personnalisé sous Fichier > Informations de police… > Police, ou dans un fichier .glyphsproject:

• Remove Glyphs: vous fournissez une liste de noms de glyphes afin de spécifier quels glyphes ne feront pas partie de la fonte Web exportée. Il vous suffit de taper tous les noms de glyphes, chacun sur une une nouvelle ligne.
• Keep Glyphs: comme ci-dessus, mais cette fois vous spécifiez quels glyphes vous voulez exporter. Tous les autres glyphes de la police qui ne seront pas mentionnés dans ce paramètre ne seront pas exportés.

Dans les deux cas, vous pouvez accélérer les choses en utilisant la commande Copier les noms de glyphes > Un par ligne du menu contextuel de l’onglet Police (Cmd-Opt-1). Collez ensuite le contenu de votre presse-papiers dans le champ valeur du paramètre. Les seuls glyphes que vous ne pouvez retirer sont .notdef et space.

L’astérisque (*) peut être utilisé comme une carte joker, au début et à la fin d’un mot. Ce qui veut dire que vous pourriez, par exemple, écrire ord* au lieu d’épeler ordfeminine et ordmasculine, ou *.ss05 pour tous les glyphes du jeu stylistique 5, ou même encore *.ss* pour tous les jeux stylistiques.

Encore mieux, des cartes jokers-clés sont disponibles. Ils vous permettent d’ajouter des catégories complètes, des sous-catégories, et même des scripts, à la liste de glyphes à exclure (ou conserver). Un joker-clé consiste en une clé d’information de glyphe (à noter: sensible à la casse) (script, unicode, category and subCategory), suivi d’un signe égal, qui à son tour est suivi d’une valeur appropriée pour la clé. Supposons que vous vouliez vous débarrasser de toutes les lettres grecques, tous les bas de casse et tous les chiffres, vous ajouteriez ces lignes au paramètre Remove Glyphs:

script=cyrillic
subCategory=Lowercase
category=Number

Vous pouvez aussi combiner le joker-clé avec un astérisque. Par exemple, afin de supprimer tous les glyphes avec des valeurs Unicode comprises entre U+0300 et U+04FF, vous ajouteriez ceci:

unicode=03*
unicode=04*

Okay, maintenant que nous avons les outils pour faire des sous-ensembles, qu’allons-nous faire disparaître? Voici quelques suggestions:

• Petites capitales: *.sc
• Variantes de chiffres: *.tf *.tosf *.osf *.lf
• Jeux stylistiques: *.ss*
• Variantes de caractères: *.cv*
• Ornements: *.ornm
• Très rares, obsolètes, lettres non-utilisées ou impossibles à taper: AEacute aeacute Aringacute aringacute IJ ij napostrophe Oslashacute oslashacute
• Localisations et compatibilité des glyphes: Tcedilla tcedilla Ldot ldot
• Symboles rares: lozenge paragraph currency florin logicalnot infinity integral product summation radical micro partialdiff perthousand registered trademark bar brokenbar dagger daggerdbl estimated apple
• Lettres pour les langues inutiles sur le site Web pour lequel la police est destinée. P. ex., sur cette page consacrée à la littérature néérlandaise, vous n’aurez sans doute pas besoin de ces glyphes supplémentaires utilisés seulement en espéranto, Ccircumflex ccircumflex Hcircumflex hcircumflex Jcircumflex jcircumflex.
• Lettres de scripts dont vous n’avez pas besoin pour l’objectif de la police. Une page Web bulgare? Il vous faudra le cyrillique, peut-être un peu de latin, mais probablement pas les portions grecques de votre police, alors inscrivez: script=greek.

Autre chose? Bien sûr, mais vos résultats peuvent varier. C’est pourquoi, après l’exportation, vaut mieux toujours examiner le jeu de caractères afin de tenter de repérer un autre glyphe dont vous pourriez vous débarrasser. Pour faire cela, c’est une bonne idée d’exporter et tester fréquemment. Vous pouvez rapidement ouvrir votre police dans des applis comme OTMaster ou FontTableViewer, ou bien sur des pages test comme Wakamai Fondue ou FontDrop; voyez plus bas pour plus d’informations. Un glyphe inutile s’est-il quand même faufilé jusqu’ici? Cela ne passera pas inaperçu.

Astuce de pro: si vous devez exporter fréquemment, exportez alors sous format OTF standard sans supprimer les chevauchements et sans hinting. Ce sera beaucoup plus rapide. Une fois que vous aurez le parfait jeu de caractères, vous pourrez recommencer à exporter des WOFF bien comme il faut qui seront prêts pour la production.

Fonctions et sous-ensembles

Si vous avez déjà fait vos sous-ensembles, et qu’à l’exportation vous vous retrouvez avec un tel message d’erreur:

Le dialogue rapporte une erreur MakeOTF dans le code de la fonction. Il s’agit habituellement d’une ‘erreur de syntaxe’, puis le nom du glyphe est ensuite mentionné (brevecomb dans cet exemple), et ensuite l’endroit exact: quelle ligne dans le fichier features.fea du dossier Temp de la police (ligne 74 dans cet exemple), et quelle ligne de la fonction (ligne 2 dans ccmp dans ce cas). Ce qui a sans aucun doute causé l’erreur est un nom de glyphe qui apparaît dans votre code de fonction qui dirige à un glyphe qui a été supprimé du sous-ensemble. En d’autres mots, le code de fonction sous Fichier > Informations de police… > Fonctions n’est pas synchronisé avec la structure de glyphe dans l’instance créée par le sous-ensemble.

Si la fonction en question est une fonction automatique, cela n’aurait pas dû arriver. Mais cela peut se produire si vous avez quelque chose de complexe qui se passe avec les paramètres personnalisés. Dans ce cas, vous pourriez avoir besoin de forcer la mise à jour automatique, tout simplement en ajoutant ce paramètre personnalisé à votre instance, et, bien sûr, en cochant la case qui permet de l’activer:

• Update Features: force à rafraîchir tout le code automatique de fonction OpenType (incluant les classes et préfixes) lorsque cette fonction est activée.

Cependant, si vous avez du code de fonction manuelle qui ne soit pas automatisé, je vous suggère de considérer l’un de ces paramètres:

• Remove Prefixes: supprime une liste de noms de préfixes durant l’exportation.
• Remove Classes: supprime une liste de noms de classes OT (sans le signe arobase placé en avant) durant l’exportation.
• Remove Features: supprime les fonctions respectives d’une liste de noms de badges OT de quatre lettres durant l’exportation.
• Replace Prefixes: fournit le nom de préfixe tel qu’il apparaît dans la barre latérale, suivi d’un point virgule, suivi d’un nouveau code qui est inséré à l’exportation et non pas dans le code d’origine.
• Replace Classes: fournit le nom d’une classe OT (sans le signe qui précède), suivi d’un point virgule, suivi d’un nouveau code qui est inséré à l’exportation et non pas dans le code d’origine.
• Replace Features: fournit le nom de badge de quatre lettres d’une fonction, suivi d’un point virgule, suivi d’un nouveau code qui est inséré à l’exportation et non pas dans le code d’origine.

Réduire encore davantage les fichiers

L’expérience a montré que les réductions les plus significatives ont été obtenues avec des sous-ensembles, mais qu’il y a d’autres façons d’extraire un kilobit ou deux de vos WOFF. Pour découvrir ce qui cause le plus de gain de taille dans votre fonte web, vérifiez la taille des tables du WOFF en question. Pour cela, la meilleure façon est de télécharger et installer fonttools, et de faire la liste de toutes les tables de la police en exécutant ttx -l fontname.woff dans le Terminal. Ou mieux encore, tapez ttx -l suivi d’une espace, et faites ensuite glisser votre WOFF sur la fenêtre du Terminal, ce qui insère le chemin d’accès au fichier, et appuyez ensuite sur Retour. Si tout s’est bien passé, vous obtiendrez une liste de tables semblable à ceci:

    tag     checksum    length    offset
    ----  ----------  --------  --------
    CFF   0x9C30A665     29398      2992
    GDEF  0x3C093D1F       189     32392
    GPOS  0x15445ACD     13356     32584
    GSUB  0x42EA82BB      1429     45940
    OS/2  0x68B4820A        78      1372
    cmap  0x8F4E4BFE      1042      1928
    head  0x12AB135E        52       292
    hhea  0x066A05BF        32      1340
    hmtx  0x1BC61668       994       344
    maxp  0x02435000         6       284
    name  0x76A3CF96       475      1452
    post  0xFFB80032        19      2972

Regardez la colonne length: vous pouvez constater que la table CFF (Compact Font Format, avec des contours PostScript) occupe le plus d’espace, suivi de près par GPOS (positionnement de glyphe). CFF, cmap et hmtx sont directement influencés par le nombre de glyphes dans la police, alors que GDEF, GPOS et GSUB sont affectés par les nombreuses fonctions OT (y compris le crénage) dans votre police. CFF est aussi là où l’information de hinting PostScript est stockée.

Jetons un coup d’œil à une police Web typique basée sur le TT:

    tag     checksum    length    offset
    ----  ----------  --------  --------
    DSIG  0x00000001         8     14124
    GDEF  0x01C701B8        28       384
    GSUB  0x4C1A4D0D       492       412
    OS/2  0x697CB056        76       904
    cmap  0xEFD48A4D       628       980
    cvt   0x0CE0037F        40     12208
    fpgm  0x9E3611CA      1729     12248
    gasp  0x00000010         8     12200
    glyf  0xE8E7B58E      8718      1608
    head  0x112593E0        53     10328
    hhea  0x088C054F        32     10384
    hmtx  0xDBC80FBB       336     10416
    loca  0x668F76DC       216     10752
    maxp  0x033E0F25        32     10968
    name  0x6F5D0BBB       348     11000
    post  0x55CEA4FD       852     11348
    prep  0x6846C89C       143     13980

Dans les polices TrueType, l’information de contour est stockée dans la table glyf, typiquement la plus grande table de la fonte. L’information de hinting TT est répartie dans prep, gasp, cvt et fpgm.

Selon où vous comptez le plus de bits, vous pouvez prendre une décision éclairée sur les moyens de réduction de fichier que vous voulez prendre ensuite. Voici quelques suggestions.

Réduire le hinting:

Exportez-vous des polices Web basées sur TT en utilisant l’option hinting automatique? Ajoutez à votre instance un paramètre TTFAutohint options et peaufinez ensuite où c’est possible:

• Limitez votre hinting: ttfAutohint peut être appliqué à une certaine taille de PPC, que vous limiterez autant que possible. Ne l’utilisez que pour les tailles pour lesquelles cela fait une réelle différence. Donc, maintenez votre Limite de hinting basse, c’est-à-dire en dessous de 50, et utilisez un petit Champ de hint qui couvre seulement les tailles de PPC les plus importantes, p. ex. 12 à 32.
• Évitez les extras tels les Composés de hint, Ajuster les sous-glyphes, Infos détaillées et table ttfa.* Ils ne sont habituellement pas nécessaires et peuvent occuper pas mal d’espace.
• Activez Pas d’infos de hinting automatique. Cela n’est pas grand chose, mais tout ce qui peut aider vaut la peine.

Si vous exportez des fontes Web basées sur CFF, peut-être devriez-vous appliquer du hinting seulement aux glyphes dont vous avez le plus besoin. Considérez un paramètre personnalisé nommé Disable autohinting for glyphs et fournissez une liste de noms de glyphes à exclure du hinting.

Si votre police est destinée seulement ou surtout pour les appareils Apple: considérez la suppression complète du hinting ou encore de fournir une version sans hinting de votre police livrée spécifiquement aux systèmes Apple. À condition que votre administrateur Web sache faire cela, bien entendu.

Réduire le crénage:

Beaucoup de crénage disparaîtra de votre fichier en même temps que des glyphes qui en comportent seront supprimés. Mais le crénage qui reste affecte quand même la taille du fichier.

Débarrassez-vous des plus petites paires de crénages. Tout ce qui va jusqu’à une certaine valeur limite peut disparaître. Dépendamment de votre design, cela peut être 5 ou 10 unités, par exemple. Dans les scripts de mekkablue, Metrics > Delete Small Kerning Pairs vous aidera à accomplir cette tâche.

À noter: souvenez-vous de faire cela seulement sur une copie de votre police.

Attacher les marques:

Envisagez un paramètre Remove Glyphs pour supprimer les accents combinés—bien entendu seulement si votre police utilise des scripts qui ne dépendent pas d’eux, p. ex., le latin, grec ou cyrillique. L’absence d’accents combinés empêchera Glyphs de construire les fonctions marque (Mark Attachment) et mkmk (Mark-to-Mark Attachment) ce qui réduira la taille de votre table GPOS. Vous pouvez faire cela en supprimant tous les glyphes *comb.

Méfiez-vous cependant, car cela pourrait se révéler contre-productif: les fichiers basés sur le TT pourraient devenir plus lourds, car ils ne pourront plus recourir aux composantes pour faire les accents combinés. Donc, testez, comparez et vérifiez toujours. Si la taille du fichier augmente, au lieu de supprimer les accents combinés, envisagez un paramètre Remove Features avec:

mark
mkmk

Les polices basées sur le CFF devraient toujours être réduites lorsque vous vous débarrassez des marques combinées, car elles n’utilisent jamais de composante.

Compresser davantage:

Pour les polices WOFF et WOFF2 basées sur CFF, vous pouvez aussi essayer de désactiver les sous-routines. Dans certains cas, la compression utilisée par WOFF et WOFF2 fonctionne alors mieux. Cela vaut la peine de l’essayer, ajoutez donc le paramètre Disable Subroutines à votre instance, cochez sa boîte pour l’activer, exportez ensuite la police puis vérifiez la taille du fichier.

Tester

Selon Miguel Sousa d’Adobe, une police qui n’est pas testée est une police brisée, et il a raison. Mais comment tester une police Web? Dans les navigateurs, bien sûr: Safari, Chrome et Firefox sur le Mac, et dans Chrome, Edge, et Firefox sur Windows. Et comment fait-on pour ‘tester dans les navigateurs’? En fait, différentes manières sont possibles.

Pour commencer, tout de suite après l’exportation, vous pouvez faire Script > mekkablue-scripts > Test > Webfont Test HTML des scripts de mekkablue. Un fichier HTML sera créé pour le fichier de police courant (.glyphs ou .glyphsproject) à l’intérieur du dernier dossier dans lequel vous avez exporté une fonte Web. Le fichier va même être immédiatement ouvert pour vous. Ouvrez le fichier HTML avec un navigateur de votre choix, activez les fonctions OT, tapez votre texte de test, et voyez votre police affichée dans différents corps. Le script fournit aussi des modèles de code CSS.

Vous pouvez aussi faire glisser vos WOFF dans le fantastique FontDrop développé par Viktor et Clemens Nübel pour Monotype. Faites-y glisser votre WOFF et obtenez une vue d’ensemble de toute votre police. C’est vraiment très bien pour tester vos informations de police, le hinting (avec cascades) et le jeu de caractères. Waouh, il fournit même des indicateurs d’espacement!

Vous pourriez aussi vouloir utiliser la géniale page test de Roel Nieskens, Wakamai Fondue. Elle est incroyable pour tester les fonctions OpenType. Elle fournit même des modèles de code HTML et CSS que vous pourrez vous amuser à copier-coller.

Mise à jour 2019-07-30: correction d’erreurs typographiques. (Merci Nathalie.)

Traduction française de Nathalie Dumont.