Polices et polices d’icônes

Vocabulaire: polices de caractères et fontes

À l’origine, une fonte de caractères (on dit communément fonte, et en anglais font) est une représentation d’un alphabet ayant un corps (c’est-à-dire une taille) donné(e), et une graisse (normal, gras…) donnée. Helvetica Bold Italic 12pt est une fonte, par exemple.

Une police de caractères, aussi appelée police d’écriture, rassemble l’ensemble des fontes d’une même famille. Helvetica, Arial ou Times sont des polices de caractères.

Les polices sur le web

Pour pouvoir être affichées et utilisées sur un site web, une police doit exister au préalable sur le poste du client, ou être téléchargée via CSS lors de la visite sur le site.

Les navigateurs utilisent les polices qui sont installées sur la machine cliente. Comme il existe beaucoup de configurations différentes (Windows, Mac, Linux…) et que chaque configuration possède son propre jeu de police de base (par exemple, Arial est fournie avec Windows mais pas avec OSX et inversement pour la Helvetica), on fournit des listes de polices plus ou moins similaires et compatibles pour assurer un même rendu pour tout le monde.

Serif, Sans-serif, Monospace

Quand aucune des polices indiquées n’est présente sur la machine cliente, on peut quand même lui spécifier quelle catégorie de police utiliser.

• serif : police à empattement
• sans-serif : police sans empattement (bâtons)
• monospace :  police à chasse fixe (tous les caractères sont de la même largeur)

Les polices « Safe fonts »

Un certain nombre de polices considérées comme sécurisées, c’est à dire qu’on peut considérer qu’elles sont présentes par défaut sur les postes clients de nos visiteurs.

Voici la liste officielle :

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Vous pouvez en retrouver le rendu sur le site du W3School : https://www.w3schools.com/cssref/css_websafe_fonts.asp

Les différents formats de police web

EOT, TTF, WOFF, SVG, WOFF2… Tant de choix… Et malheureusement, aucun ne peut convenir à tous les navigateurs. Il va donc falloir faite un mix de formats pour que vos typo soient prises en compte sur tous les navigateurs. Voyons déjà à quoi correspondent ces différents formats. Nous verrons ensuite avec quelles versions des navigateurs ils sont compatibles.

TTF : TrueType Fonts

Le format TrueType font (TTF) a été développé à la fin des années 80 par Apple et Microsoft. TTF a longtemps été le format le plus utilisé par les opérateurs systèmes Mac et Windows. Le principal désavantage de ce type de fichier est qu’il n’est pas compressé et pèse donc plus lourd q’un format compressé. Gardez toujours en tête qu’importer des typo peut peser lourd au chargement de vos pages web donc n’en abusez pas, 2-3 typo pour un site suffisent largement.

OTF : OpenType Fonts

Le format OpenType Font (OTF) est également un format non compressé. OTF est une évolution de TTF, résultat d’un partenariat entre Adobe et Microsoft. OTF est aujourd’hui enregistré comme une marque déposée de Microsoft mais se trouve sur les Mac et PC sous Windows. C’est un format largement utilisé qui contient plus de 65 000 caractères (écran et impression), ce qui donne pas mal de latitude aux graphistes.

WOFF / WOFF2 : Web Open Font Format

WOFF est un format purement web. Il a été développé en 2009, notamment par Mozilla et fait l’objet aujourd’hui d’une recommandation W3C. WOFF est essentiellement basée sur de l’OTF et du TTF mais en mode compressé avec des méta supplémentaires, ce qui permet un affichage plus rapide que d’autres formats, même quand la bande passante est restreinte. On aime beaucoup car il est compatible aec tous les navigateurs.
WOFF2 est une évolution de WOFF, avec encore une meilleure compression que l’original, un gain d’environ 30%.

EOT : Embedded OpenType Fonts

Le format EOT est une compression du format OTF, spécialement designé pour le web par Microsoft. Il n’est plus vraiment utilisé car il a été fait pour Internet Explorer.

SVG : Scalable Vector Graphics Fonts

SVG est un format de police vectorielle utilisant les spécifications du format de représentation SVG. C’est un format très léger, il est donc idéal sur mobile, mais essentiellement IOS.
SVGZ est la version zippée de SVG.

Utiliser une autre police

Vous pouvez utiliser une police de caractère non standard sur votre site web.

