Comment faire votre propre icône webfont

Dans cet article, je vais examiner la science derrière les icônes d'interface utilisateur réussies avant de vous apprendre à créer votre propre police d'icône intégrable .

De la conception des icônes individuelles à leur conversion pour @font-face l'intégration, et même la concession de licences pour la distribution, nous utiliserons uniquement des logiciels gratuits et des services en ligne. Que diriez-vous de ça? Vous n'aurez pas besoin de vous fier aux connaissances ésotériques requises pour créer des polices alphanumériques efficaces. juste un oeil pour concevoir des choses qui peuvent paraître très, très petites.

En fin de compte, vous devriez vous lancer dans un processus de fabrication d'éléments de conception qui vont bien au-delà de la fabrication d'icônes simples.

Avant de continuer, il faut dire quelque chose sur ce que nous essayons exactement de achieve en utilisant des icônes dans nos conceptions en premier lieu, et ce qui rend une icône plus réussie que la suivante. Théorie avant application. Pour ce faire, nous devons considérer le rôle de l'icône dans la sémiologie.

Qu'est-ce qui fait une bonne icône?

Sémiologie , au sens large, est l'étude des systèmes de signes , comment nous contribuons à leur formation et à leur maintenance, et leur impact sur notre compréhension du monde à l'intérieur et à l'extérieur de nous.

Chaque fois que vous considérez une partie de votre travail de conception du point de vue de ce signifie - ce qu’il dit à votre auditoire ou quels concepts il rappelle pour lui - vous considérez votre conception comme un sémioticien. Bien que la sémiologie, tout comme la linguistique, couvre la langue, il y a beaucoup plus de choses sur un site Web qui "disent" quelque chose sans mots, comme les couleurs, les caractères et les formes que nous appelons des icônes . Il faut se méfier de ce que ces choses disent avoir une dimension culturelle forte. En Chine , la couleur rouge peut signifier la bonne fortune alors que, dans beaucoup de pays occidentaux, elle sert à désigner le danger.

(Basé sur une image par Ella marron )

Le terme "icône" a une signification particulière dans le domaine de la sémiologie. Une icône est un artefact qui signifie quelque chose en le ressemblant. Prenez, par exemple, une icône représentant une épingle de carte . Comme une forme qui ressemble à une "vraie" épinglette, elle est capable de la signifier. À son tour, la véritable épingle de la carte évoque toutes sortes de concepts significatifs . Parmi ceux-ci figurent des concepts abstraits tels que l'emplacement, ainsi que des concepts moins abstraits, comme la carte à laquelle l'épingle pourrait appartenir.

Certaines soi-disant icônes ne sont pas vraiment iconiques. L' icône RSS omniprésente, avec son point et ses deux segments de cercle concentriques, ne ressemble pas davantage à la syndication que les mots "Really Simple Syndication" lui ressemblent. La configuration des formes qui constituent l'icône RSS signifie RSS par convention seule; nous avons convenu que c'est pour cela qu'ils sont. Une icône RSS s'appelle plus correctement un symbole RSS .

À ce jour, j'espère que nous avons établi que les icônes Web réussies doivent répondre à l'un ou aux deux critères suivants:

Une forte ressemblance avec une chose réelle, par exemple une icône d'impression qui ressemble à une imprimante réelle
Établissement et, par conséquent, familiarité en tant que symbole reconnaissable dans le système de signalisation

Les polices d'icônes gagnent en popularité

Les icônes ont longtemps été considérées comme un bon moyen d'améliorer les conceptions d'interface utilisateur, car elles fournissent un raccourci visuel qui aide à comprendre un message par ailleurs purement textuel. Des feuilles d'images d'icônes circulent dans la communauté de la conception Web, comme la contrebande, chaque jeu promettant de rendre votre conception plus brillante, plus attrayante et plus cliquable que la précédente.

