Utiliser la fonte

La dernière version est disponible sur le repository Bitbucket de l’agence

https://bitbucket.org/usedesign/icons-webfont/

Le fichier à installer sur son système est dans /fonts/UDiconwebfont- Regular.otf.

Tous les fichiers de cet article ont pour référence ce repository Bitbucket.

Sketch et Illustrator

La fonctionnalité OpenType de ligature permet d’utiliser très simplement les icones dans ces deux logiciels :

  • Créer un champ de texte
  • Appliquer au champ la police UD icon webfont Regular
  • Taper le nom d’un caractère, par exemple arrow_right
  • Le nom est automatiquement remplacé par l’icone correspondante img-1

La liste des icones accompagnées de leur nom est disponible sur http:// lab.usedesign.agency/ud/ud-webfont/ (Voir page lab.usedesign.agency)

Sur Illustrator, il faut peut-être initialiser la fonction Ligatures standard dans le panneau Opentype (Fenêtre > Texte > Open Type) pour que le texte soit remplacé par l’icone.

img-2

HTML

Voir la documentation sur Bitbucket

Alimenter la fonte

Pré-requis

Nous aurons besoin, pour alimenter la fonte, de :

  • Illustrator
  • Glyphs. Use Design a acheté une licence pour ce logiciel.
  • Source_Tree, le client git, pour pouvoir manipuler le repository Bitbucket
  • Un éditeur de code (Atom, Brackets, Sublime_Text)
  • Onyx, utilisée pour vider les caches de police dans Mac OS X. Attention à bien télécharger la version qui correspond à la version de son OS.

    Design

    Garder une cohérence visuelle Même si chaque projet est spécifique et que les icones créées à ces occasions peuvent être différentes, il faudra tout de même veiller à conserver une cohérence visuelle au moment d’en intégrer de nouvelles.

La raison principale est que les nouvelles icones doivent pouvoir être utilisées en même temps que les anciennes. Un style graphique trop éloigné affaiblira donc l’ensemble d’un design où ces icones seraient utilisées.

Dans le fichier Illustrator ai/UD Icon webfont.ai, des formes sont fournies et aideront à créer de nouvelles icones sur une base commune (voir partie Illustrator).

img-3

Si le style doit s’éloigner beaucoup de la version actuelle, il faut songer à créer une nouvelle version de la police. L’idéal est de créer une nouvelle branche sur Bitbucket pour faire évoluer les différentes versions (voir partie Bitbucket).

Dessiner les icones dans Illustrator

Utiliser le fichier ai/UD Icon webfont.ai

Le fichier comporte une ligne avec des formes de base, qui aideront à créer des icones visuellement cohérentes avec le reste du fichier.

Les repères présents dans le fichier donnent un cadre à ce dessin d’icone. Celle-ci sera dessinée pour une utilisation à 32px. On retrouvera ces repères plus tard, au moment d’intégre la police dans Glyphs

  • On dessine son icone dans l’espace.
  • Une fois terminé le dessin, on décompose tout (lignes vers remplissage, arrondis, ecrêtages, pathfinder). L’idéal est de créer un tracé transparent, afin d’éviter les problèmes de sens de tracé ou de mauvais pathfinders.

Il faut ensuite adapter la taille de cette icone travaillée à 32px vers la taille de l’emplacement dans Glyphs. On va donc scaler l’icone à 5600%, avant de la copier. Pour avoir plus de détails sur cet aspect, on pourra regarder la vidéo accessible dans la partie Ressources de cet article.

Glyphs

Utiliser le fichier src/UD Icon webfont.glyphs

On va maintenant coller l’icone dans Glyphs. Il nous faut un emplacement vide, qu’on doit normalement trouver dans le fichier source. Si ce n’est pas le cas, on crée un nouveau glyphe, et on l’ouvre.

img-4

On va maintenant coller notre forme, actuellement dans le presse-papier, à cet emplacement. La taille est bonne, mais le problème est que la position ne correspond pas à celle définie dans Illustrator. On va donc s’aider des repères pour positionner notre dessin.

img-5

Il faut se souvenir que 1px dans Illustrator correspond à 56em dans l’emplacement Glyphs

img-6

Pour vérifier que nos pixels ne bavent pas, on peut afficher l’icone à 32px (ou 16 ou 24), et appuyer sur la touche Espace pour prévisualiser le résultat

img-7