Si vous souhaitez fournir le fichier qui décrit votre nouvelle police dans votre site (comme une image par exemple), vous pouvez installer une police dans votre arborresscence, la charger dans vos fichiers CSS, et l’appliquer à votre HTML.

Donc, vous aurez des fichiers représentant la font dans un de vos dossier :

• mafont.ttf
• mafont.woff
• mafont.woff2
• mafont.eot
• mafont.svg

Attention, tous les fichiers sont utiles car ils sont fait pour les différents navigateurs.

Ensuite vous importez vos fichiers de font dans votre CSS grâce à la propriété @font-face :

@font-face{
  font-display: swap;
  font-family: 'mafont';
  src:url('mafont.eot');
  src:url('mafont.eot') format('embedded-opentype'),
      url('mafont.woff2') format('woff2'),
      url('mafont.woff') format('woff'),
      url('mafont.ttf') format('truetype'),
      url('mafont.svg') format('svg');
  font-weight:normal;
  font-style:normal;
}

Et vous pourrez utiliser votre nouvelle police dans votre page web via la propriété font-family :

h1{
  font-family: mafont, sans-serif;
}

On n’oublie pas de placer les polices génériques derrière, au cas ou le navigateur n’arrive pas à charger celle que vous avez fourni en local.

Les polices « Google web fonts »

Google Fonts (appelé Google Webfonts avant juin 2013) est un service d’hébergement gratuit de polices d’écritures pour le Web, démarré en 2010. Les polices Google Fonts sont aussi disponibles sur les services similaires SkyFonts de Monotype, ainsi qu’Edge Web Fonts et Typekit d’Adobe.

L’usage des polices de caractères Google engendre la collecte de données personnelles qui sont soumises au RGPD et nécessitent des précisions entre autres sur les données collectées et leur usages.

L’utilisation d’une telle police est soumise à deux étapes :

1. Trouvez la Google Font qui vous convient : Allez ici https://fonts.google.com, parcourez les polices avec les filtres proposés et choisissez-en une en cliquant sur Quick-use.
2. Installez la Google Web Font choisie : Une fois la police Google choisie, vous aurez 3 éléments à définir/paramétrer :
   1. Choisissez le style de la police et les graisses dont vous aurez besoin,
   1. Copiez le bout de code dans votre page, dans l’élément head
   2. Utilisez la police en déclarant la propriété CSS pour l’élément voulu : font-family: 'mafont', sans-serif;

Les caractères

Taille des caractères

Il est illusoire de penser que l’on pourra contrôler totalement, pour tous les utilisateurs, l’aspect et en particulier la taille du texte. Les navigateurs proposent souvent des fonctionnalités pour augmenter ou réduire la taille du texte, quand bien même celle-ci serait fixée en pixels, par exemple. De plus, les navigateurs mobiles modifient souvent le rendu de ce même texte pour en faciliter la lecture.

Il est donc recommandé de s’adapter à cet état de fait, qui a par ailleurs l’immense avantage de rendre les pages web plus accessibles pour tous ! On pourra donc vouloir gérer la taille du texte avec des unités relatives, telles que les em et les pourcentages. Ainsi la propriété CSS font-size permettra de déclarer une taille de police grâce à différentes unités.

Les unités

Le W3C propose 5 unités absolues à utiliser avec la propriété font-size :

• pt Le point,
• pc Le pica (12 points),
• cm Le centimètre,
• mm Le millimètre,
• in Le pouce (inch)

Bien entendu ces type d’unités n’ont pas toujours de signification uniforme sur un écran d’ordinateur puisque celui-ci dépendra de sa résolution et de sa dimension (diagonale). La théorie les voue à l’impression, elles sont proportionnelles entre elles : 1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc. Vous trouverez un tableau de conversion approximatif des points en pixels.

On leur préférera idéalement des unités relatives :

• em Le cadratin qui se base sur la hauteur de la police.
• rem Équivalent de em mais utilisant comme base de calcul la valeur de root (html).
• ex Qui se base sur la hauteur de la lettre minuscule « x » de la police et dont l’interprétation diffère selon les navigateurs
• % Le pourcentage, équivalent du cadratin (em)
• px Le pixel

L’idéal est donc d’attribuer aux éléments de la page des valeurs proportionnelles au corps de base, grâce aux unités em ou %. En appliquant font-size:2em; aux paragraphes, ceux-ci posséderont une police deux fois plus grande que le corps de base (celui du body ou du parent). Sachez que les deux déclarations suivantes sont équivalentes :

