Comment concevoir et construire une police cursive fonctionnelle

Ce que vous allez créer

Le type cursif était autrefois un oxymore, mais la technologie moderne OpenType nous permet maintenant de créer de vraies polices cursives avec des formes de lettre se comportant en fonction de leur contexte, tout comme le vrai lettrage cursif, dans une certaine mesure.. 

Dans ce didacticiel, vous apprendrez à créer une conception cursive, à la traduire en plans de Bézier valides, à la nettoyer, à la packager dans une police et à coder les règles OpenType programmant son comportement cursif..

1. Avez-vous vraiment besoin d'une police??

Cela peut sembler une question étrange à poser, mais de plus en plus de concepteurs utilisent de manière excessive les polices. Le mot "Police de caractère”Signifie littéralement“ source de fondu ”, en référence aux blocs métalliques qui constituaient jadis une police de caractères. Ces blocs étaient fabriqués dans un métal incroyablement dur, conçu pour survivre à des centaines de milliers de presses ou, plus tard, pour servir de moules, moulant à plusieurs reprises des copies de ses lettres en lingots métalliques plus doux pour une impression typographique..

Cela implique que les polices sont destinées à un usage intensif et répétitif. Les concepteurs de caractères consacrent beaucoup de travail à une police pour s’assurer qu’elle fonctionne le mieux possible. tout paramètre donné. 

Ainsi, si vous n'avez besoin que d'un mot décoratif, il n'est pas logique de concevoir (ou d'acheter de nos jours) une police entière. Vous ferez probablement mieux d’écrire à la main votre mot ou votre phrase et de l’importer dans votre dessin. Mais si, éventuellement, vous avez besoin de plusieurs en-têtes différents, ou si vous souhaitez définir un passage particulièrement long dans cette police, ou si vous souhaitez un motif capable d'imprimer n'importe quoi, alors une police de caractères est la solution..

2. Création du design

Les types sont souvent le résultat d'accidents heureux. Souvent, je peux écrire avec désinvolture quelque chose sur du papier qui a vraiment l’air beau et qui deviendra une source d’inspiration pour toute une police de caractères. Par exemple, voici quelques titres que j'ai écrits pour certains devoirs de physique / statistique et qui, à mon avis, pourraient faire une belle police de caractères.

Petit conseil: si vous essayez d'envoyer un échantillon de lettre, il est souvent utile de l'afficher sur du papier quadrillé afin de pouvoir conserver vos lettres et numériser les cultures-belle et bien droite..


Ceux-ci ont été écrits avec un stylo de calligraphie à larges côtes. Vous pouvez acheter des stylos à plume calligraphiques très bon marché pour moins de 10 $ chez des fabricants comme Sheaffer.

Vous devrez les numériser en images afin de vectoriser les dessins. Si vous n'avez pas de scanner (comme moi), vous pouvez simplement prendre une photo sous un angle orthogonal et l'utiliser. Les deux analyses ci-dessus ont été effectuées avec un appareil photo iPhone. La qualité de l'image ne doit pas forcément être excellente: vous n'avez qu'à vous soucier d'éviter les distorsions géométriques..

3. Traçage des lettres dans FontForge

Pour créer la police elle-même, vous aurez besoin d'un programme d'édition de polices. Il existe plusieurs options terriblement coûteuses, mais une application géniale, FontForge, est gratuite et à code source ouvert. Nous utiliserons FontForge dans ce tutoriel. Assurez-vous de l’utiliser uniquement avec des coordonnées entières (Fichier > Préférences > Édition > SnapToInt).

Étape 1

La première chose à faire est d’importer l’analyse dans la zone de dessin de FontForge. Faites cela en cliquant dans une fenêtre d'édition de glyphes et en allant à Fichier > Importation.

Ensuite, en vous assurant que vous êtes dans le Contexte couche, utilisez les outils de déplacement et d’échelle pour positionner et redimensionner l’image de référence. À des fins de démonstration, je commencerai par la lettre «r» dans cet exemple, centrez donc le «r» au milieu de la base de glyphes, à droite de la ligne de base..

