Créer une police Web avec Glyphs Mini

Exporter une police WOFF

Afin de créer une police Web, vous aurez besoin d’un fichier avec le suffixe .woff ou .woff2. WOFF, c’est quoi déjà? Il s’agit du ‘Web Open Font Format’, soit le format Web Open Font (WOFF), qui est un format de police utilisé pour les pages web. Il a été développé en 2009 par Erik van Blokland, Tal Leming et Jonathan Kewand et il est maintenant une recommandation du World Wide Web Consortium (W3C). WOFF est essentiellement un format OpenType ou TrueType avec en plus de la compression et des métadonnées additionnelles. WOFF2 une variante de WOFF, serait plus performante et compressée davantage. Vous pouvez vérifier quels navigateurs Web supportent WOFF et WOFF2, et vous verrez que tous les navigateurs récents s’en sortent plutôt bien.

Pour exporter votre police sous le format WOFF, sélectionnez Fichier > Exporter (Cmd-E) puis choisissez le type de fichier Police Web (WOFF). Glyphs Mini exportera un fichier WOFF, et, à partir de la version 2.1 et plus récentes, un fichier WOFF2.



Vous pouvez choisir de faire le hinting automatique de votre police, si vous le désirez. L’option Hinting automatique applique l’algorithme de hinting automatique AFDKO à tous les glyphes qui n’ont pas reçus de hints manuels. Cette option s’attend à ce que les épaisseurs des traits et les zones d’alignement soient définies correctement, assurez-vous donc d’avoir les bonnes mesures dans vos Informations de police (Cmd-I). Décochez cette option pour les polices qui ne doivent pas avoir de hinting, ou encore pour accélérer l’exportation lorsque vous voulez simplement faire des tests sur votre police.

Ai-je besoin de hinting? Le hinting n’est approprié que pour les polices plutôt ‘régulières’ dessinées pour la lecture dans de petits corps. Le hinting contribue à déformer vos contours afin qu’ils s’ajustent mieux sur la grille de pixels, ce qui maintient ainsi un minimum de lisibilité dans les basses résolutions, au détriment de la reproduction fidèle de vos contours. En d’autres mots, le hinting n’est pas pertinent pour les polices de titrage, les polices aux contours complexes (soit tout ce qui a un grand nombre de nœuds), ou des polices scriptes.

L’option Supprimer le chevauchement applique un algorithme afin de supprimer les chevauchements de tracés au moment de l’exportation, de façon semblable au filtre Supprimer le chevauchement. Vous pouvez désélectionner cette option lors de tests, afin d’accélérer l’exportation ou encore si vous avez déjà supprimé les chevauchements dans votre fichier.

L’option Destination de l’exportation vous permet de définir un emplacement par défaut dans lequel les polices seront exportées. Si vous ne définissez pas une destination, Glyphs Mini fera surgir un dialogue de sauvegarde. Mais faites attention, exporter votre police écrasera toutes instances antérieures du même nom qui se trouve dans le même emplacement. En fait, cela peut vous être utile si vous utilisez le dossier Adobe Fonts comme destination de l’exportation.

Maintenir une petite taille de fichier

Le but principal ici est de maintenir la taille du fichier aussi petite que possible. Pour commencer, assurez-vous que vous exportez seulement les glyphes que vous voulez afficher. Pour cela, pour chacun des glyphes que vous ne voulez pas exporter, décochez l’option Exporter du menu contextuel en mode Édition, ou encore dans la barre latérale en mode Police.



En mode aperçu Police, les glyphes non exportables seront affichés avec une diagonale rouge barrant la case du glyphe.




Vous pouvez également vous assurer d’utiliser aussi peu de nœuds que possible dans vos glyphes.



Tester vos polices dans votre navigateur

Afin d’apprécier votre fichier WOFF en action, vous aurez besoin de code HTML et CSS pour faire votre test.