font-size: 2em;

font-size: 200%;

Le W3C définit aussi des tailles absolues à l’aide des mots-clés suivants :

• xx-small (6,9pt)
• x-small (8,3pt)
• small (10pt)
• medium (12pt)
• large (14,4pt)
• x-large (17,28pt)
• xx-large (20,7pt)

Exemple de bonne pratique

/* base font-size corresponds to 10px and is adapted to rem unit */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.4em; /* equiv 14px */
  line-height: 1.5; /* adapt to your design */
}

Ligatures

On sait que les navigateurs ne sont pas les champions du monde de la gestion typographique. Ceci étant, ils s’améliorent tous les jours et parmi toutes les chipoteries typographiques il y en a une qui commence timidement à faire son apparition dans les navigateurs : la gestion des ligatures. C’est loin d’être parfait, mais il y a déjà moyen de faire quelques petites choses.

C’est quoi une ligature ?

Avant de rentrer dans le vif du sujet, rappelons brièvement ce que sont les ligatures typographiques. Pour faire simple, une ligature typographique consiste à lier deux glyphes pour en former un nouveau. Les ligatures ont évolué au cours de l’histoire de l’écriture puis de la typographie et toutes les langues ne sont pas égales face à cette notion. Par exemple, l’alphabet arabe ou certains alphabets asiatiques en font un usage très important. Ici, nous allons nous concentrer sur les ligatures des langues reposant sur l’alphabet latin (rien que ça ce n’est déjà pas simple).

Avant même de vous demander si votre navigateur va pouvoir afficher ou non les ligatures, la première chose à faire est de vous assurer que les fontes que vous allez utiliser comportent les éléments nécessaires pour les afficher. Pour faire simple, soit votre police embarque directement les caractères ligaturés soit elle est au format OpenType, TrueType ou WOFF et comporte les instructions spécifiques permettant de gérer les ligatures automatiquement.

Utiliser les ligatures

Unicode

Un certain nombre de ligatures sont normées au niveau d’Unicode. En conséquence, il est tout à fait possible d’utiliser directement les caractères ou les entités XML correspondants pour les utiliser dans vos texte HTML

<p>Une &#xFB01;lle de cœur</p>

Le problème de cette méthode c’est que d’une part toutes les ligatures ne font pas partie de la norme Unicode et d’autre part, si pour une raison ou une autre, votre police ne comporte pas le caractère correspondant (par exemple, votre fonte déclarée via @font-face ne s’est pas chargée), vous aurez droit à un joli symbole de glyphe introuvable, ce qui n’est pas forcément très heureux ! Personnellement, je vous conseille de n’utiliser cette technique que pour les ligatures obligatoires (comme le « œ » en français).

SVG text-rendering

La norme SVG étend CSS en définissant la propriété text-rendering. Cette propriété permet de dire au navigateur s’il doit privilégier la lisibilité des polices ou bien les performances d’affichage. La norme ne spécifie pas explicitement ce qui améliore la lisibilité ou les performances. Chaque navigateur est libre de faire ce qu’il veut.

Chrome, Safari et Firefox 3.6 sont les premiers navigateurs à gérer l’automatisation des ligatures disponibles dans les fontes OpenType. Ils considèrent également que les ligatures ordinaires servent à améliorer la lisibilité. Ainsi, il est possible d’activer (ou pas) le support des ligatures ordinaires en utilisant cette propriétés CSS.

p {
    text-rendering : optimizeLegibility;
}

<p>Le trafic est fluide.</p>

Dans l’exemple précédent, vous noterez que les ligatures ordinaires « f » et « i » ainsi que « f » et « l » sont bien réalisées mais pas la ligature esthétique « s » et « t ».

CSS3 font-feature-settings

Le module CSS3 Font est bien connu pour définir tout le mécanisme des déclarations @font-face, mais il fait bien plus que ça. En effet, il définit également comment les différentes fonctionnalités des polices peuvent être activées ou non.

Je ne rentrerai pas trop dans les détails ici car pour l’instant ce module est en pleine discussion et beaucoup de choses changent quasiment tous les jours à son propos. Néanmoins, il y a une propriété : font-feature-settings.

Cette propriété permet d’activer ou non l’ensemble des fonctionnalités et effets spéciaux des fontes OpenType un par un. L’exemple ci-après montre comment activer l’ensemble des ligatures possibles dans Firefox 4 :