Étape 2

Nous commençons par dessiner la jonction où commence l'instroke de la lettre.

Ensuite nous plantons Points de courbe HV à tous les minima et maxima du contour de la lettre. L'utilisation de points en courbe HV aide à ancrer en place des points importants le long du contour de la lettre, tout en évitant les maux de tête sans fin avec des points extrema manquants sur la route. Pour l'instant ça va si le chemin se croise.

Copiez ensuite les points d’installation et déplacez-les horizontalement pour former les points de sortie. Il est très important que les coordonnées y des deux ensembles de points restent les mêmes..

Puis finissez de souligner le glyphe.

Étape 3

Ajustez les poignées de Bézier des points de la courbe pour mieux correspondre au contour du glyphe.

Vous pouvez voir un aperçu rempli du glyphe dans la vue Police principale..

Étape 4

Nous pouvons maintenant nous attaquer au prochain glyphe, dans ce cas, un «i». Commencez par délimiter le «r» en réglant sa largeur d'avance sur le bord de sa longueur..

Nous traçons le glyphe avec les mêmes techniques que nous avions l'habitude de faire le 'r', en prenant soin de faire la jonction entre la sortie du 'r's et le' i's instroke lisse.

Vous devrez dessiner le point final du 'i' à la bonne hauteur, de manière à ce qu'il aligne les touches de toutes les autres lettres. Il peut donc être extrêmement utile de créer des directives Fontforge indiquant les hauteurs des jointures. Créez des repères en faisant glisser la règle du haut vers le bas dans la fenêtre des glyphes. Assurez-vous que les lignes directrices sont arrondies aux coordonnées entières.

Ensuite, dessinez le reste du glyphe.

Étape 5

Ce 'i' a été dessiné dans l'espace 'g' des glyphes; nous devons le déplacer vers son propre emplacement de glyphe. Sélectionnez le contour (et le point) en double-cliquant sur les tracés, puis coupez-les et collez-les dans l'emplacement du glyphe «i». Définissez la largeur d’avance en définissant tous les accompagnements à 0 (Métrique > Définir les deux roulements). Décaler l'image de fond si nécessaire.

Vous pouvez toujours voir les lettres côte à côte en les tapant dans le champ liste de mots boîte. Ceci est extrêmement utile lorsque vous créez des polices cursives pour vous assurer que les jointures sont lisses et alignées..

Étape 6

Ici, je trace la lettre 'l' de l'échantillon. Il peut être plus facile de copier une lettre existante (dans ce cas, un 'i' sans points) et de déplacer les points pour correspondre à la nouvelle lettre, bien que chacun ait sa propre méthode de balayage des traces à la main..

Le système de points limites englobant HV tombe parfois en panne, car il est parfois impossible de tracer certaines courbes en utilisant uniquement des points HV.

Dans ce cas, il peut être nécessaire d'insérer des points de courbe supplémentaires le long de la spline.

Le lettrage à la main est rarement parfait, mais les polices doivent être (un des inconvénients de l’utilisation des polices). Cela signifie que, pour éviter les combinaisons problématiques, les lettres, en particulier leurs frappes, doivent être quelque peu normalisées. Dans le cas du 'l', cela signifie qu’il faut abaisser la queue pour qu’elle se place sur la ligne de base.

Étape 7

Voici un tracé de la lettre 'c'. Comme vous pouvez le constater, j’ai apporté quelques modifications par rapport à la version écrite pour que celle-ci s’agisse bien avec d’autres lettres. le Fenêtre Métriques peut être très utile pour tester des chaînes de lettres.

4. Dériver le reste de l'alphabet

Votre échantillon d’inscription ne contiendra probablement pas toutes les lettres de l’alphabet. En fait, vous pouvez parfois obtenir de meilleurs résultats grâce aux lettres que vous avez déjà dessinées. Par exemple, un script 'a' est très similaire à un 'ci'.

J'ai créé le "a" mentionné ci-dessus simplement en serrant ensemble un "c" et un "i" dans l'échantillon.

