Créer une police à partir de son écriture manuscrite

 (kokorobot.ca)
3 points par GN⁺ 2023-11-28 | 1 commentaires | Partager sur WhatsApp
  • Comme le texte manuscrit de la BD hakum variait en taille et en lisibilité d’une page à l’autre, l’autrice a décidé de créer une police TTF à partir de sa propre écriture plutôt que d’utiliser une police existante
  • Le deuxième essai, réalisé à partir d’une écriture sur papier numérisée, paraissait plus naturel et organique que l’écriture numérique faite sur tablette graphique
  • Le périmètre du projet a été limité à A-Z, a-z, aux chiffres 0-9 et à la ponctuation de base, tandis que les fonctions étendues comme le gras, l’italique ou les ligatures ont été exclues de l’objectif
  • Le processus consiste à nettoyer les images numérisées dans Gimp, les découper en PNG, puis ajuster dans FontForge les contours des glyphes, les marges gauche/droite et le kerning
  • Lors de l’autotrace et de l’export, des problèmes de validation comme missing points at extrema ou self intersecting peuvent apparaître, ce qui fait qu’une police manuscrite demande beaucoup de post-traitement

Pourquoi transformer son écriture en police

  • Le texte de la BD hakum était auparavant écrit directement en numérique avec une tablette graphique
  • Le résultat était correct, mais même sur une seule page, la taille des lettres variait souvent, ce qui nuisait parfois à la lisibilité
  • Comme l’autrice ne voulait pas utiliser une police existante, elle a décidé d’en créer une à partir de sa propre écriture
  • L’objectif était une police TTF pour une publication web, avec un jeu de caractères limité
    • pas de version grasse ni italique
    • c’était une première expérience de création de police et d’utilisation de FontForge, donc il existe peut-être de meilleures méthodes

Deux tentatives et le vocabulaire de base de la typographie

  • La première police a été créée à partir d’une écriture manuscrite numérique réalisée sur tablette graphique
  • La deuxième police a été créée à partir d’images numérisées d’une écriture sur papier, et l’écriture sur papier, moins précise, paraissait plus organique et naturelle
  • En créant la police, l’autrice a appris le vocabulaire lié à la structure des caractères, et comprendre le rôle de chaque élément aide à faire de meilleurs choix de design et à produire une police plus fonctionnelle
    • Ascender : partie d’une minuscule qui dépasse au-dessus de la x-height
    • Baseline : ligne de base sur laquelle reposent la plupart des lettres et sous laquelle descendent les descendantes
    • Cap Height : ligne indiquant la hauteur de la plupart des majuscules
    • Descender : partie qui descend sous la baseline, comme pour p ou q
    • X-Height : distance entre la baseline et la mean line des minuscules

Images numérisées et nettoyage dans Gimp

  • Les caractères à produire étaient les majuscules A-Z, les minuscules a-z, les chiffres 0-9 et la ponctuation de base comme la virgule, le point d’exclamation ou le point d’interrogation
  • Au départ, l’autrice a tracé au crayon dans un carnet les lignes de référence pour la baseline, la cap height, la x-height et les descendantes, puis a dessiné les lettres
  • Comme le fait de dessiner entre des lignes guides rendait le résultat trop rigide, elle a ensuite écrit plusieurs fois la phrase "The quick brown dog jumps over the lazy fox" en majuscules et en minuscules
    • cette phrase contient toutes les lettres nécessaires de a à z
    • le fait d’écrire une phrase donnait de meilleures formes, car l’attention n’était pas trop focalisée sur chaque lettre
    • sur une grille, l’attention se portait surtout sur les contraintes
  • La meilleure phrase a été sélectionnée pour la création de la police, avec quelques lettres réutilisées depuis les versions tracées sur grille
  • À cause de cette méthode, il a ensuite fallu réaligner numériquement la cap-height, la x-height et les descendantes de chaque caractère
  • Les images numérisées des lettres ont été nettoyées dans Gimp via Color > Threshold pour supprimer les gris
  • À cause des caractéristiques du crayon, du papier et de l’absence de grille, certains défauts des lettres ont été corrigés avec l’outil crayon de Gimp
    • dans Tool Options, toutes les dynamiques ont été désactivées pour obtenir des traits nets
  • Les lettres nettoyées ont été copiées dans un nouveau document Gimp, dont la taille était prévue pour accueillir la plus grande et la plus large, le M majuscule
  • À cette étape, l’autrice vérifiait aussi que l’épaisseur des traits ne variait pas trop
  • Toutes les lettres ont ensuite été exportées individuellement en PNG dans le dossier du projet