p {
    font-feature-setting : "liga=1,clig=1,dlig=1,hlig=1,rlig=1";
}

<p>la star des fillettes.</p>

À terme, d’autres propriétés CSS3 viendront simplifier l’accès à certaines fonctionnalités : les ligatures, les petites capitales, les glyphes alternatifs, etc. En effet, la propriété font-feature-setting est une propriété générique de « bas niveau » permettant d’accéder à l’ensemble des fonctionnalités OpenType. Il y a donc, parmi d’autres, une proposition pour que les ligatures puissent être gérées indépendamment via une propriété spécifique : la propriété font-variant-ligature.

Césures

Comportement par défaut :

overflow: hidden : circulez, y’a rien à voir !

Le retour à la ligne forcé avec word-wrap

.bloc { 
  word-wrap: break-word;
}

Les points de suspension avec text-overflow

p {
  width: 200px; /* à modifier selon vos besoins */
  overflow: hidden;
  text-overflow: ellipsis; 
}

Les césures (hyphénation) avec hyphens

.bloc { 
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Les polices variables

Les polices variables sont une évolution de la spécification OpenType et qui permet d’activer différentes variations d’une police dans un seul fichier plutôt que d’avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l’ensemble des variations en utilisant une seule référence @font-face. Dans cet article, nous verrons tout ce qu’il faut savoir pour commencer à utiliser les polices variables.

Qu’est-ce qu’une police variable ?

Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.

Les polices standard ou polices statiques

Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour ‘Roboto Regular’, ‘Roboto Bold’ et ‘Roboto Bold Italic’ et on pouvait avoir 20 à 30 fichiers distincts pour représenter l’intégralité d’une police.

Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d’autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).

Les polices variables

Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu’un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu’on chargerait pour la police principale d’un site. L’avantage d’une police variable est qu’on peut accéder à l’intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.

Cela permet d’utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d’utiliser une fonte plus étroite lorsqu’il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n’est pas rare d’avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.

Syntaxe CSS standard

cf. https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

Les polices d’icônes

Les icônes sont largement utilisées dans la conception de sites Web. Ils peuvent attirer l’attention sur des parties importantes d’une page, agir comme un raccourci là où le texte ne rentre pas, renforcer une marque et informer les visiteurs avec des barrières linguistiques.

Mais pour être vraiment inclusif, votre site Web doit utiliser des icônes accessibles.

Les icônes universellement comprises sont rares. Une loupe , qui signifie « recherche », est l’une des rares à être vraiment largement reconnue. Pour la plupart des icônes, il est nécessaire d’accompagner l’image d’une étiquette de texte pour éviter toute ambiguïté.

Par exemple, même l’ icône hamburger omniprésente sur les menus mobiles peut être ignorée par les utilisateurs. En fait, un test A/B a montré un meilleur engagement et des conversions lorsque le mot « Menu » a été ajouté à l’icône.

Vous devez également tenir compte de la couleur pour l’accessibilité des icônes. Si le contraste des couleurs d’une icône est trop faible par rapport à son arrière-plan, certains utilisateurs malvoyants peuvent ne pas être en mesure de la voir ou de l’utiliser.

Toute icône décorative ne doit pas être forcément lue aux visiteurs car elle n’ajoute rien à leur compréhension. Par exemple, quatre icônes sont utilisées pour illustrer les éléments de l’annonce Airbnb suivante, mais dire à une personne aveugle qu’il y a une icône de maison ou une icône de clé est superflu — ce qu’elle doit savoir se trouve dans le texte d’accompagnement :

La taille des icônes est également importante, en particulier pour les liens d’icônes. Une bonne taille à retenir est de 44 x 44 pixels, car une icône plus petite sera difficile pour certaines personnes d’appuyer sur leur téléphone.

Enfin, les icônes accessibles interactives doivent être accessibles au clavier et au toucher ainsi que cliquables via une souris.

Les icônes images

Que vous ayez créé ou téléchargé vos icônes PNG, il existe deux manières différentes de les utiliser.

Premièrement, il y a les icônes sémantiques — les icônes qui ont une signification. Si la signification de votre icône n’est pas évidente, c’est une bonne idée d’ajouter du texte visible à côté de l’icône pour le rendre clair pour tout le monde.

Si votre icône est un lien cliquable, utilisez un texte alternatif qui énonce la destination du lien. Par exemple, une icône d’e-mail peut avoir le texte alternatif suivant :

