{"id":104,"date":"2025-12-19T12:57:39","date_gmt":"2025-12-19T11:57:39","guid":{"rendered":"https:\/\/wp11.infocom.work\/?page_id=104"},"modified":"2025-12-21T12:28:09","modified_gmt":"2025-12-21T11:28:09","slug":"typographie","status":"publish","type":"page","link":"https:\/\/wp11.infocom.work\/index.php\/typographie\/","title":{"rendered":"Typographie"},"content":{"rendered":"\n
\n
\n

\n Th\u00e9matique\n <\/p>\n

\n Typographie \/<\/span>\n Design Atlas<\/span>\n <\/h1>\n

\n La typographie n\u2019est pas \u201cjuste une police\u201d : c\u2019est une voix, une hi\u00e9rarchie et une intention. Ici, on d\u00e9cortique les choix qui rendent une mise en page lisible, coh\u00e9rente et reconnaissable.\n <\/p>\n <\/div>\n<\/section>\n\n\n\n

\n

\n Sur cette page\n <\/h2>\n\n
\n \n
<\/div>\n
\n

\n Guides\n <\/p>\n

\n Les bases qui font pro\n <\/h3>\n

\n M\u00e9thodes simples, rep\u00e8res de lisibilit\u00e9, hi\u00e9rarchie et associations de polices qui fonctionnent.\n <\/p>\n

\n Voir la section \u2192\n <\/p>\n <\/div>\n <\/a>\n\n \n

<\/div>\n
\n

\n Analyses\n <\/p>\n

\n Comprendre les choix typographiques\n <\/h3>\n

\n Serif vs sans, perception \u201cpremium\u201d, rythme de lecture : on d\u00e9cortique ce qui change vraiment.\n <\/p>\n

\n Voir la section \u2192\n <\/p>\n <\/div>\n <\/a>\n\n \n

<\/div>\n
\n

\n Checklists\n <\/p>\n

\n V\u00e9rifier en 30 secondes\n <\/h3>\n

\n Les erreurs \u00e0 \u00e9viter et les r\u00e9glages \u00e0 valider avant de consid\u00e9rer une compo \u201cfinie\u201d.\n <\/p>\n

\n Voir la section \u2192\n <\/p>\n <\/div>\n <\/a>\n <\/div>\n<\/section>\n\n\n\n

\n

\n Guides essentiels\n <\/h2>\n\n
\n \n
<\/div>\n
\n

\n Choisir une typographie sans se tromper\n <\/h3>\n

\n Contexte, ton, lisibilit\u00e9, coh\u00e9rence : une m\u00e9thode simple et rapide.\n <\/p>\n <\/div>\n <\/a>\n\n \n

<\/div>\n
\n

\n Construire une hi\u00e9rarchie typographique\n <\/h3>\n

\n Titres, sous-titres, corps : guider l\u2019\u0153il sans surcharger.\n <\/p>\n <\/div>\n <\/a>\n\n \n

<\/div>\n
\n

\n Paires de polices qui fonctionnent\n <\/h3>\n

\n Associer sans conflit : contraste, r\u00f4le, et coh\u00e9rence.\n <\/p>\n <\/div>\n <\/a>\n <\/div>\n<\/section>\n\n\n\n

\n
\n

\n Une ressource \u00e0 recommander ?\n <\/h2>\n

\n Partage une typographie, un article, un livre ou un outil utile : on enrichit Design Atlas avec des r\u00e9f\u00e9rences solides et v\u00e9rifiables.\n <\/p>\n \n Proposer une ressource\n <\/a>\n <\/div>\n<\/section>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n

\n Guides essentiels\n <\/h2>\n\n
\n

\n Une bonne typographie commence par une r\u00e8gle simple : la police doit servir le contenu<\/strong>, pas l\u2019inverse. Avant de choisir \u201cune belle typo\u201d, on clarifie le contexte : affiche, article, site, interface, packaging\u2026 Chaque support impose un rythme de lecture, une distance, un niveau de contraste et une contrainte de taille. Le bon choix est souvent celui qui reste lisible<\/strong> dans les pires conditions : petit \u00e9cran, lumi\u00e8re forte, lecture rapide, impression moyenne.\n <\/p>\n\n

\n Ensuite vient la hi\u00e9rarchie<\/strong>. La hi\u00e9rarchie typographique ne d\u00e9pend pas uniquement de la taille : elle se construit avec le gras, l\u2019interlignage, l\u2019espacement, la couleur, et surtout la coh\u00e9rence. Un bon syst\u00e8me se r\u00e9sume souvent \u00e0 3 niveaux : un titre fort, un sous-titre secondaire, et un corps lisible. Si tu dois \u201cinventer\u201d une nouvelle r\u00e8gle \u00e0 chaque paragraphe, ton syst\u00e8me est instable : il faut simplifier.\n <\/p>\n\n

\n Enfin, les associations de polices<\/strong> : le plus s\u00fbr, c\u2019est un contraste clair (par exemple une sans pour les titres + une serif pour le corps), ou bien une seule famille typographique avec plusieurs graisses. Deux polices trop proches cr\u00e9ent un effet \u201cpresque pareil\u201d qui fait amateur. Objectif : contraste net + r\u00f4les distincts + ton coh\u00e9rent.\n <\/p>\n <\/div>\n<\/section>\n\n\n\n

\n

\n Analyses\n <\/h2>\n\n
\n

\n La grande question \u201cserif ou sans-serif<\/strong>\u201d est souvent mal pos\u00e9e. Une serif n\u2019est pas automatiquement \u201cclasse\u201d et une sans-serif n\u2019est pas automatiquement \u201cmoderne\u201d. Ce qui compte, c\u2019est l\u2019intention : cr\u00e9dibilit\u00e9, proximit\u00e9, efficacit\u00e9, luxe, neutralit\u00e9, \u00e9nergie\u2026 Une serif \u00e0 fort contraste peut donner un rendu tr\u00e8s mode, tr\u00e8s \u00e9ditorial, mais devenir fatigante en lecture longue. Une sans-serif g\u00e9om\u00e9trique peut sembler tr\u00e8s contemporaine, mais aussi froide si le reste du design n\u2019\u00e9quilibre pas.\n <\/p>\n\n

\n Quand une police \u201cfait cheap\u201d, ce n\u2019est pas une insulte gratuite : c\u2019est souvent un probl\u00e8me de d\u00e9tails<\/strong>. Les courbes trop raides, les terminaisons grossi\u00e8res, les espacements mal calibr\u00e9s, ou une italique \u201cfake\u201d d\u00e9truisent la cr\u00e9dibilit\u00e9. Autre pi\u00e8ge : utiliser une police \u201cdisplay\u201d (faite pour des titres) comme police de texte courant : \u00e7a fatigue l\u2019\u0153il et \u00e7a rend tout lourd.\n <\/p>\n\n

\n Enfin, il y a la lecture r\u00e9elle : taille, interlignage, longueur de ligne. Une r\u00e8gle simple : si ton paragraphe ressemble \u00e0 un \u201cbloc compact\u201d, augmente l\u2019interlignage. Si tes lignes sont trop longues, limite la largeur (id\u00e9alement autour de 60\u201380 caract\u00e8res). La typographie, c\u2019est une m\u00e9canique : quand \u00e7a marche, on ne la remarque pas \u2014 on lit.\n <\/p>\n <\/div>\n<\/section>\n\n\n\n

\n

\n Checklists\n <\/h2>\n\n
\n\n \n
<\/div>\n
\n

\n Checklist : finition typographique\n <\/h3>\n

\n Avant export : alignements, espaces, tailles, coh\u00e9rence g\u00e9n\u00e9rale.\n <\/p>\n <\/div>\n <\/a>\n\n \n

<\/div>\n
\n

\n Checklist : lisibilit\u00e9 mobile\n <\/h3>\n

\n Tailles, contrastes et longueur de ligne : \u00e9viter le \u201ctrop petit\u201d.\n <\/p>\n <\/div>\n <\/a>\n\n \n

<\/div>\n
\n

\n Checklist : paire de polices\n <\/h3>\n

\n Contraste clair, r\u00f4les distincts, coh\u00e9rence de ton sur tout le projet.\n <\/p>\n <\/div>\n <\/a>\n\n <\/div>\n<\/section>\n\n\n\n

\n

\n Checklists\n <\/h2>\n\n
\n

\n Avant de publier un design, la plupart des erreurs ne sont pas \u201ccr\u00e9atives\u201d : ce sont des d\u00e9tails d\u2019ex\u00e9cution. Une checklist te fait gagner du temps et \u00e9vite le rendu \u201cpas fini\u201d. L\u2019objectif n\u2019est pas d\u2019\u00eatre rigide, mais d\u2019\u00eatre coh\u00e9rent : un syst\u00e8me typographique propre rend tout le reste plus cr\u00e9dible, m\u00eame avec peu d\u2019\u00e9l\u00e9ments.\n <\/p>\n\n