Chaque lettre que vous créez engendrera plus de lettres. Le 'a' par exemple donne lieu au 'd'.

Le 'd' n'est pas la seule lettre qui vient de 'a'. Vous pouvez aussi éventuellement dériver le 'q', le 'u', le 'i' (si vous avez commencé avec un 'a' au lieu d'un 'i'), 'n', 'm', 'p', 'h', et plusieurs autres de 'a'. Il existe d'innombrables façons de créer un alphabet en commençant par quelques exemples de lettres. Un chemin est indiqué ci-dessous, en commençant par 's', 'a', 'c', 'e', ​​'l', 'o' et 'r'.

Voici un exemple de police que j'ai créée avec les 26 lettres..

5. Assemblage d'une police fonctionnelle

À ce stade, la police contient un alphabet complet, mais fonctionne à peine comme une police, car les lettres ne fonctionnent ensemble qu'au niveau le plus élémentaire. La prochaine partie de ce didacticiel se concentrera sur la création des variantes nécessaires et la programmation de la police pour relier les lettres dans un script cursif agréable..

Étape 1

Vos lettres 'b', 'o', 'v' et 'w' auront presque certainement des coups qui se terminent plus haut que les autres lettres. Faites de votre mieux pour normaliser ces quatre lettres comme vous le faisiez avec les lettres normales.

Étape 2

Si l'une de ces quatre lettres apparaît, la lettre qui suivra ne sera pas reliée car son instroke sera inférieur à celui de la lettre précédente. Nous devons créer un ensemble de glyphes alternatifs avec des frappes élevées qui puissent se lier avec les symboles 'b', 'o', 'v' et 'w'. Pour ce faire, commencez par ajouter 26 emplacements de glyphe à votre police, en Codage > Ajouter des emplacements de codage.

Les nouveaux créneaux entreront en blanc et vous devrez les trier en allant à Élément > Autre info > Renommer un glyphe de masse.

Donnez-leur un suffixe de 'haute', et les mapper au bloc de l'alphabet commençant par'une'.

Cela crée un bloc d'emplacements nommés 'a.high', 'b.high', 'c.high', etc. Copiez et collez une copie de l'alphabet minuscule dans ce bloc..

Étape 3

Donnez au glyphe 'a.high' un instroke qui serait connecté aux 'b', 'o', 'v' et 'w'.

Étape 4

Cela produit un «a» alternatif approprié à utiliser après un «b», un «o», un «v» ou un «w», mais il ne fait rien à moins que la police ne sache quand l'utiliser. Pour indiquer à la police de remplacer le "a.high", nous devons créer une recherche de police (Élément > Informations sur la police > Des recherches > Ajouter une recherche). En faire un Single Remplacement recherche, mais ne définissez aucune fonctionnalité. Sans ensemble de fonctionnalités, cette recherche servira de liste des glyphes appariés que les autres recherches pourront utiliser..

Puis ajoutez un sous-table à la recherche. Utilisez le Utilisation par défaut du suffixe bouton pour remplir automatiquement la liste avec des appariements basés sur les noms de glyphes. Si le bouton ne fonctionne pas, enregistrez votre police, fermez Fontforge, rouvrez-le et réessayez..

Étape 5

Ajouter une autre recherche, celle-ci un Substitution de chaînage contextuel Chercher. Attribuer le calt qui "active" la recherche dans la police quand elle est utilisée pour taper du texte.

Ajoutez une sous-table et créez-y deux classes, une avec les formes 'b', 'o', 'v', 'w' et 'high', et l'autre avec toutes les autres lettres absentes de la première classe.. 

Au début de chaque liste, insérez "void" ou "void2", car, pour une raison quelconque, Fontforge ne lira qu'à partir du seconde glyphe dans chaque classe. Pour la règle de correspondance, tapez le nom de votre première classe, un canal, le nom de la deuxième classe et la recherche «liens hauts» sous la forme @ <> (vous pouvez utiliser le Ajouter une recherche menu).

