58AL, Typographie

Cet article porte sur la création d’une fonte pour ma BD à l’aide d’Inkscape et FontForge.

Objectif

Je souhaitais obtenir une fonte presque manuscrite pour ma bande-dessinée; le but étant d’avoir quelque chose d’original et de plus personnel qu’une fonte déjà existante.

Méthode, dans les grandes lignes

Plusieurs étapes ont été nécessaires pour que j’obtienne quelque chose qui me plait.

1. dessiner les glyphes à la main,
2. retravailler les glyphes dans Inkscape avec les courbes de Bézier,
3. importer les glyphes dans FontForge,
4. ajuster les glyphes les uns avec les autres (chasse et crénage),
5. essayer la fonte avec toutes sortes de textes.

Lors des essais, je trouvais le texte obtenu sympathique, mais sans richesse stylistique. La typographie semblait linéaire, monotone, fade. Bref, j’étais déçue alors que cela m’avait pris toute une journée à faire des choses qui demandent pas mal de rigueur et qui sont répétitives. J’ai donc laissé le projet de côté quelques jours, puis j’y suis revenu. Entre temps, j’ai compris qu’une police de caractères nécessitait bien plus de temps pour sa réalisation. Après tout, plus de 150 caractères la compose.

J’ai donc utilisé ma fonte ratée pour écrire quelques paragraphes en pensant à inclure un maximum de caractères. Puis avec une tablette graphique, sur un calque vierge, j’ai passé un coup de plume virtuelle sur tous les caractères. Au final, je remarquais que selon les lettres suivantes et précédentes, les lettres prenaient des formes différentes. Un simple « a» pouvait avoir 3 ou 4 morphologies différentes. Je n’ai pas cherché une grande (même pas une moyenne) fidélité dans la reproduction de cette police manuscrite (autrement, autant tout écrire à la main). J’ai préféré prendre mes 2 «a» préférés et inclure le premier devant certaines lettres et le second dans les autres cas. J’ai aussi ajouté des ligatures pour certains couples de lettres («tt», «mm», «ll», «cr» et «ri» par exemples). Cela nuance grandement la fonte.

Rendu

Tape du texte dans la zone ci-dessous pour tester la fonte.
Taille du texte : Petit | Moyen | Grand.

N’est-ce pas rigolo ? Tu peux aussi t’amuser à taper deux fois sur la touche «:», puis sur un chiffre pour que l’ensemble se transforme en chiffre éthéré. Avec des codes similaires je pourrai faire apparaître d’autres choses comme des dessins. Dans les BD, on voit souvent des pictogrammes intégrés au sein même du texte. Je rajouterai peut-être par la suite des «::bombe», «::coeur», «::etoile» et j’en passe pour embellir mes bulles de BD. C’est une idée. Essaie un mot comme «tristesse» et tu verras qu’il comporte des «e» et des «s» différents.

Dans Inkscape et FontForge

Voici la partie technique qui permet de faire sa propre fonte avec Inkscape et FontForge. Je ne vais parler que de ce que j’ai fait, mais je pense que ça peut donner les bases pour en faire plus si besoin. Il faut savoir qu’il est possible de tout faire uniquement dans FontForge. Comme je connais bien Inkscape, j’ai préféré faire mes glyphes avec. Tu peux passer cette partie si tu ne comptes pas faire une fonte en allant directement ici. Aussi, il ne s’agit pas d’un guide étape par étape, mais plutôt de conseils pratiques et de techniques pour parvenir à faire certaines choses parfois compliquées. C’est parti !

Inkscape

Ce logiciel permet de faire du dessin vectoriel. Ce type de dessin ne compte pas sur des pixels, mais sur des calculs mathématiques. Cela permet d’agrandir infiniment une image sans perte de qualité et sans gain de poids (ce qui est super). Comme on doit pouvoir agrandir la taille d’une police de caractère et que l’on souhaite qu’elle reste légère à charger (surtout si elle est destinée à être affichée sur des sites Internet), le tracé vectoriel est idéal.