Par rapport aux images, l'idée d'utiliser des polices intégrées pour les icônes est une idée relativement nouvelle. Cependant, c’est une technologie qui gagne en popularité en raison des nombreux avantages inhérents à l’image (ou background-image ) méthode. je écrit au sujet de certains de ces avantages sur mon petit blog au début du mois de septembre. Chris Coyier évidemment eu une idée similaire, introduisant l'idée à un public beaucoup ( beaucoup, beaucoup plus) semaines plus tard. S'appuyant sur les deux articles et d'autres, j'ai compilé cette liste complète de fonctionnalités:

Ils sont facilement redimensionnés sans dégradation (car ce sont essentiellement des vecteurs)
Recolorer l'icône est aussi trivial que de recolorer le texte. Par exemple, color: orange pour une icône RSS
De nombreuses icônes sont regroupées dans un seul fichier, nécessitant une seule requête http
Comme le souligne Chris, ce sont des formes qui ont des «knock-out» transparents qui fonctionnent dans les navigateurs dès IE6 (contrairement aux fichiers PNG alpha).
Pour les icônes devant apparaître à côté du texte, l'alignement et le retour à la ligne ne sont pas des problèmes (car ils sont du texte)
Vous pouvez appliquer des effets CSS3 via text-shadow et background-clip:text qui respectent la forme du glyphe
Contrairement à SVG, la prise en charge multi-navigateur est facile à réaliser

Problèmes

Dans les mots de Chris, utiliser des polices pour les icônes est une bonne idée, je vous le dis . Néanmoins, le statu quo concernant l'utilisation des polices d'icônes n'est pas idéal. Tout d'abord, la plupart des polices de qualité disponibles, appelées choses comme Pictos , Fico , Klepto, Cheetos, Ponyo et Sailor Moon (J'ai peut-être mal compris), sont des polices payantes. En pratique, cela signifie qu'il y a vraiment deux problèmes :

Vous pourriez avoir à vous séparer de l'argent
Que vous deviez vous séparer de l'argent ou non, vous devrez accepter le travail de conception sale de quelqu'un d'autre

Mis à part les programmes automatisés de robot, je suppose que ce sont surtout les concepteurs Web qui liront cet article. Je suis un concepteur moi-même et je ne pense pas être le seul à ressentir l'idée de devoir compromettre mon propre design en m'appuyant sur le travail de quelqu'un d'autre. Naturellement, je suis encore moins séduit par l'idée de payer pour ce privilège. Je sais quelles icônes je veux utiliser et je sais précisément comment je veux les adapter à ma conception globale. Je veux ce contrôle .

Après quelques recherches, j'ai finalement été introduit aux possibilités de Inkscape l' éditeur de polices SVG . Avec un peu de pratique avec Inkscape et l'aide d'un convertisseur en ligne pour transformer ma police SVG en une TTF, j'ai pu créer "Heydings". Cette police est maintenant incluse dans La liste de Simurai (lié à l'article de Coyier). Je n'essaie pas de vous vendre ma police (elle est gratuite de toute façon) mais je pense que cela constitue une très bonne preuve de concept :

Faire des glyphes avec Inkscape

Configuration d'Inkscape

Commençons par Téléchargement et installer Inkscape. Vous devez également utiliser mon modèle de démarrage de police d’icône, situé dans le dossier des ressources de ce dépôt GitHub (plus sur ce projet GitHub plus tard). Une fois que vous avez ouvert ce fichier dans votre nouvelle installation Inkscape, vous devez configurer votre espace de travail en ouvrant les fenêtres suivantes à partir du menu principal:

OBJET → REMPLIR ET COURSE
OBJET → ALIGNER ET DISTRIBUER
TEXTE → EDITEUR DE POLICE SVG

Dans le volet Éditeur de polices SVG, cliquez sur "Police 1" sous "Police". Votre espace de travail devrait maintenant ressembler à cette capture d'écran:

Il convient de souligner que le ligne de base guide n'est pas en dessous de la limite inférieure du canevas par erreur: pour des raisons connues de quelqu'un d'autre, vos icônes doivent très légèrement dépasser le bas du canevas si vous souhaitez qu'elles partagent la même ligne de base que les polices adjacentes. Je l'ai testé avec Georgia, Arial et un certain nombre de polices Web.