Création des glyphes dans FontForge

  • FontForge a été choisi parce qu’il fonctionne sous Linux et qu’il avait été recommandé par l’entourage ; l’expérience d’utilisation a été positive
  • Lorsqu’on crée un nouveau projet, la Font View Window s’ouvre et affiche sous forme de tableau tous les emplacements de glyphes de la police
  • Dans Element > Font Info, on renseigne les informations de la police, puis on ajoute son nom sous PS Names
  • Pour exporter en TTF, il faut passer dans General de la même fenêtre et régler la Em size sur 1024
    • pour les polices TrueType, l’UPM utilise par convention une puissance de 2, comme 1024 ou 2048
    • les polices OTF ont des exigences différentes
    • à l’époque des caractères métalliques, chaque lettre était placée dans son propre bloc d’espace d’une hauteur standard, et cette hauteur était appelée « em »
  • Un double-clic sur un glyphe dans la Font View ouvre la Character View
    • c’est là qu’on dessine ou modifie le glyphe
    • grâce à l’interface à onglets, on peut les examiner un par un ou comparer des mots côte à côte à partir d’un fichier texte préparé
  • Dans la liste des calques en bas à gauche, on choisit le calque Back, puis on importe le PNG de la lettre avec File > Import
  • Ensuite, on crée le contour du glyphe de l’une des deux façons suivantes
    • en dessinant le contour à la main
    • en choisissant le calque Fore puis Select > Autotrace pour générer automatiquement le contour
  • Autotrace se base sur l’image d’arrière-plan pour créer un contour avec points de contrôle et courbes de Bézier, mais cela peut produire trop de points ou des problèmes d’extrema manquants
  • Une fois la forme fermée créée, le glyphe apparaît aussi dans les autres fenêtres

Marges latérales et aperçu

  • Pour chaque glyphe, on ajuste les side bearings gauche et droit afin de définir sa largeur finale
  • Pour centrer automatiquement tous les glyphes, on peut utiliser Metrics > Auto Width
  • Pour placer tous les glyphes au centre de leur largeur, on peut utiliser Metrics > Center In Width
  • Lorsqu’on corrige les contours, il peut être utile de désactiver le calque de référence
  • Pour recommencer un glyphe, on le sélectionne dans la Font Window puis on utilise Edit > Clear
  • Pour effacer uniquement le calque de référence, on utilise Edit > Clear Background
  • Dans le champ de texte au-dessus de la zone de travail de la Character View, on peut saisir un mot ou des caractères arbitraires après la lettre courante pour prévisualiser leur apparence côte à côte
  • Il faut répéter ce processus pour tous les glyphes, et en particulier ajuster les side bearings du glyphe Space, sinon l’espace entre les mots sera trop grand

Réglage du kerning

  • Le kerning consiste à ajuster l’espacement entre les caractères pour améliorer la lisibilité
  • Dans la Font Window, on va dans Element > Font Info, puis dans l’onglet GPOS de Lookups, et on clique sur Add Lookup
  • Dans la liste Type, on choisit Pair Position (Kerning)
  • Dans la colonne Feature, on clique sur la flèche à côté de New, on sélectionne Kern Horizontal Kerning, puis on valide
  • On sélectionne ensuite le nouvel élément GPOS créé, puis on clique sur Add Subtable en conservant le nom par défaut
  • Les lettres à kern sont sélectionnées par glisser-déposer dans les deux tableaux
    • il faut sélectionner à la fois les majuscules et les minuscules
    • pour sélectionner deux ensembles dans un même tableau, on utilise Shift
  • En cliquant sur pairings, une version agrandie des paires de glyphes s’affiche dans la partie basse de la fenêtre
  • On fait alors glisser le deuxième glyphe pour le rapprocher ou l’éloigner du premier jusqu’à ce que toutes les combinaisons paraissent correctes

Tests et validation à l’export

  • Pour tester la police et le kerning dans FontForge, on peut utiliser File > Print
  • Le texte par défaut n’affiche pas toutes les combinaisons possibles, donc on peut ajouter son propre texte
  • kern_pairings.txt contient toutes les combinaisons de kerning et peut être collé dans l’écran de test

  • Problèmes possibles lors de l’export

    • lors de l’export avec File > Generate Fonts, FontForge peut signaler certains caractères à vérifier
    • Non-integral coordinates signifie qu’un ou plusieurs points du contour d’un glyphe ont une position décimale comme 2.25
    • il faut sélectionner le glyphe concerné, aller dans Element > Validation > Find Problems, cocher "non-integral coordinates", puis appliquer la correction de façon répétée
    • dans une police manuscrite qui ne dépend pas fortement d’une précision extrême, déplacer les points vers des coordonnées entières très proches peut ne pas changer grand-chose visuellement
    • Missing points at extrema signifie que les points de contrôle d’une courbe poussent celle-ci au-delà de ses limites extrêmes
    • il faut ajuster les points de contrôle pour que le point le plus haut ou les autres points extrêmes de la courbe soient marqués par des points jaunes
    • Element > Add Extrema peut aider, mais peut aussi déformer le glyphe ou créer davantage de problèmes de non-integral coordinates
    • même avec cette erreur dans le journal, la police pouvait être générée, mais de subtiles déformations gênantes pouvaient apparaître
    • ce problème d’extrema est fréquent avec les polices manuscrites irrégulières ou lorsqu’on utilise Autotrace
    • Self intersecting signifie que le contour du glyphe se recoupe lui-même
    • il faut vérifier toutes les lignes et supprimer les recouvrements