Que se passe t-il ici? le Chaînage de substitution recherche va le long de chaque lettre que vous tapez et regarde pour voir si c'est un membre de Classe 1 ('b' et amis). Si elle est suivie par un membre de Classe 2 (toutes les autres lettres), il va chercher dans le liens élevés et remplacez ce glyphe par le glyphe alternatif associé répertorié dans liens élevés. De cette façon, [b] [une] devient [b] [un haut] lorsque vous tapez.

Étape 6

Comme les classes doivent être disjointes, cela échoue si vous avez plus d'un 'b' ou entreprise dans une rangée. Nous en tenons compte en créant une deuxième sous-table, avec une classe contenant les symboles 'b', 'o', 'v', 'w' et leurs formes hautes. La règle de correspondance aura la même classe deux fois, et la seconde se verra appliquer une recherche de liens élevés. Cette sous-table cherchera des «b» suivis par d'autres «b» (ou d'autres lettres de cette classe) et effectuera les mêmes substitutions.

Vous devriez avoir deux sous-tables dans le calt recherche maintenant.

Étape 7

Une fois que vous avez quitté le panneau Informations sur la police, vous devriez être en mesure de voir la recherche en action dans la fenêtre Métriques..

Avec la fenêtre métrique comme aide visuelle, convertissez le reste des lettres du bloc haut en caractères majuscules.

Les jointures hautes doivent se connecter en douceur dans la fenêtre des métriques.

6. Polonais stylistique

À ce stade, la police est devenue techniquement une vraie cursive, car elle liera automatiquement toute combinaison de lettres que vous tapez. Mais il reste encore du chemin à faire pour y arriver Regardez meilleur.

Étape 1

Le lien entre les lettres de hauteur x et les lettres ascendantes telles que "h", "k" et "t" est en haut de la liste des problèmes à résoudre. Comme vous pouvez le constater, les jointures peuvent paraître un peu gênantes.

Nous devons résoudre ce problème en créant un autre jeu de lettres alternatif, à remplacer par celles qui se produisent avant une lettre ascendante. Citez-les comme les glyphes élevés, mais donnez-leur le suffixe .raide.

Créez une autre recherche non fictive, avec un sous-tableau contenant des paires de glyphes réguliers et abrupts.

Étape 2

Vous aurez également besoin de créer des versions alternatives des glyphes 'h', 'k' et 't', pour établir une liaison avec les glyphes raides (ayant des frappes fortes). Il est probablement plus facile d’ajouter trois emplacements de glyphes et de les nommer. h.insteep, k.insteep, et t à travers le Élément > Info sur le glyphe la fenêtre. Vous pouvez également créer trois autres copies de ces glyphes pour les cas où plusieurs «h» se produisent à la suite, bien que cela semble actuellement non fonctionnel..

Bien sûr, donnez-leur leur propre sous-table.

Étape 3

Ensuite, nous allons dans le calt Recherchez et ajoutez une troisième sous-table pour configurer nos règles de chaînage. Dans une classe, inscrivez 'h', 'k' et 't', et dans l’autre, mettez le reste de l’alphabet, sauf pour 'h', 'k' et 't', car les classes doivent être disjoint; et les 'b', 'o', 'v' et 'w', qui, en lettres majuscules, ne peuvent pas avoir de fortes pointes. 

La deuxième classe (lettres ordinaires) commence, et obtient le raies recherche appliquée à elle. La première classe obtient le des liens recherche appliquée à elle. Cela signifie que si la police produit une combinaison telle que [une] [h], la [une] sera remplacé par [a.steep], comme spécifié dans le sous-tableau des liens de steep, et le [h] est remplacé par [h.insteep], selon les sous-tables insteeplinks. Ceci produit la paire appariée [a.steep] [h.insteep].

Étape 4

Ensuite, nous entrons et modifions en fait les glyphes alternatifs pour avoir des liens raides. Il sera utile de créer un troisième ensemble de directives ici. Vous pouvez ignorer les 'h', 'k' et 't', et les 'b', 'o', 'v' et 'w', car ils ne peuvent pas fournir de liens raides dans le cadre de notre programmation actuelle.

Comme auparavant, la fenêtre Métriques vous aide à voir le fonctionnement des polices et à créer des liens lisses..

Cela devrait produire des liens lisses dans la plupart des cas. Il échouera s'il y a plusieurs lettres ascendantes dans une ligne. En théorie, vous pouvez créer une quatrième sous-table dans calt pour substituer des lettres ascendantes substituées elles-mêmes, bien que pour une raison quelconque cela ne fonctionne pas. La police retombera sur l’ancienne liaison moins lisse mais toujours connectée. 

Il échouera également dans des combinaisons telles que 'chauve-souris', avec une lettre haute combinée à une lettre raide - encore une fois, en théorie, vous pouvez programmer une sous-table qui remplacerait les lettres hautes par des caractères alternés à la fois élevés et raide, mais encore une fois, d'après mon expérience, cela ne fonctionne pas. 

Le mieux que vous puissiez faire, cependant, est de vous assurer que la sous-table de liaison abrupte est répertoriée. au dessous de les hauts liens sous-tables quand énumérés dans calt; Ce mécanisme de secours garantit que les deux premières sous-tables peuvent remplir leurs fonctions les plus importantes par rapport à la troisième en cas de conflit..

Étape 5

Un autre problème important peut être les paires en conflit fixe comme 'ti' et 'th'.

Le moyen le plus simple de résoudre ce problème est de créer ligatures-remplacements personnalisés pour ces paires de lettres problématiques. J'ai créé six ligatures - une ligature 'ti' et une ligature 'th', ainsi que des variantes hautes et raides (n'oubliez pas de les ajouter à la liste de recherche).