Pour citer Wikipédia, HTML signifie HyperText Markup Language est le langage de balisage standard pour la création de pages web. Avec le HTML, les polices, images et autres objets peuvent être intégrés dans la page. Quand à CSS, cela signifie Cascading Style Sheets, et il s’agit d’un langage de style de page utilisé pour décrire la présentation d’un document écrit en langage de balisage. CSS est conçu principalement pour permettre la séparation du contenu d’un document de sa présentation, ce qui inclut les aspects comme la mise en page, les couleurs et les polices. Le CSS peut être intégré dans un fichier HTML.

Vous pouvez tester votre police dans votre navigateur en copiant-collant ce qui suit dans un éditeur de texte en clair de votre choix (TextMate, SublimeText, Atom, ou TextWrangler sont des choix populaires):

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <title>your font</title>
    <style type="text/css" media="screen">
        @font-face { font-family: 'yourfont-Regular'; src: url('yourfont-Regular.woff'); }

        body {
            font-family: "yourfont-Regular";
            font-feature-settings: "kern" on, "liga" on;
            -moz-font-feature-settings: "kern" on, "liga" on;
            -webkit-font-feature-settings: "kern" on, "liga" on;
            -ms-font-feature-settings: "kern" on, "liga" on;
            -o-font-feature-settings: "kern" on, "liga" on;
        }
        p { padding: 5px; margin: 10px; }
        p#smallParagraph { font-size: 12pt; }
        p#largeParagraph { font-size: 32pt; }
        p#veryLargeParagraph { font-size: 100pt; }
    </style>
</head>
<body>
    <p id="smallParagraph">abcdefghijklmnopqrstuvwxyz</p>
    <p id="largeParagraph">abcdefghijklmnopqrstuvwxyz</p>
    <p id="veryLargeParagraph">abcdefghijklmnopqrstuvwxyz</p>
</body>

Dans le code HTML, remplacez toutes les instances yourfont avec le nom de votre police. Sentez-vous libre d’éditer le CSS et d’opter pour les corps de police que vous souhaitez afficher. Si vous voulez afficher tous les glyphes exportables de votre police, voici un truc: ajoutez un Filtre futé dans Glyphs Mini en cliquant sur la roue dentée dans le coin en bas à gauche en mode aperçu de Police. Ajoutez deux règles à votre nouveau filtre: Possède un Unicode et Exporter le glyphe. Sélectionnez l’option Oui pour les deux.



Dans la barre latérale, sélectionnez le filtre que vous venez tout juste de créer. Sélectionnez ensuite tous les glyphes affichés dans l’onglet Police et choisissez Édition > Copier (Cmd-C), puis collez-les ensuite dans votre fichier de texte au lieu de abcdefghijklmnopqrstuvwxyz. Sauvegardez le fichier dans le même dossier que votre WOFF en lui attribuant un suffixe .html:

Faites ensuite glisser le fichier dans une fenêtre de navigateur, et voilà:

Il existe quelques sites Web qui vous permettent de tester votre police en ligne. Nos favoris sont:

• Wakamai Fondue du designer et codeur hollandais Roel Nieskens
• Font Drop du designer allemand de police de caractères Viktor Nübel et son frère Clemens Nübel

Il vous suffit de faire glisser votre fichier WOFF et de jeter un coup d’œil à votre police Web. Si vous repérez une erreur dans votre police, réparez-la dans Glyphs Mini et exportez-la à nouveau. Actualisez ensuite les pages tests et vous devriez voir la version mise à jour de votre police.

Amusez-vous bien!

Police utilisée en exemple: Bussi de Stella Chupik

Mise à jour 2017-03-21: clarifications mineures dans le réglage HTML, deux captures d’écran supplémentaires.
Mise à jour 2019-09-23: mise à jour des pages tests des polices Web, ajout de notes au sujet de WOFF2 et du hinting.
Mise à jour 2020-03-11: corrections d’erreurs typographiques.

Traduction française de Nathalie Dumont.