Choix du TTF et installation

  • Pour cet usage, le TTF (TrueType Font) était suffisant
  • L’OTF n’était pas nécessaire, car il n’y avait pas de projet de stocker un grand nombre de glyphes, ni d’ajouter gras et italique comme styles séparés, ni d’utiliser des ligatures
  • Le contenu utilisant la police étant publié sur le web, le TTF convenait bien à cet objectif
  • Pour générer la police avec tous les glyphes de la Font View, on utilise File > Generate Fonts
  • Dans le menu déroulant sous le nom de la police, on choisit le format de sortie TTF, puis on valide pour enregistrer la police dans le dossier du projet
  • Il suffit ensuite de déplacer la police générée dans l’emplacement système prévu pour les polices
  • Ressources de référence et exemples d’utilisation

À lire aussi

1 commentaires

 
GN⁺ 2023-11-28
Avis sur Hacker News

  • Bon aperçu de FontForge ; je l’avais moi-même un peu essayé par le passé
    C’est un peu rustique, mais je ne sais pas vraiment si les concurrents commerciaux sont tellement meilleurs. Je ne connais même pas leurs noms
    Et le site web est vraiment superbe. Singulier, avec une personnalité très marquée

    • FontForge est open source, multiplateforme et assez riche en fonctionnalités, donc c’est un outil appréciable, mais pour l’avoir utilisé, les concurrents commerciaux sont effectivement nettement meilleurs
      Si vous avez macOS, vous pouvez essayer Glyphs(/Mini) ou RoboFont, dont les périodes d’essai sont suffisantes. Cela dit, ce que j’attends le plus, ce sont les outils de nouvelle génération, y compris les outils web comme fontra.xyz
    • MFEK mérite aussi qu’on continue à suivre son évolution vers un état plus abouti
      Tout ce que j’ai vu jusqu’ici autour de MFEK avait l’air vraiment chouette
      https://mfek.org/
    • Puisqu’on parle de FontForge, je me demande si quelqu’un sait comment prévisualiser une police en cours de création avec quelques paragraphes de texte
      Une seule phrase du type « quick brown fox » ne suffit souvent pas

  • 100r.co vaut aussi vraiment le détour
    Devine et Rekka tiennent leur studio à bord du voilier Pino, et documentent leur vie, leurs voyages et leurs projets

  • Bon résumé de FontForge
    Comme l’article le laisse entendre, il existe aussi des options plus simples et plus automatisées pour créer une police à partir de son écriture manuscrite. On peut ensuite retoucher la police obtenue
    https://www.calligraphr.com/en/ s’appelait autrefois MyScriptFont

  • La police créée ressemble pas mal à celle que j’ai faite
    https://imgur.com/a/g8bIoUY
    Je ne suis pas allé très loin dans les optimisations comme le crénage, mais les 3 ou 4 logiciels que j’ai essayés étaient tous extrêmement frustrants, cassés ou difficiles à utiliser. C’était peut-être ma façon de m’en servir, et les logiciels payants sont sans doute bien meilleurs. Bravo d’être allé jusqu’au bout

  • Je me demande quelle est la manière la plus simple de fusionner plusieurs polices en une seule
    VS Code ne permet pas de définir des polices par langage ou par token. Par exemple, on ne peut pas mettre Comic Sans pour les commentaires et une autre police pour le reste, même si des réglages comme l’italique ou le gras sont possibles

  • J’aime les polices depuis qu’elles ont commencé à se généraliser avec la mode du Desktop Publishing dans les années 80
    On peut dire qu’elles ont été utilisées à l’excès pendant un temps, mais c’est l’une des premières choses qui m’ont fait sentir que le design comptait. En tout cas, c’est une belle police et l’aperçu est excellent

  • Je me demande s’il y a vraiment des gens qui créent des polices avec MetaFont/MetaPost
    Je ne sais même pas si FontForge a des fonctions de scripting. Je ne l’ai jamais utilisé moi-même, je me suis contenté de lire à son sujet, mais j’ai lu les cinq volumes de “Computers and Typesetting” de Knuth

  • Je me demande s’il existe déjà une startup d’enrobage IA pour la création de polices
    Les prompts seraient intéressants. Par exemple : « conçois une police de Noël adaptée aux enfants, avec une forte influence balkanique mais aussi une touche de brutalisme soviétique »
    Commercialement aussi, il faudrait que l’usage de polices exotiques devienne culturellement plus naturel. Je comprends pourquoi Helvetica, Roboto, Noto Sans et des polices plus modernes sont utilisées, mais le monde est franchement devenu un peu fade

  • C’était une occasion manquée que le billet de blog lui-même n’utilise pas sa propre police

  • La phrase ne devrait pas dire que « le chien saute par-dessus le renard », mais que le renard saute par-dessus le chien ;-)
    Parce que le chien est paresseux et que le renard est rapide