<a href="mailto:hello@example.com"><img src="contact.png" alt="Envoyez-nous un e-mail"></a>

Pour rendre la signification de l’icône compréhensible pour tout le monde, vous pouvez ajouter du texte visible, comme « Envoyez-nous un e-mail ». Cela a l’avantage supplémentaire d’agrandir la zone de contact du lien, il est donc plus facile de cliquer ou d’appuyer dessus.

Si vous utilisez du texte visible, vous n’avez pas besoin d’ajouter de texte alternatif à l’icône car le texte du lien le décrit déjà. Au lieu de cela, l’icône remplit une fonction décorative, elle devrait donc avoir un texte alternatif d’image nul :

<a href="mailto:hello@example.com"><img src="contact.png" alt="">Envoyez-nous un e-mail</a>

Les icônes SVG

SVG dans une balise img

<img src="XXX.svg" alt="" aria-hidden=”true” />

SVG en ligne (inline)

<svg aria-hidden="true" focusable="false">
…
</svg>

<svg viewBox="0 0 440 540" version="1.1" role="img"
  lang="fr" xml:lang="fr"
  aria-labelledby="title description">

  <title id="title">Revenus bruts 2019</title>

  <desc id="description">
    Ce schéma présente les revenus de l’année 2019, en pourcentage du total et en valeur absolue. Le total des revenus est de 20,3 millions d’Euros et se divise en 6,9 millions (34%) pour le premier trimestre, 2,1 millions (10%) pour le second, 10,3 millions pour le troisième (51%) et 1 million au dernier trimestre (5%).
  </desc>

  ...
</svg>

Quel code utiliser ?

La réponse à « Quel est le meilleur code HTML pour une icône SVG ? » n’est pas unique, car ce qu’une icône doit faire sur un site Web varie. 

L’icône est décorative

L’icône est juste là, elle est jolie, mais peu importe si elle a complètement disparu. La compréhension de la page n’en est pas altérée. Si tel est le cas:

<svg aria-hidden="true" ... ></svg>

Il n’est pas nécessaire d’annoncer l’icône car l’étiquette à côté fait déjà le travail. Ainsi, au lieu de le lire, nous le cachons des lecteurs d’écran. De cette façon, l’étiquette fait ce qu’elle est censée faire sans que le SVG ne marche sur ses pieds.

L’icône est autonome

Si l’icône n’est pas accompagnée d’une étiquette de texte visible et qu’elle est un déclencheur d’action significatif en soi, c’est plus délicat. Le code disponible s’est amélioré au fil du temps, tout ce dont vous avez besoin pour les navigateurs modernes est :

<svg role="img"><title>Good Label</title> ... </svg>. 

Cela fonctionne pour un SVG à l’intérieur d’un élément <button>, par exemple, ou si le SVG lui-même joue le rôle de « bouton ».

L’icône est entourée d’un lien

…et le lien est l’action significative. Ce qui est important, c’est que le lien ait un bon texte. Si le lien contient du texte visible, l’icône est décorative. Si le SVG est le lien où il est enveloppé dans un <a> (plutôt qu’un lien SVG interne), alors, donnez-lui une étiquette accessible, comme :

<a href="/" aria-label="Good Label"><svg aria-hidden="true" ... ></svg></a>

… ou, avoir un <span class="screen-reader-only">texte dans le lien et le SVG caché.

Les polices d’icônes

Les icônes sont de plus en plus rarement intégrés en tant qu’image ou sprite CSS. Les développeurs de sites Internet ont désormais plutôt recours aux polices d’icônes. Une polices d’icônes est une police de caractère pour le Web qui contient des pictogrammes vectoriels et non des lettres. Les icones vectorielles présentent l’avantage d’un côté d’être adaptables sans que cela n’altère leur qualité mais également de disposer d’une taille plus petite.

Par ailleurs, les icon fonts peuvent être affichées en CSS (feuille de style en cascade). En raison de cette adaptabilité, les icônes vectorielles sont de très haute qualité et ce sur tous les écrans.

Fournisseurs de polices d’icônes

La Toile regorge de bibliothèques open source qui présentent des choix impressionnants d’icônes utilisables gratuitement. La liste suivante illustre un aperçu des meilleurs fournisseurs du Web :