Faire votre premier glyphe

Pour définir le glyphe, cliquez sur l'onglet Glyphes dans le volet Éditeur de polices SVG , puis cliquez sur le bouton Ajouter un glyphe dans la partie inférieure du volet. Ce n'est pas immédiatement clair lors de la première inspection, mais si vous cliquez sur votre glyphe ("Glyph 1"), un champ apparaîtra vous permettant de saisir le caractère auquel vous souhaitez attribuer votre icône. Nous allons d'abord faire une forme d'étoile simple, alors je vous recommande de saisir le caractère "s", "S" ou "*":

Maintenant que nous avons défini le caractère correspondant au glyphe, nous devons créer le glyphe lui-même. Comme nous ne faisons que créer une étoile cette fois, nous devrions sélectionner l' outil Étoiles et Polygones d' Inkscape dans la barre d'outils de gauche et dessiner une étoile dans le canevas. Vous remarquerez que cet outil est livré avec des options qui vous permettent de modifier l'apparence de l'étoile. Dans mon exemple, j'ai choisi 5 angles, un ratio de rayon de 0,5 et une valeur arrondie de 0,1.

Centrez l'étoile horizontalement à l'aide du panneau Aligner et distribuer (qui peut être masqué sous l' éditeur de polices SVG ) et faites glisser la forme vers le bas pour respecter la ligne de base. Avec la grille désactivée, le canevas doit ressembler à ceci:

Les glyphes de notre police d'icônes ne sont que des formes; formes sans couleurs, couches ou dégradés. Donc, pour faire de notre étoile un candidat légitime pour notre police, nous devons la convertir d'un objet en une forme basée sur un chemin. Pour ce faire, sélectionnez l'étoile et choisissez PATH → OBJECT TO PATH dans le menu principal. Maintenant, avec l'étoile sélectionnée, nous pouvons aller dans notre éditeur de polices SVG , mettre en évidence le glyphe "s" applicable et appuyer sur le bouton Obtenir les courbes à partir de la sélection :

Lorsque vous entrez "s" dans le champ Sample Text , votre étoile devrait maintenant apparaître comme un aperçu, comme ceci:

Création d'icônes plus complexes

Vous avez maintenant créé votre premier glyphe de police SVG évolutif. En utilisant les options du volet Remplissage et contour , en modifiant les nœuds de chemin et en combinant des objets et des traits, vous pourrez créer des conceptions d’icône beaucoup plus ambitieuses. Je ne veux pas entrer dans un tutoriel complet sur Inkscape, car nous avons beaucoup à couvrir, mais suivre ces règles simples vous sera très utile:

S'en tenir à l'utilisation de traits noirs et de remplissages, ne serait-ce que pour vous rappeler que les icônes ne sont que des formes, pas des graphiques vectoriels complexes. La coloration de l'icône est possible dans le produit final en utilisant CSS.
Tous les objets et traits (lignes) doivent être convertis en chemins en utilisant soit PATH → OBJECT TO PATH ou PATH → STROKE TO PATH
Plusieurs objets et / ou traits utilisés pour créer un glyphe d'une icône doivent être combinés à l'aide de PATH → COMBINE (ou, dans certaines circonstances, PATH → UNION)
Pour découper des formes hors des formes (comme utiliser un emporte-pièce), placez la forme qui va créer le "KO" sur la forme principale, sélectionnez les deux et choisissez PATH → DIFFERENCE. Les zones blanches sur le noir qui ressemblent à des "KO" ne suffiront pas, comme vous le découvrirez lorsque vous appuierez sur Obtenir les courbes de la sélection. Voir règle 1.

Préparer votre police pour l'incorporation

Imaginez que vous ayez créé plusieurs icônes utiles pour votre police en répétant la méthode de création de glyphes que je viens de décrire et en enregistrant le fichier sous le nom myicons.svg . Maintenant, vous voudrez préparer cette bibliothèque d'icônes pour l'utiliser dans les pages Web.

Conversion du SVG en TTF

La première mesure à prendre est de convertir le Police SVG dans un format plus familier et polyvalent. TTF est le format prééminent pour l'installation locale ainsi que la distribution. Il fournit également une bonne base pour la reconversion à rencontrer @font-face exigences. Les services en ligne qui vous permettent de convertir les polices entre les formats incluent http://onlinefontconverter.com/ , http://www.fontconverter.org/ et http://www.font2web.com/ . Mon préféré, cependant, est http://www.freefontconverter.com/ parce que je ne suis pas mis en file d'attente et je ne l'ai jamais connu pour retourner des problèmes.

Je ne vous traiterai pas en expliquant comment utiliser cette ressource. Le champ de téléchargement de fichiers successifs, l'élément select et le gigantesque bouton Convert parlent d'eux-mêmes, vraiment.

Modification des méta-informations de la police

Maintenant que vous avez le TTF dans votre main, je vous recommande de modifier les métadonnées générées. Renommer, attribuer et décrire la police à votre satisfaction le rend prêt pour l' installation, l'intégration et la distribution . C'est aussi un moyen de montrer que la police est votre propre travail. Les lecteurs exécutant Windows ont la possibilité d’utiliser le grand son trompeur Éditeur de propriétés de polices Microsoft ou les free-for-x-days Typograf . Pour les utilisateurs Apple et Linux, j'implore ceux qui sont mieux informés que moi pour aider dans les commentaires.

L'éditeur de propriétés de polices maladroit mais réparable

Remarque importante: bien que l'éditeur de propriétés de police de Microsoft vous permette d'ajouter des informations sur l'auteur, la description et la licence, il ne semble pas vous permettre de modifier les données de base telles que le nom de la police et le nom du postscript . Ces champs sont désactivés. Si vous utilisez ce logiciel particulier, vous devrez localiser et modifier les valeurs interdites dans le code SVG avant la conversion TTF. Ouvrez le SVG original dans votre éditeur de texte préféré (j'utilise Bloc-notes ++ ) et éditez les éléments suivants:

