{"id":861,"date":"2014-03-24T20:03:56","date_gmt":"2014-03-24T20:03:56","guid":{"rendered":"http:\/\/simonertel.net\/blog\/?p=861"},"modified":"2026-04-25T19:42:13","modified_gmt":"2026-04-25T19:42:13","slug":"creer-sa-typo-entierement-et-gratuitement","status":"publish","type":"post","link":"https:\/\/simonertel.net\/blog\/creer-sa-typo-entierement-et-gratuitement\/","title":{"rendered":"Cr\u00e9er sa typo enti\u00e8rement et gratuitement"},"content":{"rendered":"

Aujourd’hui, int\u00e9grer un jeu de typographie particuli\u00e8re sur une page web est devenu facile. La tentation, pour de multiples raisons, de cr\u00e9er sa propre typo, est forte. Dans mon cas, disons-le tout net, c’est parti d’un bon ego-trip, l’\u00e9go-trip de voir sa propre \u00e9criture manuscrite utilisable \u00e0 souhait, sur tous les logiciels que je voulais, comme \u00e7a ! On pourrait \u00e9piloguer longuement sur les raisons de cr\u00e9er sa propre typo, car il en existe heureusement bien d’autres, mais l\u00e0 n’est pas le sujet. Cr\u00e9er sa typo est \u00e0 la port\u00e9e du premier(\u00e8re) imb\u00e9cile venu(e), puisque j’y suis arriv\u00e9<\/a> ! Et ceci peut se faire gratuitement. Et c’est cette exp\u00e9rience que je vais partager sur cet article !<\/p>\n

\n
\"Cr\u00e9er<\/a>

Cr\u00e9er votre propre typo !<\/p><\/div><\/p>\n

<\/p>\n<\/div>\n

Cr\u00e9er sa typo<\/h2>\n

Tout d’abord, il faut distinguer les jeux de typo avec ligatures ou pas, ma font n’ayant aucune ligature (jonction entre les caract\u00e8res). \u00c7a simplifie pas mal les choses !
\nSi la typo que vous souhaitez cr\u00e9er part d’une vraie version manuscrite (comme moi), il va falloir donc \u00e9crire tout l’alphabet et le scanner ! La premi\u00e8re version sera donc une image matricielle (ou bitmap). N’h\u00e9sitez pas \u00e0 scanner avec une d\u00e9finition assez haute (ou \u00e0 dessiner vos lettres un peu plus grosses pour \u00e9viter les errements de l’encre sur le papier). Mais si vous souhaitez cr\u00e9er votre propre font directement sur l’ordinateur, utilisez directement des logiciels vectoriels (Inkscape, Illustrator, etc.).<\/p>\n

Chaque caract\u00e8re devra \u00eatre travaill\u00e9 ind\u00e9pendamment. Chaque caract\u00e8re en typographie est appel\u00e9 \u00ab\u00a0glyphe\u00a0\u00bb. L’alphabet latin standard est constitu\u00e9 de 26 caract\u00e8res qu’on apprend tous \u00e0 l’\u00e9cole. Mais d\u00e8s qu’on veut prendre en compte les caract\u00e8res \u00ab\u00a0accentu\u00e9s\u00a0\u00bb ou \u00e0 \u00ab\u00a0ligature\u00a0\u00bb, sachez que d\u00e9j\u00e0, la langue fran\u00e7aise comprend 42 glyphes. Et, \u00e9videmment, si vous \u00eates un sale maniaque, comme moi, et que vous voulez aller au bout des choses, vous pouvez aussi ajouter plein de caract\u00e8res \u00ab\u00a0autres\u00a0\u00bb, tels que des ponctuations, des caract\u00e8res math\u00e9matiques (1, 2, +, -, <, >, %), ou des devises (\u20ac, $)… Et, enfin, en restant dans les caract\u00e8res latins, sachez qu’il existe encore d’autres caract\u00e8res particuliers en fonction des pays ! + les majuscules apr\u00e8s…<\/p>\n

Bref, cr\u00e9er une fonte qui reprenne tous les caract\u00e8res possibles requiert votre seule patience comme limite ! Bonne chance, car au final, c’est dr\u00f4le !<\/p>\n

Pan(ta)gramme<\/h2>\n

Si vous souhaitez lister les caract\u00e8res, il existe une astuce simple, qui s’appelle \u00ab\u00a0pangramme\u00a0\u00bb. Comme moi, vous ne connaissiez peut-\u00eatre pas le nom, mais on en a tous vu ! Lorsqu’on installe une typo sur un syst\u00e8me, la plupart des OS en affichent ! Il s’agit d’une phrase contenant l’ensemble des \u00ab\u00a0glyphes\u00a0\u00bb d’une langue. En fran\u00e7ais, \u00e7a donne : \u00ab\u00a0Portez ce vieux whisky au juge blond qui fume\u00a0\u00bb, en version \u00ab\u00a0caract\u00e8res non accentu\u00e9s\u00a0\u00bb. Sinon, avec caract\u00e8res accentu\u00e9s, \u00e7a donne : \u00ab\u00a0D\u00e8s No\u00ebl o\u00f9 un z\u00e9phyr ha\u00ef me v\u00eat de gla\u00e7ons w\u00fcrmiens je d\u00eene d\u2019exquis r\u00f4tis de b\u0153uf au kir \u00e0 l\u2019a\u00ff d\u2019\u00e2ge m\u00fbr & c\u00e6tera !\u00a0\u00bb.
\nOui, la langue fran\u00e7aise contient la lettre \u00ff ! Si vous souhaitez \u00e9tendre votre alphabet \u00e0 des langues \u00e9trang\u00e8res en particulier, se r\u00e9f\u00e9rer au pages traduites de l’article Wikip\u00e9dia a \u00e9t\u00e9 ma m\u00e9thode : \u00ab\u00a0pangramme<\/a>\u00a0\u00bb s’av\u00e8re d’une aide pratique.<\/p>\n

Vectorisation mon capitaine<\/h2>\n

Bravo, vous venez de scanner vos petits gribouillis ! Il vous faut maintenant les vectoriser<\/strong>. Rien de monstrueux \u00e0 \u00e7a. Vous pouvez le faire via Illustrator<\/a>, ou si vous voulez que du gratuit (et du l\u00e9gal ihihihihi :s), via Inkscape<\/a> ! Pas de contraintes sp\u00e9ciales : noir et blanc, pas de demi-teintes. Donc songez \u00e0 travailler le bitmap au pr\u00e9alable en augmentant les contrastes, et voir si \u00e7a n’ab\u00eeme pas trop votre \u00e9criture. Si jamais vous vectorisez sur Illustrator, il vous faudra exporter votre fichier en SVG<\/strong>.<\/p>\n

Le fichier de font<\/h2>\n

L\u00e0, je n’ai rien invent\u00e9 non plus, je me suis content\u00e9 de suivre cet excellent tuto<\/a>. On y apprend qu’Inkscape est parfaitement con\u00e7u et pens\u00e9 pour cr\u00e9er une font, et poss\u00e8de m\u00eame un fichier d’exemple livr\u00e9 avec ! Par contre, vous ne pourrez qu’exporter votre font en SVG<\/strong> d’Inkscape. Apr\u00e8s, rien de bien terrible, on ex\u00e9cute, tel un t\u00e2cheron laborieux, la p\u00e9nible t\u00e2che de copier-coller lettres apr\u00e8s lettres, de rentrer les infos correspondantes, et de s’habituer \u00e0 l’interface Inkscape o\u00f9 tout n’est malheureusement pas totalement intuitif !<\/p>\n

\"Inkscape,<\/a>

D\u00e9monstration du copier-coller de la font<\/p><\/div>\n

Mais une fois les premiers m\u00e9canismes acquis, rien de bien sorcier. N’ayez pas peur de faire d\u00e9passer les lettres du cadre, elles appara\u00eetront toujours enti\u00e8res \u00e0 la fin ! Ne vous souciez pas des espaces inter-lettres \u00e9galement, cette \u00e9tape intervient ensuite, plus facile \u00e0 g\u00e9rer sur le logiciel suivant. Enfin, si jamais vous ne comprenez pas pourquoi lorsque vous ajoutez une lettre compos\u00e9e de deux formes apr\u00e8s avoir fait \u00ab\u00a0Obtenir la courbe avec la s\u00e9lection\u00a0\u00bb, \u00e7a n’en prend en compte qu’une seule, pas de panique, c’est normal, il faut faire \u00ab\u00a0Chemin\u00a0\u00bb > \u00ab\u00a0union\u00a0\u00bb puis l\u00e0, \u00e7a marchera !<\/p>\n

\"screenshot<\/a>

Screenshot de Inkscape avec lettre compos\u00e9e<\/p><\/div>\n

Enregistrer<\/h2>\n

N’h\u00e9sitez pas \u00e0 sauvegarder r\u00e9guli\u00e8rement ! Un accident est si vite arriv\u00e9… ! Dans le tutoriel mis en lien pr\u00e9c\u00e9demment, vous verrez qu’Inkscape permet de d\u00e9finir \u00ab\u00a0le cr\u00e9nage<\/a>\u00ab\u00a0, c’est-\u00e0-dire l’interlettrage. Mais je conseille de le faire plus tard avec FontForge.<\/p>\n

Que se passe-t-il, on perd le contr\u00f4le de la navette Inkscape !<\/h2>\n

Vous avez enregistr\u00e9 votre SVG (\u00ab\u00a0mafontquidechire.svg\u00a0\u00bb), vous \u00eates all\u00e9 boire votre caf\u00e9 et votre Windows a plant\u00e9. Patatras. Pas d’inqui\u00e9tude, vous dites-vous, vous avez sauvegard\u00e9 la font ! Vous lancez Inkscape et vous rouvrez votre fichier SVG. Sauf que l\u00e0, c’est le drame, vous voyez bien les glyphes dans la fen\u00eatre associ\u00e9e, mais vous ne pouvez plus les \u00e9diter ! C’est \u00ab\u00a0normal\u00a0\u00bb dans le sens o\u00f9 l’impl\u00e9mentation de la font dans Inkscape est encore relativement r\u00e9cente, et les d\u00e9veloppeurs travaillent d’arrache-pied pour am\u00e9liorer les choses, comme vous pouvez le constater ici<\/a>. Pour le moment, Inkscape est juste pr\u00e9vu pour l’\u00e9tape de cr\u00e9ation\/design, et ne pr\u00e9voit que l’export SVG.<\/p>\n

La cour des grands<\/h2>\n

Pas de panique ! Votre fichier est totalement exploitable en fait ! Il suffit juste de l’ouvrir avec le bon logiciel ! C’est-\u00e0-dire FontForge en l\u2019occurrence (mais il existe d’autres softs, mais payants pour la plupart, et comme l\u00e0 n’est pas le th\u00e8me de l’article…).
\nIl va vous falloir peaufiner, normaliser et travailler votre petit SVG pour en g\u00e9n\u00e9rer une typo TrueType<\/a> (.ttf). Pour ce faire, il va vous falloir t\u00e9l\u00e9charger et installer FontForge<\/a> (pour en savoir plus sur le cr\u00e9ateur<\/a>).<\/p>\n

Les glyphes<\/h2>\n

L’interface de FontForge pr\u00e9sente deux volets principaux : la liste de tous les glyphes, et l’\u00e9dition de chaque glyphe sur lequel vous d\u00e9ciderez de porter votre attention.<\/p>\n

\n
\"Screenshot<\/a>

Mon jeu de caract\u00e8re sur FontForge.<\/p><\/div>\n<\/div>\n

L\u00e0 aussi, je vous laisserai d\u00e9couvrir par vous-m\u00eames le logiciel. Mais comme je ne suis pas totalement un ingrat, voici quelques tips qui pourront vous \u00eatre utiles :
\n– Travaillez par groupe de lettres directement, \u00e7a ira plus vite. Pour ce faire, s\u00e9lectionner les glyphes simplement en cliquant-glissant sur l’interface. Ensuite, vous aurez tout un tas de commandes qui permettent d’uniformiser les caract\u00e8res ;
\n– M\u00e9trique > approche gauche \/ droite > permet d’appliquer des valeurs uniformes d’espaces au c\u00f4t\u00e9 de chaque lettres.
\n– \u00c9l\u00e9ment > Arrondi > Permet de rendre les valeurs des coordonn\u00e9es des courbes de B\u00e9zier de chaque lettres arrondies, donc enregistrables pour un export TTF.
\n– \u00c9l\u00e9ment > Corriger direction > Permet de corriger au point par point des imperfections des trac\u00e9s g\u00e9n\u00e9r\u00e9s par Inkscape.
\nVous aurez souvent \u00e0 utiliser la fonction \u00c9l\u00e9ment > Validation, avant d’exporter votre font.
\nL\u00e0 aussi, un travail de longue haleine vous attend, vous vous retrouverez avec de nombreux messages d’erreur et de validations diverses que je n’\u00e9num\u00e9rerai pas ici. Mais le jeu en vaut la chandelle.<\/p>\n

Epilogue<\/h3>\n

Si vous \u00eates parvenu \u00e0 exporter votre font en .ttf, alors il ne vous reste plus qu’\u00e0 l’utiliser o\u00f9 bon vous semble, et \u00e0 l’exporter au besoin si un autre format est n\u00e9cessaire, via la multitude d’outils en ligne existant. Comme Font Squirrel<\/a>, l’un des plus vieux dans la place (mais n\u00e9cessitant Flash)
\nSi vous souhaitez ajouter des lettres \u00e0 votre jeu de caract\u00e8res, vous pouvez toujours dessiner la lettre via Inkscape et l’importer sur FontForge comme l’explique ce tutoriel<\/a>.<\/p>\n

Enfin, si vous voulez savoir \u00e0 quoi ressemble le jeu de font que j’ai cr\u00e9\u00e9, le (re)voici<\/a>.<\/p>\n

En esp\u00e9rant que cela vous aura servi !<\/p>\n","protected":false},"excerpt":{"rendered":"

Aujourd’hui, int\u00e9grer un jeu de typographie particuli\u00e8re sur une page web est devenu facile. La tentation, pour de multiples raisons, de cr\u00e9er sa propre typo, est forte. Dans mon cas, disons-le tout net, c’est parti d’un bon ego-trip, l’\u00e9go-trip de voir sa propre \u00e9criture manuscrite utilisable \u00e0 souhait, sur tous les logiciels que je voulais, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-861","post","type-post","status-publish","format-standard","hentry","category-boulot"],"_links":{"self":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/comments?post=861"}],"version-history":[{"count":25,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/861\/revisions"}],"predecessor-version":[{"id":982,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/861\/revisions\/982"}],"wp:attachment":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/media?parent=861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/categories?post=861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/tags?post=861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}