Une chose me parait vraiment importante à garder en tête : la chasse et le crénage futurs des glyphes. Comme cette étape est vraiment longue et fastidieuse, il convient de bien penser les glyphes dès le départ. Des groupes de glyphes ayant des caractéristiques communes à leur gauche et/ou à leur droite doivent se former. Cela permettra par la suite, dans FontForge, de gérer ces groupes plutôt qu’une multitude de glyphes individuels. Par exemple, le trait vertical à gauche des lettres B, D, E, F, H, K, L, M, N, P et R pourraient être exactement identique afin de former un groupe (ce que je n’ai absolument pas pensé à faire, mais en même temps, ce n’est pas évident pour une fonte semi-manuscrite). Le gain de temps peut être énorme en procédant ainsi.

Inkscape dispose de plusieurs outils pour faire des tracés vectoriels et celui qui permet la création de courbes de Bézier est certainement le plus efficace pour dessiner des glyphes. Moins le tracé d’un glyphe comporte de vertices, plus le glyphe sera facilement modifiable (si besoin) et plus le fichier de la fonte finale sera léger.

Spécifiquement pour la création typographique, Inkscape propose le canevas typographique.

On y accède à partir du menu «Fichier > Nouveau à partir d’un modèle…» On obtient alors un document carré avec 5 lignes :

• baseline : ligne où repose la lettre,
• xheight : hauteur de la lettre x,
• ascender : hauteur maximale d’une minuscule vers le haut (la patte d’un «b» par exemple),
• descender : hauteur maximale d’une minuscule vers le bas (la patte d’un «p» par exemple),
• caps : hauteur d’une majuscule

La position de ces lignes est modifiable si besoin. Pour ce faire, soit on bouge les lignes à la souris, soit on va dans «Extensions > Typographie > Paramétrer le canevas typographique…» Il est préférable de laisser tel quel si on ne sait pas vraiment ce que l’on veut.

D’autres utilitaires sont proposés par le logiciel, mais ils ne m’ont pas paru très utiles. Il vaut mieux faire le reste dans FontForge.

La suite est simple. On dessine les glyphes un à un entre et sur les lignes. On peut utiliser un calque par glyphe, mais ce n’est pas forcément utile. Je préfère tout faire sur le même calque pour voir la cohérence ou l’incohérence entre les glyphes déjà dessinés.

Enfin, Inkscape dispose d’un panneau «Inclinaison» (ctrl + maj + m). Il est très pratique pour incliner les glyphes et obtenir une version italique rapidement (même si l’italique ne se résume pas à simplement pencher les glyphes).

FontForge

Ce logiciel permet d’insérer tous les glyphes dans une table de caractères, de gérer la chasse, le crénage et bien plus et d’exporter la fonte dans de multiples formats. Certaines choses sont faciles à faire (ou facile à trouver dans la documentation), puis d’autres sont un peu plus compliquées. Je ne vais mentionner que les choses que j'ai utilisé et qui ne m’ont pas parues intuitives, voire plutôt compliquées : les lookups.

Il existe deux sortes de lookups : ceux qui servent à la substitution et ceux qui servent au positionnement. Partant de ça, voyons quelques cas pratiques. Attention : l’utilisation des lookups, surtout s’ils comportent des erreurs, peut amener à des plantages de FontForge quand on utilise la fenêtre de métriques (qui est très pratique pour voir ce que l’on fait). Il faut donc penser à enregistrer fréquemment le projet pour ne pas perdre une belle avancée.

Crénage des glyphes

Pour le crénage des glyphes, il faudra utiliser un lookup de positionnement. Pour ce faire, il faut aller au menu «Élément > Infos fonte», cliquer sur «Lookups» et aller dans le panneau «GPOS». De là, on crée un nouveau lookup de type «positionnement par paires (crénage)», avec la fonctionnalité «kern». Le nom du lookup se remplit alors automatiquement et comme il est plutôt clair, on peut le laisser tel quel. Comme tout lookup nécessite au moins une sous-table, on lui en ajoute une. Il sera demandé si on souhaite gérer les glyphes par classes ou par paires. C’est comme on veut, mais il est probablement préférable de le faire par classes (les groupes de glyphes dont je parlais plus haut), afin d’aller plus vite.