Nom de la police: Trouvé dans la balise, font-family attribut

Nom Postscript: Trouvé dans la balise, id attribut

Description: Vous devez ajouter une description (auteur, licence, etc.) dans la balise. S'il vous plaît noter que ce n'est pas équivalent au texte de description TTF et ne sera pas préservé par la conversion; vous devrez ajouter la description TTF séparément.

Rendre la police intégrable

Une fois que vous avez installé le TTF sur votre système local et que vous l’avez prévisualisé un peu pour vous assurer que rien ne s’est pas passé, il est temps de le lancer via Font Squirrel. @ générateur de polices de caractères . Pour rendre le code de sortie aussi efficace que possible, il existe quelques options à noter dans le mode expert du générateur:

Sous-ensemble: L'option de sous-ensemble vous permet d'inclure uniquement les caractères que vous avez délégués, réduisant ainsi la taille du fichier.

Enlever le crénage: vos icônes apparaîtront presque toujours isolément. Ainsi, le crénage (ajout d’informations sur la proximité des personnages) n’est pas nécessaire. Cela réduirait également la taille du fichier.

WebOnly ™ : Si vous êtes évangélique au sujet des personnes qui utilisent votre police comme prévu - et ne revenez pas à créer des images à partir des glyphes dans Photoshonk - vous pouvez sélectionner cette option. Cela pourrait également mieux convenir à votre plan de licence. Je vais couvrir les licences maintenant.

Distribuer votre police

Si vous êtes intéressé par la publication de votre police, il est conseillé de lui donner une licence. De nombreux sites Web de polices ne porteront pas votre police sans celle-ci. Puisque nous avons utilisé des logiciels libres et gratuits pour créer les icônes, il est normal que nous les distribuions en tant que tels.

