{"id":238,"date":"2025-12-21T16:26:21","date_gmt":"2025-12-21T15:26:21","guid":{"rendered":"https:\/\/wp11.infocom.work\/?page_id=238"},"modified":"2025-12-21T16:54:04","modified_gmt":"2025-12-21T15:54:04","slug":"typographie-fontes","status":"publish","type":"page","link":"https:\/\/wp11.infocom.work\/index.php\/ressources\/typographie-fontes\/","title":{"rendered":"Typographie & fontes"},"content":{"rendered":"\n\n
\n\n \n
\n \n

\n Ressources \u2022 Typographie & fontes\n <\/p>\n\n

\n Ma\u00eetriser la typo : lisibilit\u00e9, hi\u00e9rarchie\u2026 et style.\n <\/h1>\n\n

\n Une bonne typographie, c\u2019est une structure<\/strong> (r\u00e8gles) + une signature<\/strong> (ton).\n Ici : o\u00f9 trouver des fontes, comment les combiner, comment r\u00e9gler une page pour que \u00e7a lise tout seul.\n <\/p>\n\n

\n Pairing<\/span>\n R\u00e8gles web<\/span>\n Licences<\/span>\n Variables<\/span>\n <\/div>\n <\/header>\n\n \n
\n
\n

\n D\u00e9mo rapide (tu peux copier ces r\u00e9glages)\n <\/h2>\n\n
\n \n
\n

\n Style A \u2022 Sans-serif moderne\n <\/p>\n

\n Design Atlas\n <\/h3>\n

\n Exemple de texte : une sans-serif bien r\u00e9gl\u00e9e donne une lecture fluide, surtout sur mobile. \n 16\u201318px<\/strong> et un interligne autour de 1.8\u20132.0<\/strong>, c\u2019est souvent parfait.\n <\/p>\n

\n

\n R\u00e9glages conseill\u00e9s\n <\/p>\n

\n Body 17px \u2022 Line-height 1.9 \u2022 Width 70\u201385ch \u2022 H1 36\u201344px \u2022 H2 22\u201328px\n <\/p>\n <\/div>\n <\/div>\n\n \n

\n

\n Style B \u2022 \u00c9ditorial (contraste)\n <\/p>\n

\n Une typographie peut \u00eatre une \u201cvoix\u201d.\n <\/h3>\n

\n M\u00e9langer serif pour les titres<\/strong> + sans-serif pour le texte<\/strong> donne souvent un rendu \u201cpresse\u201d.\n Le secret : garder une hi\u00e9rarchie simple et un contraste lisible.\n <\/p>\n

\n
\n

\u00c0 \u00e9viter<\/p>\n

\n Texte trop petit, trop gris, trop long.\n <\/p>\n <\/div>\n

\n

\u00c0 viser<\/p>\n

\n Air + contraste + rythme.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n

\n

\n O\u00f9 trouver des fontes (vraies ressources)\n <\/h2>\n\n
\n\n
\n

\n Gratuit \/ web\n <\/p>\n

Google Fonts<\/h3>\n

\n Catalogue immense, tr\u00e8s pratique pour WordPress. Tu peux filtrer par style, langue, \u00e9paisseur, variables, etc.\n <\/p>\n \n Ouvrir Google Fonts \u2197\n <\/a>\n <\/div>\n\n

\n

\n Pro \/ curation\n <\/p>\n

Fontshare<\/h3>\n

\n S\u00e9lection tr\u00e8s qualitative (souvent gratuite). Super pour trouver une sans-serif \u201cpremium\u201d et une serif \u00e9ditoriale.\n <\/p>\n \n Explorer Fontshare \u2197\n <\/a>\n <\/div>\n\n

\n

\n Pro \/ licences\n <\/p>\n

\n Adobe Fonts\n <\/h3>\n

\n Inclus dans Creative Cloud : tr\u00e8s pratique si tu utilises d\u00e9j\u00e0 Adobe (coh\u00e9rence entre print & web).\n <\/p>\n \n Ouvrir Adobe Fonts \u2197\n <\/a>\n <\/div>\n\n

\n

\n S\u00e9lection \/ galerie\n <\/p>\n

Typewolf<\/h3>\n

\n Inspirations typographiques (quelles polices sont utilis\u00e9es sur quels sites). Tr\u00e8s utile pour apprendre en observant.\n <\/p>\n \n Voir Typewolf \u2197\n <\/a>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n

\n
\n

\n Pairing : combiner 2 fontes sans tout casser\n <\/h2>\n

\n R\u00e8gle d\u2019or : 1 fonte pour les titres<\/strong>, 1 fonte pour le texte<\/strong>.\n Il faut du contraste (forme \/ graisse), mais pas de conflit (mood).\n <\/p>\n\n

\n \n
\n

\n Pairing \u201csafe\u201d\n <\/p>\n

\n Sans-serif + Sans-serif\n <\/h3>\n

\n M\u00eame famille de style, mais une fonte titre plus \u201cdisplay\u201d (ou plus bold) + une fonte texte neutre.\n <\/p>\n

\n

\n Exemple : Titres tr\u00e8s gras \/ texte regular \u2014 \u00e7a suffit souvent \u00e0 cr\u00e9er une identit\u00e9.\n <\/p>\n <\/div>\n <\/div>\n\n \n

\n

\n Pairing \u201c\u00e9ditorial\u201d\n <\/p>\n

\n Serif + Sans-serif\n <\/h3>\n

\n Tr\u00e8s efficace pour un blog : titres plus \u201cpresse\u201d, texte propre et moderne.\n <\/p>\n

\n \n Trouver des combinaisons \u2197\n <\/a>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n

\n
\n

\n Web & licences : le point rapide (important)\n <\/h2>\n\n
\n
\n

\u00c0 retenir<\/p>\n