Transformer deux glyphes qui se suivent en un seul glyphe harmonieux (ligature)

Par exemple, dans ma fonte, deux « t» côte à côte font qu’une zone vide se forme dans le mot «cette». Comme cela m’a paru inesthétique, j’ai voulu faire un glyphe spécial qui comprend ces deux lettres en atténuant un peu le trou qu’elle formait.

Donc pour cela, voici ce que j’ai fait :

1. Créer le glyphe «tt.lig» à un emplacement vide («?» rouge) de la table de glyphes. S’il n’y a plus d’emplacement de libre : «Codage -> Ajouter des cases de codage…».
2. Ajouter un lookup de substitution (panneau «GSUB») et sa sous-table :
   • Lookup : Type = «Substitution de ligature», fonctionnalité = «rlig»
   • Sous-table : Nom du glyphe de ligature = «tt.lig», remplacement du nom de glyphe = «t t»

Afficher un glyphe à la place d’un autre si…

Par exemple, avant un «a», s’il y a un «v», je veux qu’il soit différent du «v» par défaut. Cela apporte de la diversité typographique et c’est plutôt bien pour une fonte semi-manuscrite.

Pour ce faire, il faut utiliser 2 lookups. Le premier contient une sous-table de correspondances («v» = «v.bis») et le second permet de définir la règle à appliquer. En détails :

1. Créer le glyphe «v.bis».
2. Ajouter 2 lookups et leur sous-table :
   • Lookup 1 : Type = «Substitution simple», nom = «bis», pas de fonctionnalité
   • Sous-table de 1 : Nom du glyphe de base = «v», remplacement du nom de glyphe = «v.bis»
   • Lookup 2 : Type = «Enchaînement de substitution contextuelles», fonctionnalité = «calt»
   • Sous-table de 2 : On ajoute la règle «| v @<bis> | a» qui signifie littéralement «avant le “a”, si on a un “v”, on utilise le lookup “bis”».

Et si on veut afficher un «e» différent du «e» par défaut après un «s», on écrit quelle règle ?

Tout simplement celle-ci : «s | e @<bis> |». En fait, il y a 3 sections maximum dans une règle (elles sont délimitées par «|»). Ainsi, on pourrait choisir d’afficher un «o» différent du «o» par défaut s’il se trouve entre un «s» et un «n» par exemple («s | o @<bis> | n»). Facile !

Faire d’autres choses

FontForge permet beaucoup d’autres manipulations du texte grâce aux lookups. On peut par exemple, complétement aléatoirement, afficher des «e» différents dans le texte. On peut aussi avoir des lettres spécialement destinées aux fins de lignes. Cependant, il se peut que le logiciel qui va utiliser la fonte (un navigateur Internet, Inkscape, un traitement de texte…) ne comprenne pas certaines fonctionnalités. Inkscape semble ne pas comprendre l’affichage aléatoire d’une même lettre. C’est pourquoi j’ai fait uniquement des enchainements contextuels.

Mots de la fin

J’ai une belle fonte et je vais pouvoir l’utiliser à volonté dans ma bande-dessinée. Elle peut encore contenir de nombreux problèmes de crénage (bien que j’ai fait pas mal de tests des lettres trop espacées ou trop collées entre-elles). Si tu en vois, n’hésites pas à me le faire savoir. Je la baptise AL58 (année-lumière 58, en référence à ma BD, puisqu’elle a été créée pour ça à la base). Elle est libre de droit et peut être téléchargée en cliquant ici.

Enfin, je recommande la lecture de «Design avec FontForge» qui m’a beaucoup aidé à comprendre comment structurer une typographie.