Il existe de nombreuses options de licences disponibles et leur enquête est parfois complexe. le Licence publique générale GNU est parfaitement acceptable, mais vous voudrez peut-être envisager la SIL Open Font License . Le principal avantage de cette licence est la fourniture d'un nom de police réservé : les autres concepteurs sont autorisés à modifier votre police, à condition qu'ils l'appellent différemment. En pratique, cela signifie que les crimes contre la conception d’icône ne peuvent être commis «en votre nom».

Dans le cas de l'une ou l'autre de ces licences, vous devez inclure une version dans un fichier texte, insérer la mention de copyright et un lien vers l'URL complète de la licence dans la méta de la police. Visitez les pages de licences respectives (liées ci-dessus) pour des instructions plus spécifiques.

La fin du sprinter CSS

Pourquoi arrêter de créer des icônes génériques en utilisant les polices SVG? La possibilité de créer des icônes permet de créer des formes, des éléments de marque et des décorations spécifiques à un site. Comme Sprites CSS , tous ces éléments visuels peuvent être conservés dans un seul fichier, réduisant les appels du serveur à une requête http unique . Contrairement aux sprites CSS, les éléments sont redimensionnables et ne dépendent pas des coordonnées de position ( background-position valeurs) à afficher correctement. Cela les rend éminemment mieux adapté à la conception réactive .

Faisons comme si je choisissais d’utiliser une police SVG pour couvrir certains éléments de base de ma conception. steampunk -comme Blog . Un simple rendu de tableau HTML des conceptions de composants ressemblerait à ceci:

Une des meilleures choses à propos de cette approche est la polyvalence. Par exemple, la deuxième forme de pignon de gauche pourrait être utilisée à la fois comme une minuscule conception de point et une décoration de fond géante et abstraite. La coloration est aussi simple que d'utiliser color:maroon , mais il n'y a pas besoin d'adhérer à des couleurs plates; une multitude d'effets CSS3 peuvent être utilisés pour ajouter de la texture et de la tactilité. Pour un peu d’inspiration pour commencer, examinez cette excellente galerie de polices Web améliorées par CSS3 .

Une note rapide sur les lecteurs d'écran

L’un des problèmes liés à l’utilisation des polices pour afficher des éléments visuels de cette manière est l’impact sur Lecteur d'écran sortie. Un visiteur du site qui lit visuellement verra des rouages, des flèches, etc., mais un lecteur d'écran insiste pour lire les caractères qui désignent ces dessins. Pour les utilisations d'éléments de police SVG qui sont décoratifs, je recommande la suggestion de Coyier: Assignez les vecteurs au Zone à usage privé supplémentaire d'Unicode. Ces caractères ne doivent pas être lus par les lecteurs.

Une icône collaborative webfont

En tant que mentor JavaScript, Rupert m'a fait remarquer l'autre jour que l'utilisation de polices SVG pour créer des jeux d'icônes offre une opportunité intéressante de collaboration. Vous voyez, le code SVG - qui est une forme de XML - est hautement standardisé et facilement lisible par l'homme. C'est exactement le type de code source adapté au développement utilisant un service de "codage social" tel que GitHub .

L'idée a résonné en moi pour ses implications sémiotiques: si l'appréhension d'une icône est déterminée par consensus , alors le consensus devrait aussi jouer un rôle dans sa formation. En collaborant sur notre icône "système de signe", seules les conceptions d’icônes les plus archétypes devraient apparaître. Nous devrions être en mesure de créer des vocabulaires d’icônes qui appartiennent véritablement aux communautés pour lesquelles ils devraient signifier quelque chose.

J'ai créé un dépôt public GitHub pour favoriser cette idée. Appelé Communauté Icon Font , la base de code du référentiel n'est pas complexe: une inspection minutieuse du didacticiel Inkscape précédent et une lecture rapide du page du projet devrait vous donner tout ce dont vous avez besoin pour vous impliquer. Si vous êtes nouveau sur GitHub, essayez de regarder leur pages d'aide ou demander à votre technicien de quartier (c'est ce que je fais).

typographie création de sites web icônes les polices conception d'icône webfonts Inkscape

Comment faire votre propre icône Webfont