• Font Awesome : à l’origine conceptualisée par Bootstrap et compatible avec la plupart des frameworks. Font Awesome présente une collection de plus de 600 polices d’icônes destinés au Web. Toutes les icônes sont disponibles sous forme d’image vectorielle, elles sont compatibles avec les lecteurs d’écran et peuvent être réadaptées sans pour autant perdre de leur qualité. Cette polices d’icônes est soumise à la licence open source SIL (SIL OFL), est gratuite et peut être même utilisée à des fins commerciales. 
  
• Entypo : à l’inverse de la plateforme Font Awesome, Entypo ne propose aucune polices d’icônes mais une suite de pictogrammes vectoriels en format SVF. Cette dernière fournit une base pour les fontes individuelles qu’il est possible d’assembler avec des générateurs de polices de caractère pour le Web.
  
• Typicons : En ce qui concerne Typicons, il s’agit ici d’une collection de polices d’icônes comportant plus de 300 pictogrammes vectoriels adaptables à tous les écrans. Il existe des icônes faisant office de modèle de vecteur et de CSS minifié. Cette polices d’icônes est également soumise à la licence open source SIL.
  
• Open Iconic : Les polices d’icônes de OpenIconic proposent plus de 200 pictogrammes en SVG ainsi que diverses polices de caractère pour le Web. Les créateurs mettent en avant la taille réduite des fichiers de leurs fontes. En effet, la polices d’icônes d’Open Iconic en format WOFF ne pèse que 12.4 Ko et est bien plus petite que Font Awesome. Tous les pictogrammes utilisés sont sous licence MIT. Les polices proposées sont gratuites et peuvent être utilisés à des fins commerciales.

Créer sa propre police d’icônes

En général, les développeurs de sites Web n’ont pas besoin de tous les pictogrammes d’une police d’icônes. Il est courant qu’une combinaison d’icônes de différents fournisseurs puisse se trouver sur un même site Internet. C’est ce que permettent ces mallettes de création mises en place grâce aux générateurs de polices de caractères tels que Fontello, fontastic.me voire IcoMoon App. Une mallette individuelle présente l’avantage que seules les icônes associées à la police sont intégrées, ce qui est visible sur le site Internet. Cela permet de réduire la taille du fichier mais également le temps de chargement d’un site Web. 

Intégrer des icon fonts

Les polices d’icônes sont définies en général grâce à une classe CSS dans le code source HTML. La police d’icônes correspondante doit être intégrée dans l’en-tête du document HTML. Certains fournisseurs fournissent un fichier CSS par défaut. Une intégration via le framework CSS Bootstrap est également possible tant que la police est prise en charge.

<head>
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
</head>

<body>
  <i class="fa-regular fa-user"></i>
</body>

Adapter des icônes

Etant donné que les polices d’icônes sont téléchargées via une feuille de style propre et récupérées via des classes CSS prédéfinis, elles présentent de nombreuses possibilités de configuration. Contrairement aux fichiers graphiques, les pictogrammes vectoriels intégrés via des icon fonts sont définis par des changements dans le code CSS. C’est ainsi que les développeurs de sites Web adaptent la taille, la couleur ainsi que l’opacité d’un icône en fonction des sites. Il est également possible de concevoir des icônes en utilisant des textures voire des effets d’ombre.

Améliorer l’icône avec du texte

C’est le moyen le plus simple de rendre vos liens d’icônes (et boutons) accessibles. Placez simplement une copie solide à côté de l’icône dans le lien.

<a href="#">
 <i class="fas fa-home" aria-hidden="true"></i> Home
</a>

VoiceOver lira lien home . ChromeVox, d’autre part, lira home, lien interne et Narrator lira Home, link, value: URL comma read-only . Dans les trois cas, l’utilisateur comprend à quoi sert ce lien. Tous les utilisateurs voyants auront également une idée de ce dont il s’agit. Les utilisateurs de souris bénéficient également d’une zone de clic plus grande. Cela aidera également les utilisateurs sur un appareil tactile.

Icône visuelle accessible

Si, pour une raison quelconque, votre service de conception n’est pas disposé à suivre la voie décrite ci-dessus, vous pouvez toujours masquer le texte avec un sélecteur de classe .visible-hidden. De cette façon, tous les utilisateurs voyants ne verront que l’icône, mais elle est accessible via des lecteurs d’écran. Cependant, il reste le problème de ne pas comprendre l’icône et/ou la zone de clic/toucher plus petite.

<a href="#">
 <i class="fas fa-home" aria-hidden="true"></i>
 <span class="visually-hidden">Home</span>
</a>