{"id":207,"date":"2025-12-21T15:35:16","date_gmt":"2025-12-21T14:35:16","guid":{"rendered":"https:\/\/wp11.infocom.work\/?p=207"},"modified":"2025-12-21T16:05:52","modified_gmt":"2025-12-21T15:05:52","slug":"comment-choisir-une-typographie-pour-un-site-editorial","status":"publish","type":"post","link":"https:\/\/wp11.infocom.work\/index.php\/2025\/12\/21\/comment-choisir-une-typographie-pour-un-site-editorial\/","title":{"rendered":"Comment choisir une typographie pour un site \u00e9ditorial"},"content":{"rendered":"\n<article>\n  <header style=\"padding:18px;border-radius:18px;overflow:hidden;border:1px solid #e8e8e8;background:\n    radial-gradient(circle at 12% 20%, rgba(31,79,255,.12) 0%, rgba(31,79,255,0) 55%),\n    radial-gradient(circle at 88% 72%, rgba(0,209,255,.10) 0%, rgba(0,209,255,0) 60%),\n    linear-gradient(180deg,#ffffff 0%,#fbfbfb 65%,#ffffff 100%);\">\n    <div style=\"display:flex;gap:10px;flex-wrap:wrap;align-items:center;\">\n      <span style=\"padding:8px 12px;border-radius:999px;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.75);\n        font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;\">\n        TYPOGRAPHIE\n      <\/span>\n      <span style=\"padding:8px 12px;border-radius:999px;border:1px solid rgba(31,79,255,.22);background:rgba(31,79,255,.08);\n        font:700 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#1f4fff;\">\n        Guide \u00e9ditorial\n      <\/span>\n      <span style=\"margin-left:auto;font:700 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">\n        lisibilit\u00e9 \u2022 hi\u00e9rarchie \u2022 ton\n      <\/span>\n    <\/div>\n\n    <h1 style=\"margin:12px 0 0 0;font:900 34px\/1.06 system-ui;letter-spacing:-.03em;\">\n      Comment choisir une typographie pour un site \u00e9ditorial\n    <\/h1>\n    <p style=\"margin:10px 0 0 0;font:400 16px\/1.9 system-ui;color:#333;max-width:80ch;\">\n      Un site \u201cblog\/magazine\u201d vit par le texte. Une bonne typographie, ce n\u2019est pas une police \u201cbelle\u201d :\n      c\u2019est un syst\u00e8me qui rend la lecture fluide et l\u2019identit\u00e9 coh\u00e9rente.\n    <\/p>\n\n    <div style=\"margin-top:14px;border-radius:16px;border:1px solid #e8e8e8;background:#fff;padding:14px;\">\n      <div style=\"display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;\">\n        <div style=\"border:1px solid #e8e8e8;border-radius:14px;padding:12px;background:#fff;\">\n          <p style=\"margin:0;font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">Texte long<\/p>\n          <p style=\"margin:10px 0 0 0;font:400 14px\/1.7 system-ui;color:#333;\">Lisible, neutre, stable<\/p>\n        <\/div>\n        <div style=\"border:1px solid #e8e8e8;border-radius:14px;padding:12px;background:#fff;\">\n          <p style=\"margin:0;font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">Titres<\/p>\n          <p style=\"margin:10px 0 0 0;font:600 14px\/1.7 system-ui;color:#333;\">Caract\u00e8re, impact<\/p>\n        <\/div>\n        <div style=\"border:1px solid #e8e8e8;border-radius:14px;padding:12px;background:#fff;\">\n          <p style=\"margin:0;font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">UI<\/p>\n          <p style=\"margin:10px 0 0 0;font:500 14px\/1.7 system-ui;color:#333;\">Boutons, labels, meta<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/header>\n\n  <section style=\"max-width:84ch;margin:18px auto 0 auto;\">\n    <h2 style=\"font:900 18px\/1.2 system-ui;margin:18px 0 10px 0;\">1) Commence par le texte long<\/h2>\n    <p style=\"margin:0 0 12px 0;font:400 16px\/1.95 system-ui;\">\n      Choisis d\u2019abord une police de paragraphe : lisible en petits corps, avec un bon rendu en \u00e9cran.\n      Une sans-serif moderne marche tr\u00e8s bien pour un blog design (propre, actuel).\n    <\/p>\n\n    <h2 style=\"font:900 18px\/1.2 system-ui;margin:18px 0 10px 0;\">2) Ajoute une police titre avec de la personnalit\u00e9<\/h2>\n    <p style=\"margin:0 0 12px 0;font:400 16px\/1.95 system-ui;\">\n      Les titres doivent porter l\u2019identit\u00e9 (c\u2019est l\u00e0 que tu peux aller plus \u201cbold\u201d, plus g\u00e9om\u00e9trique, plus styl\u00e9).\n      Garde une hi\u00e9rarchie simple : H1 massif, H2 clair, H3 discret.\n    <\/p>\n\n    <h2 style=\"font:900 18px\/1.2 system-ui;margin:18px 0 10px 0;\">3) Fixe des r\u00e8gles (sinon c\u2019est le chaos)<\/h2>\n    <ul style=\"margin:0 0 12px 18px;font:400 16px\/1.95 system-ui;\">\n      <li>Texte : 16\u201318px \u2022 interligne 1.7 \u00e0 2.0<\/li>\n      <li>Largeur de ligne : 60\u201385 caract\u00e8res<\/li>\n      <li>Une seule \u201cfantaisie\u201d (italique, capitales, etc.)<\/li>\n    <\/ul>\n\n    <div style=\"border:1px solid #e8e8e8;border-radius:18px;background:#fafafa;padding:14px;\">\n      <p style=\"margin:0;font:700 14px\/1.7 system-ui;\">\n        Astuce : si ton site semble \u201ccheap\u201d, c\u2019est souvent l\u2019interligne et les espacements, pas la police.\n      <\/p>\n    <\/div>\n  <\/section>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>TYPOGRAPHIE Guide \u00e9ditorial lisibilit\u00e9 \u2022 hi\u00e9rarchie \u2022 ton Comment choisir une typographie pour un site \u00e9ditorial Un site \u201cblog\/magazine\u201d vit par le texte. Une bonne typographie, ce n\u2019est pas une police \u201cbelle\u201d : c\u2019est un syst\u00e8me qui rend la lecture fluide et l\u2019identit\u00e9 coh\u00e9rente. Texte long Lisible, neutre, stable Titres Caract\u00e8re, impact UI Boutons, labels,&#8230;<\/p>\n<p class=\"more-link\"><a href=\"https:\/\/wp11.infocom.work\/index.php\/2025\/12\/21\/comment-choisir-une-typographie-pour-un-site-editorial\/\" class=\"themebutton3\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-207","post","type-post","status-publish","format-standard","hentry","category-typo"],"_links":{"self":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":2,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts\/207\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/posts\/207\/revisions\/227"}],"wp:attachment":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/media?parent=207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/categories?post=207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/tags?post=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}