Certains concepteurs web peuvent considérer la typographie comme l’un des éléments les moins importants de la conception web, mais elle peut faire ou défaire l’expérience utilisateur de multiples façons.

De bons choix typographiques peuvent renforcer la lisibilité, la facilité de lecture, l’identité de marque, l’accessibilité et le taux de conversion. En revanche, de mauvais choix typographiques peuvent affaiblir ces facteurs et ruiner l’expérience de l’utilisateur.

La typographie est donc un aspect important de la conception web, et un élément que chaque concepteur devrait maîtriser lorsqu’il lance une entreprise de conception web. Fort heureusement, le web regorge de tutoriels et de cours de typographie utiles pour les concepteurs web.

Dans cet article, nous allons examiner 20 tutoriels de conception web. Bien que de nombreux tutoriels soient disponibles gratuitement en ligne, nous avons également inclus certains cours en ligne payants. Après tout, lorsque vous essayez de trouver du travail en conception web, vous devez être en mesure de vous démarquer, et posséder un certificat d’achèvement d’une institution ou d’un fournisseur de cours reconnu peut vous y aider.

Découvrez les dernières tendances en typographie et inspirez-vous

Table des Matières

20 incroyables tutoriels de typographie en ligne

Des termes typographiques de base à l’optimisation des polices avec CSS, nous avons rassemblé les meilleurs tutoriels de typographie pour les concepteurs.

1. La typographie web : Le guide complet pour les concepteurs

Elementor-Typography

Niveau de compétence : Débutant à intermédiaire

Durée : 30 minutes

Coût : Gratuit

Ce tutoriel de typographie provient d’Elementor, ce qui signifie que vous apprendrez plus que simplement comment utiliser la typographie dans la conception web. Vous allez apprendre à mettre tout cela en pratique — des éléments tels que la mise en forme, l’établissement d’une hiérarchie visuelle, la création d’un système de conception, et ainsi de suite — dans le contexte de WordPress et Elementor.

2. Comment ajouter des polices personnalisées à votre site WordPress

Using-Custom-Fonts-Elementor

Niveau de compétence : Débutant à intermédiaire

Durée : 17:31

Coût : Gratuit

Dans certains cas, WordPress ne disposera pas des polices spécifiques que vous souhaitez utiliser. Ainsi, avec ce tutoriel de typographie d’Elementor, vous apprendrez quelles sont vos options pour ajouter des polices personnalisées à un site WordPress. Vous pouvez les ajouter manuellement à WordPress en utilisant CSS ou vous pouvez les télécharger dans Elementor et les utiliser à partir de l’éditeur.

3. Comment utiliser les couleurs et polices globales d'Elementor

Elementor-Global-Colors

Niveau de compétence : Débutant à intermédiaire

Durée : 6:50

Coût : Gratuit

Dans cette vidéo d’Elementor, vous découvrirez tout sur la fonctionnalité des paramètres globaux dans l’éditeur Elementor. Ce tutoriel vous montrera comment utiliser cette fonctionnalité pour définir à la fois les couleurs et les polices, puis observer leur application à l’échelle du site. Donc, si vous souhaitez gagner du temps dans la mise à jour de vos polices et apporter une plus grande cohérence à chaque site que vous construisez, ce court tutoriel vidéo est incontournable.

4. Le guide ultime de la typographie de base

Envato Tuts

Niveau de compétence : Débutant

Durée : 10:33

Coût : Gratuit

Le titre de ce tutoriel vidéo d’Envato Tuts+ est quelque peu trompeur. Il devrait s’intituler « Le guide ultime de la terminologie typographique de base ». Cela étant dit, si vous êtes tout à fait novice en typographie, c’est une première étape importante à franchir. Familiarisez-vous avec les termes liés à la typographie, aux polices, aux types de fichiers, à la structure des caractères, à la composition typographique, et plus encore.

5. Tutoriel de typographie pour débutants : Tout ce dont vous avez besoin pour apprendre les bases de la typographie

Hubspot-Typography-Tutorial

Niveau de compétence : Débutant

Durée : Lecture de 18 minutes

Coût : Gratuit

Ce tutoriel de typographie de Hubspot est une autre introduction utile à la typographie dans le design. Vous apprendrez les termes courants, les différents styles de typographie, ainsi que les sources où trouver vos polices.

6. Introduction à la typographie

Coursera-Intro-Typography

Niveau de compétence : Débutant

Durée : 8 heures

Coût : Gratuit

Si vous recherchez une introduction plus approfondie à la typographie, ce cours du California Institute of the Arts est un bon choix. L’inscription à ce cours est gratuite, ce qui est un énorme avantage car vous en tirerez une multitude d’informations utiles. Vous apprendrez l’histoire de la typographie, sa structure, comment l’utiliser pour raconter une histoire, manipuler son apparence, et plus encore.

