Leçon 7Polices de caractères, couleurs et durabilité sur le Web
- Notion 41 - Types de polices.
- Notion 42 - Impact de la police sur le chargement de la page.
- Notion 43 - Choix de polices pour l'accessibilité et la durabilité.
- Notion 44 - Palettes de couleurs éco-énergétiques.
- Notion 45 - Trouvez un équilibre entre efficacité énergétique et palette de couleurs accessibles.
- Notion 46 - Révision/évaluation
Notion 41
Types de polices.
Compétences ciblées
Dans ce module, nous allons découvrir les différents types de polices que vous pouvez utiliser pour la conception d'un projet web et comment elles peuvent influencer la durabilité d'un site web.
Trois types de polices :
Les polices système
Il s'agit de polices qui sont installées par défaut sur tous les types d'appareils (Mac ou PC). Les plus connues sont les polices Arial et Times New Roman.
Polices Web
Contrairement aux précédentes, les polices Web ont la particularité d'être hébergées en ligne et offrent donc un plus grand choix de polices.
Polices Web personnalisées (DIY)
Ce type de police donne aux concepteurs la possibilité de créer leurs propres polices Web. Comme les précédentes, elles sont également hébergées en ligne.
Le type de police affecte les performances du web et son impact environnemental principalement par sa taille. Dans la prochaine leçon, nous verrons en détail comment ils sont liés.
Comme les polices Web offrent une grande palette aux concepteurs, examinons les ensembles de polices les plus populaires.
Les options de polices Web les plus populaires :
*Adobe Typekit
Les polices Typekit ne sont pas gratuites. L'abonnement varie entre 25$/an pour un compte personnel et entre 40 à 400$/mois pour les comptes professionnels.
Le concepteur de sites web a accès à une variété de polices dont la taille de téléchargement est de 11Kb. Elles ont l'avantage d'avoir moins d'impact sur le poids de la page que les Google Fonts.
*Google Fonts
Les plus ou moins 600 caractères des Google Fonts sont mis gratuitement à la disposition des utilisateurs. De plus, leur taille de téléchargement est d'environ 28Kb. Lors de la création de votre site web, si vous choisissez une police du catalogue Google, elle ne sera téléchargée qu'une seule fois dans les pages en cache. De cette façon, Google s'assure que les polices s'affichent rapidement.
*Polices Web personnalisées (DIY)
Les polices DIY ne sont pas gratuites. Notez que la version non optimisée a une taille de téléchargement élevée de 30,5 Ko. En ce qui concerne la version optimisée, la taille du fichier est plus petite et nécessite moins de requêtes HTTP.
Afin d'optimiser les performances des polices DIY, il est recommandé de :
- Réduire la taille de téléchargement de la police choisie et donc de l'alléger. Il est recommandé d'utiliser un service tel que FontSquirrel.
- Charger les polices web uniquement sur les navigateurs des ordinateurs de bureau plutôt que sur les mobiles.