Étape 6

Les ligatures doivent être programmées dans une police avec un Remplacement de ligature lookup, que vous devez ajouter à la liste de recherche de votre police. Le marquer dlig (ligature discrétionnaire). Puisque calt est plus important que le dlig chercher, assurez-vous calt est répertorié en premier dans la liste de recherche pour lui donner la priorité en cas de conflit.

La substitution de ligatures est plus simple que la substitution contextuelle: vous créez simplement une sous-table pour énumérer les ligatures et les paires de lettres qu'elles remplacent. Parce que dlig prend effet après calt a fait son travail, les glyphes de source devraient être ceux remplacés par calt.

Vous devriez pouvoir voir les ligatures en action dans la fenêtre des métriques..

Étape 7

Cela couvre les bases de la création d'une police cursive. Une police complète contiendra beaucoup d'autres glyphes, notamment des accents, des symboles, des majuscules et autres. Certains de ces glyphes devront être intégrés à la programmation des liens en ajoutant leur nom aux divers sous-tables de recherche..

Un mot d'avertissement pour quand vous allez exporter votre police en tant que fichier de police réel (.ttf, .otf) via Fichier > Générer des polices. Une petite partie de la programmation que nous avons ajoutée à la police sera enregistrée dans le fichier de police exporté, sauf si vous cochez la case correspondante. Type ouvert boîte dans le Les options la fenêtre. Avant d'exporter votre police, vous devez exécuter quelques tâches de maintenance standard dans le format numérique:

  1. Supprimer tous les chevauchements (sélectionnez tous les glyphes avec Contrôle-A, Élément > Chevauchement> Supprimer le chevauchement).
  2. Arrondissez toutes les coordonnées en entiers (sélectionnez tous les glyphes, Élément > Rond > À Int).
  3. Faire les contours extérieurs dans le sens des aiguilles d'une montre (sélectionnez tous les glyphes, Élément > Direction correcte).

Félicitations, vous avez terminé!

Vous savez maintenant comment concevoir un type vraiment cursif, un type qui fonctionne simplement lorsque vous l'utilisez dans une application. Une telle police n'est pas toujours nécessaire: les lettres manuscrites ne doivent pas être oubliées! Mais c’est certainement une chose utile et amusante, et les possibilités offertes par la programmation OpenType sont infinies. Bonne fabrication de polices!

La police utilisée comme exemple dans la seconde moitié de ce tutoriel est En couleur hurlante, une police cursive que j'ai conçue et qui peut être trouvée sur dafont.com.