7. La psychologie des polices (Les polices qui évoquent l'émotion)

Envatotuts-Psychology-Fonts

Niveau de compétence : Débutant

Durée : 15 minutes

Coût : Gratuit

Si vous débutez dans le design, ce tutoriel d’Envato Tuts+ servira d’excellente introduction à la psychologie des polices. Similaire à la psychologie des couleurs, vous apprendrez les réponses émotionnelles et les associations courantes avec certains types de polices, et obtiendrez des conseils sur la façon de les utiliser à votre avantage.

8. Typographie web pour designers et développeurs

Udemy-Web-Typography

Niveau de compétence : Débutant à intermédiaire

Durée : 6,5 heures

Coût : 109,99 €

Ce cours Udemy sur la typographie web est enseigné par Rob Sutcliffe de l’Interface School. Il s’agit d’un aperçu assez technique de la typographie, examinant les différents types de classifications, des conseils sur le choix et l’association des polices, comment rendre votre typographie web lisible et responsive, et bien plus encore.

Pour tirer le meilleur parti de ce cours, vous devriez avoir une certaine connaissance pratique du HTML, du CSS et du JavaScript. Cela ne signifie pas que vous ne devriez pas vous inscrire si vous êtes un nouveau designer — vous bénéficiez d’un accès à vie, vous pouvez donc y revenir une fois que vous aurez perfectionné vos compétences dans ce domaine.

9. Éléments textuels du design : Polices, Typographie et Espacement

Coursera-Textual-Elements-Design

Niveau de compétence : Débutant

Durée : 13 heures

Coût : Gratuit

Ce cours de l’Université du Colorado à Boulder est disponible sur le site web Coursera. Il s’agit d’un cours approfondi au cours duquel vous apprendrez à manipuler les éléments textuels pour raconter une histoire à travers votre conception. Le cours aborde les bases puis s’étend à l’espacement typographique, au choix des polices, à l’association des polices et plus encore.

10. Typographie pour Concepteurs Développeurs - Ne soyez pas médiocre en conception

Dont-Suck-At-Design-Tutorial

Niveau de compétence : Intermédiaire

Durée : 8,5 heures

Coût : 99,99 $

Muhammad Ahsan Pervaiz est le créateur de ce cours Udemy sur la typographie noté 4,5 étoiles. Si vous souhaitez recevoir une formation complète sur les bases de la typographie, la personnalisation de la typographie, le choix et l’association des polices, et plus encore, c’est un cours fantastique à suivre. Des exercices sont intégrés au cours, vous acquerrez donc également une expérience pratique en mettant en œuvre tout ce que vous apprenez au fur et à mesure.

11. Quand utiliser chaque type de police (et quand ne pas le faire) !

Envato-Tuts-2

Niveau de compétence : Débutant

Durée : 12:55

Coût : Gratuit

Beaucoup des tutoriels et cours que vous avez vus dans cette liste jusqu’à présent ont abordé le sujet des types de polices. Cependant, ce tutoriel d’Envato Tuts+ approfondit vraiment le sujet, en décomposant les différents types et sous-catégories de polices. En apprenant à identifier les différences dans leur structure, vous aurez beaucoup plus de facilité à choisir les styles typographiques appropriés pour vos sites.

12. Comment savoir si une police est bonne ou si elle est mauvaise ?

Flux

Niveau de compétence : Débutant

Durée : 9:58

Coût : Gratuit

Ce tutoriel de typographie de Flux porte entièrement sur la recherche de polices de qualité pour vos sites web. La discussion tourne principalement autour de la manière dont les concepteurs web peuvent trouver des fonderies de polices et des sites web de haute qualité pour s’approvisionner en polices. Car, même si vous comprenez le type de police dont vous avez besoin, une police mal conçue (même si elle correspond à ce style) pourrait annuler tout votre travail acharné. Ce tutoriel vous aidera à éviter ce problème.

13. Choisir des polices web : Guide pour débutants

Google-Design

Niveau de compétence : Débutant

Durée : 10 minutes

Coût : Gratuit

Il s’agit d’un guide pratique de Google Design sur la façon de déterminer quelles polices web sont les plus appropriées pour chaque site web que vous construisez. Le tutoriel vous guidera à travers une série de facteurs, comme la portée du projet et la conception multilingue, puis vous dirigera vers les polices Google qui répondent aux besoins de votre projet.

14. Comment choisir des polices pour vos designs

Satori-Graphics

Niveau de compétence : Débutant

Durée : 7:35

Coût : Gratuit

Dans ce guide étape par étape de Satori Graphics, vous obtiendrez des conseils pratiques et des astuces sur le choix des polices pour vos projets. Bien qu’il y ait ici un accent important sur le design graphique, vous pouvez appliquer les mêmes cinq étapes pour choisir et associer des polices pour tout ce sur quoi vous travaillez, que ce soit un site web, une application, un logo ou tout autre type de support de marque.

15. Comment choisir des polices

Flux2

Niveau de compétence : Débutant

Durée : 9:41

Coût : Gratuit

Ce tutoriel YouTube de Flux vous apprendra à vous éloigner des choix de polices basés sur des hypothèses ou ce que votre instinct vous dit. Au lieu de cela, vous aborderez la sélection des polices en vous basant sur l’utilitarisme. Et vous obtiendrez de l’aide pour trouver des fonderies de polices qui fournissent des échantillons graphiques afin que, là encore, vous ne vous fiiez pas uniquement à ce que votre instinct vous dit sur l’apparence d’une police.

16. Guide de poche pour combiner les polices

Typekit-Typography-Pocket-Guide

Niveau de compétence : Débutant à Intermédiaire

Durée : 1 heure

Coût : Gratuit

L’association de polices est certainement un art. Donc, si vous allez apprendre à le faire, cela devrait être auprès de l’un des leaders dans le domaine du design. Ce guide de poche a été créé par Tim Brown, le Directeur de la Typographie pour Adobe Typekit et Adobe Type. Ce guide vous enseignera comment déterminer les tâches que vos polices doivent accomplir, comment choisir une police d’ancrage, comment identifier les polices qui complètent l’ancrage, et ensuite comment juger objectivement votre appariement.

17. Comment changer la police dans un thème WordPress (Tout thème)

Themeisle-Change-Font-Wordpress

Niveau de compétence : Débutant

Durée : 10 minutes

Coût : Gratuit

Ce tutoriel simple de ThemeIsle vous proposera deux options pour changer les polices dans WordPress. Vous pouvez sélectionner des polices web depuis le Personnalisateur de WordPress. Ou vous pouvez installer l’extension Easy Google Fonts et configurer les polices Google en utilisant le Personnalisateur. Bien qu’une option bonus soit incluse, il est préférable d’utiliser les paramètres de police universels de WordPress plutôt que de changer les polices par bloc ou par page.

18. Techniques CSS modernes pour améliorer la lisibilité

Smashing-Magazine

Niveau de compétence : Intermédiaire à Avancé

Durée : 11 minutes

Coût : Gratuit

Edoarda Cavazza a rédigé cet excellent article pour Smashing Magazine qui traite de l’utilisation du CSS pour améliorer la lisibilité et l’accessibilité de la typographie de votre site web. Plus précisément, ce tutoriel aborde l’utilisation de l’espacement pour créer le meilleur type d’expérience de lecture pour les visiteurs. Si vous n’avez pas encore appris le crénage, l’interlignage ou l’espacement des caractères, ou si vous n’avez pas une compréhension basique du CSS, commencez par le début de cette liste de tutoriels typographiques et revenez à celui-ci plus tard.

19. Introduction aux polices variables sur le Web

Webdev-Variable-Fonts

Niveau de compétence : Intermédiaire à Avancé

Durée : 20 minutes

Coût : Gratuit

Les polices variables sont relativement nouvelles, mais elles gagnent rapidement en support dans tous les navigateurs, ce qui signifie qu’il est temps pour les designers et les développeurs de commencer à les utiliser (si ce n’est pas déjà fait). Comme l’explique l’équipe de Google Developers dans ce guide sur les polices variables, elles sont extrêmement précieuses pour la performance des sites web car elles vous permettent d’enregistrer différentes variations d’une police dans un seul fichier. Pour apprendre à faire cela, vous aurez besoin de quelques connaissances en CSS.

20. Apprendre à utiliser la typographie — Critique du manuel typographique

Futur Les 20 Meilleurs Tutoriels De Typographie Pour Les Concepteurs Web 1

Niveau de compétence : Débutant à Avancé

Durée : 30:14

Coût : Gratuit

Ce tutoriel est intéressant car ce n’est pas vraiment un tutoriel en soi. Au cours de 30 minutes, vous observerez comment The Futur évalue la typographie utilisée dans la création de leur propre Manuel de Typographie. Bien qu’ils évaluent le manuel imprimé, c’est toujours un exercice utile à suivre car il vous apprendra à examiner votre propre travail et à vous habituer à faire des choix plus judicieux pour votre typographie dès le départ.

Maîtrisez l'art de la typographie et améliorez l'expérience de vos utilisateurs

Une fois que vous aurez passé du temps avec ces tutoriels typographiques et que vous maîtriserez bien les fondamentaux, il sera temps de mettre tout cela en pratique.

Une chose à garder à l’esprit est que la typographie, comme tout le reste dans le design, évoluera au fil du temps. Les principes et directives sous-jacents resteront les mêmes, mais en termes de goûts des gens en matière de typographie, attendez-vous à ce que cela change.

Assurez-vous donc, en plus de maîtriser les bases de la typographie, de vous tenir au courant des tendances typographiques également.

Originally posted 2021-04-28 11:18:39.