Une fois l’icone positionnée, on va la renommer et lui donner un nom d’usage cohérent, qu’on appelera lors de l’utilisation. On suivra ces quelques conventions de nommage :

  • Pas de majuscules, pas de chiffres, pas d’espace — ou on aura des problèmes à l’export
  • On sépare les mots du nom de l’icone par un underscore _
  • Si l’icone possède une version évidée et une pleine (exemple, heart et heart_o), on utilise _o (comme outline) pour signaler la version évidée.

img-8

img-9

img-10

On y est presque ! Il y a maintenant deux actions à accomplir avec le panneau des macros pour pouvoir exporter notre icone.

Configuration des ligatures

Utiliser le fichier py/ligaFunctionBuild.py

Ce code python va servir à générer les ligatures qui vont nous permettre de remplacer automatiquement, à l’utilisation, une chaine de caractères par l’icone correspondante.

  • Ouvrir le panneau des macros (Fenêtre > Panneau des macros)
  • Coller dans la partie haute le script Python issu de py/ ligaFunctionBuild.py
  • Bien effacer le code précédent dans la fenêtre de sortie (en bas), et cliquer sur “Lancer”
  • Sélectionner tout le code de la fenêtre de sortie et le copier.

On va ensuite se rendre dans les informations de la police pour mettre à jour les ligatures.

  • Cliquer sur le bouton i en haut à gauche de la fenêtre principale de Glyphs
  • Cliquer sur l’onglet Fonctions
  • Dans le panneau de gauche, sélectionner la fonction liga
  • Sélectionner tout le code de la fonction, à droite, et le supprimer.
  • Coller le code du presse-papier issu de la fenêtre de sortie des macros Python

Les ligatures sont bien configurées. Pour vérifier qu’il n’y a pas d’erreur, on peut cliquer sur Compiler en bas de la fenêtre. Si on ne voit pas s’afficher de fenêtre d’alerte, c’est qu’il n’y a pas d’erreur. L’export est en vue.

Update du fichier css

Utiliser le fichier py/cssBuild.py et le fichier css/udwi.css

Avant d’exporter, nous allons générer le code qui va nous permettre de mettre à jour le fichier CSS, qui peut également être utilisé pour appeler les icones dans de l’HTML (méthode alternative à la précédente, et utilisée sur Caravel, par exemple).

  • Ouvrir le panneau des macros (Fenêtre > Panneau des macros)
  • Coller dans la partie haute le script Python issu de py/cssBuild.py
  • Effacer le code précédent dans la fenêtre de sortie (en bas) s’il y en a, et cliquer sur lancer
  • Sélectionner tout le code de la fenêtre de sortie et le copier.

Puis…

  • Ouvrir le fichier css/udwi.css
  • Sélectionner tout le code du fichier, et le supprimer
  • Coller le code du presse-papier issu de la fenêtre de sortie des macros Python Le fichier css est à jour !

Update de la preview html

Utiliser le fichier py/htmlBuild.py et le fichier index.html

Avant d’exporter, nous allons générer le code qui va nous permettre de mettre à jour la preview HTML. Il ne faut pas sauter cette étape, car elle permet d’avoir une page de prévisualisation toujours à jour avec le dernier fichier de police. On peut considérer qu’une icone n’est pas vraiment ajoutée si elle n’est pas documentée !

  • Ouvrir le panneau des macros (Fenêtre > Panneau des macros)
  • Coller dans la partie haute le script Python issu de py/htmlBuild.py
  • Effacer le code précédent dans la fenêtre de sortie (en bas) s’il y en a, et cliquer sur lancer
  • Sélectionner tout le code de la fenêtre de sortie et le copier.

Puis…

  • Ouvrir le fichier index.html
  • Sélectionner tout le code du fichier, et le supprimer
  • Coller le code du presse-papier issu de la fenêtre de sortie des macros Python Le fichier html est maintenant à jour !

img-11

Export

Une fois fait tout cela l’export est très simple. On exportera dans /fonts. Quatre formats sont à exporter :

  • otf
  • woff
  • woff2
  • eot

Pour exporter le premier format, on fait Fichier > Exporter, on clique sur le premier onglet OTF, et on exporte

img-12

Pour les trois format suivants, on recommence la maœuvre, mais cette fois, on se rend sur l’onglet Webfont. On exporte.

Publication de la preview

Uploader les fichiers de la preview HTML sur le FTP de lab.usedesign.agency Automatiser ? Voir avec FX