les outils et langages numériques css, gérer la typographie
Le designer graphique engage pour ces créations de nombreuses polices de caractères qu'il doit installer sur son outil de travail par l'intermédiaire d'un gestionnaire de caractères (exemples basiques : Livre des polices sur Mac, Fontbase sur Windows). Adobe® est venu, avec l'évolution des versions de ses applications, perturber cette discipline en proposant son service en ligne Adobe Font mais cette disposition ne concerne que… les applications Adobe®.
Dans le domaine du support connecté, où on peut encore s'affranchir de l'incontournable prestataire majeur dans le domaine des applications, la gestion des polices de caractères demande au webdesigner de mettre encore les mains dans le moteur et de les installer selon deux services et deux méthodes distinctes :
1 - Le service en ligne Google Font
2 - Le service en ligne Adobe Font
3 - La règle CSS @font-face
1 - Le service en ligne Google Font
Le meilleur ami des développeurs, si bien nommé, a mis en ligne le service Google Font qui permet d’ajouter très simplement une police de caractères avec ses différents styles. Ce service pratique pour les développeurs (Google for better and for worse) est simple d'usage mais… il limite l'expérience et la singularité typographique très chère au designer graphique.
Restons humble et voyons comment l'installation d'une police de caractères, avec ses nombreux styles, peut s'effectuer.
Pour commencer, rendez-vous sur le site, baladez-vous jusqu’à trouver la police de caractères qui convient à votre projet.
L'interface d'accueil du site Google Font
Ensuite, cliquer sur la police que vous avez choisie ; Cette action vous conduira sur sa page spécifique. Là, il vous est présenté (en pied de page) tous les styles disponibles (View all styles) : le poids (la graisse, affichée par une valeur en centaine) et l’italique. Pour chaque style que vous allez utiliser sur le site, cliquer sur le « + » situé à côté du style désiré, ce qui va l’ajouter dans la fenêtre à droite du site.
La police Roboto avec ses styles, en pied de page
La sélection des styles à droite de l'interface
Attention, ne prenez que les polices et les styles dont vous avez besoin car en choisir trop augmentera le temps de chargement.
Lorsque la sélection est terminée, focalisez-vous sur la fenêtre latérale à droite où de haut en bas vous trouverez trois parties :
1 - Dans la partie supérieure intitulée Review, la police et ses styles choisis. Vous pouvez les retirer en cliquant sur le bouton « - ».
L'espace « Review »
2 - Dans la partie médiane intitulée Use on the web, deux options link ou @import. La première option propose des lignes de code que l'on copiera puis collera dans le <head> de notre page HTML. La seconde option soumet une ligne de code balisée par l'élément <style> que vous pouvez copier et coller dans le <head> de votre page HTML mais surtout dans votre feuille de styles CSS(utilisation plus efficace d'une typographie embarquée dans plusieurs pages de votre site).
L'espace « Use on the web » avec l'option « Link » sélectionnée
L'espace « Use on the web » avec l'option « @import » sélectionnée
3 - Enfin dans la partie inférieure intitulée CSS rules to specify families, vous trouverez la ligne de code à copier et coller dans les sélecteurs ciblés de votre feuille de styles CSS (exemples : body, article, p, etc.).
L'espace « CSS rules to specify families »
Voilà, vous pouvez, après cette installation, constater le résultat sur vos pages HTML, dans un navigateur.
2 - Le service en ligne Adobe Font
Une alternative à Google Font pour engager un choix plus spécifique est le service en ligne Adobe Font qui permet d’ajouter tout aussi simplement une police de caractères avec ses différents styles à votre projet web. Sa prise en main est toute aussi simple que le service précédent mais il oblige l'accès à une licence à la Creative Suite d'Adobe.
1 - L'installation d'une police de caractères, avec ses nombreux styles, peut s'effectuer et pour commencer, rendez-vous sur l'application Creative Cloud(livrée avec votre pack Adobe), puis cliquez sur l'icône située en haut à droite nommée Polices :
L'interface de l'application Creative Cloud d'Adobe
2 - Ensuite, faîtes dérouler la liste des polices disponibles puis cliquez sur celle que vous avez choisie pour votre projet ; Cette action affichera, sur la partie droite de la fenêtre, le ou les styles proposés. Dans cette partie de la fenêtre, en cliquant sur l'icône(située à droite du nom de la typographie) vous activez l'ouverture d'un navigateur web avec la page, en ligne, de votre police de caractères :
La police Ohno Blazeface dans l'application Creative Cloud
La police Ohno Blazeface dans le navigateur web, sur le site Adobe Font
Dans cette page web, choisissez le style qui vous convient puis cliquez sur l'icôneAjouter au projet web. Cette opération vous amène à créer un projet web avec cette police de caractères. Si c'est la première fois que vous activez ce service, vous vous trouverez face à cette invitation avec quelques recommandations :
L'espace « Review »
3 - Après avoir cliqué sur le bouton OK, dans le champ intitulé Créer ou ajouter à un projet existant… sélectionner + Créer un projet puis nommez-le exercice html(ici pour la démonstration). Enfin cliquez sur le bouton Créer :
Le champ surligné : « Créer ou ajouter à un projet existant… »
Le nommage du projet « exercice html »
3 - La dernière étape consiste en la récupération des éléments de code pour appliquer le style à votre corpus textuel. Deux méthodes se propose à vous : - La première vous propose le code <link rel="stylesheet" href="https://use.typekit.net/gad5uwb.css"> à intégrer par défaut dans le <head> de votre page HTML avec les éléments spécifiques font-family, font-weight et font-style à glisser dans votre feuille de styles :
Les styles avec le code à intégrer par défaut
- La seconde vous propose la règle CSS @import avec ses spécifications à intégrer par défaut dans le <style> de votre page HTML ou de votre feuille de styles CSS, avec les éléments spécifiques font-family, font-weight et font-style à glisser dans votre feuille de styles :
Les styles avec la règle CSS @import
Voilà, vous pouvez, après cette installation, constater le résultat sur vos pages HTML, dans un navigateur.
3 - La règle CSS @font-face
Si la police d’écriture que vous souhaitez ajouter n’est pas disponible sur Google Font ou que vous ne souhaitez pas utiliser le service, il est possible d’ajouter manuellement la police de caractères typographiques (ici dans l'exemple c'est le Roboto) dans la feuille de styles CSS. C’est assez simple, mais de bonnes pratiques sont à prendre en compte.
L’ajout de la police de caractères typographiques se réalise avec la règle @font-face, de la manière suivante :
Puis, cette police de caractères est affectée au sélecteur body.
Vous noterez une particularité pour le format qui affiche, ici, eot, woff, woof2 et truetype. En effet, il existe plusieurs formats : eot, svg, ttf, woff, woff2 pour les plus utilisés. Cette diversité est utile en fonction du système d'exploitation. Notez que plus vous mettez de formats différents, plus il sera facile pour le navigateur de choisir le fichier qui correspond au système d'exploitation.
Si cette méthode vous paraît absconse, vous pouvez avoir recours à des utilitaires en ligne qui rédigent les lignes de code pour vous (fingers in the nose) après avoir téléverser votre police de caractères dans leurs espaces de travail. C'est le cas de Transfonter diffusé par OddLabs et aussi de Webfont Generator produit par Font Squirrel.
Il vous suffit de téléverser votre police de caractères, de la convertir et de télécharger le résultat. Au téléchargement vous récupérez les fichiers typographiques convertis et la feuille de styles afférente. Webfont Generator vous offre en plus un fichier specimen où vous pouvez observer votre police de caractères sous de nombreux corps différents. Et en plus, dans l'onglet « Installing Webfonts » vous disposez de la marche à suivre pour son installation dans votre site :
(située à droite du nom de la typographie) vous activez l'ouverture d'un navigateur web avec la page, en ligne, de votre police de caractères :
Ajouter au projet web. Cette opération vous amène à créer un projet web avec cette police de caractères. Si c'est la première fois que vous activez ce service, vous vous trouverez face à cette invitation avec quelques recommandations :
