{"id":1743,"date":"2026-08-13T20:04:47","date_gmt":"2026-08-13T20:04:47","guid":{"rendered":"https:\/\/3615graphisme.fr\/minitel\/?p=1743"},"modified":"2026-08-16T09:37:14","modified_gmt":"2026-08-16T09:37:14","slug":"le-crenage","status":"publish","type":"post","link":"https:\/\/3615graphisme.fr\/minitel\/le-crenage\/","title":{"rendered":"le cr\u00e9nage"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n.article-title {\n\ntext-align: center;\n  width: 100%;\n  max-width: 100%;\n  min-height: 100px;\ntext-shadow:\n2px 2px 3px #beff99,\n0 0 1em #c0ffa0,\n0 0 0.2em #c6ffb5;\n0 0 0.5em #c6ffb5;\n\t\nfont-family: 'Data70';\n  color: white;\n  font-size: 80px;\n  position: relative;\n  width: 800px;\n  margin: 30px auto;\n}\n\n@keyframes noise-anim {\n  0% {\n    clip: rect(100px, 9999px, 5px, 0);\n  }\n  5% {\n    clip: rect(17px, 9999px, 8px, 0);\n  }\n  10% {\n    clip: rect(47px, 9999px, 20px, 0);\n  }\n  15% {\n    clip: rect(7px, 9999px, 20px, 0);\n  }\n  20% {\n    clip: rect(4px, 9999px, 76px, 0);\n  }\n  25% {\n    clip: rect(15px, 9999px, 54px, 0);\n  }\n  30% {\n    clip: rect(71px, 9999px, 2px, 0);\n  }\n  35% {\n    clip: rect(14px, 9999px, 96px, 0);\n  }\n  40% {\n    clip: rect(38px, 9999px, 28px, 0);\n  }\n  45% {\n    clip: rect(66px, 9999px, 37px, 0);\n  }\n  50% {\n    clip: rect(82px, 9999px, 25px, 0);\n  }\n  55% {\n    clip: rect(78px, 9999px, 52px, 0);\n  }\n  60% {\n    clip: rect(14px, 9999px, 88px, 0);\n  }\n  65% {\n    clip: rect(24px, 9999px, 69px, 0);\n  }\n  70% {\n    clip: rect(49px, 9999px, 94px, 0);\n  }\n  75% {\n    clip: rect(98px, 9999px, 95px, 0);\n  }\n  80% {\n    clip: rect(40px, 9999px, 2px, 0);\n  }\n  85% {\n    clip: rect(25px, 9999px, 66px, 0);\n  }\n  90% {\n    clip: rect(89px, 9999px, 31px, 0);\n  }\n  95% {\n    clip: rect(36px, 9999px, 38px, 0);\n  }\n  100% {\n    clip: rect(45px, 9999px, 28px, 0);\n  }\n}\n.article-title:after {text-align: center;\nwidth: 100%;\n  max-width: 100%;\n  min-height: 100px;\n  content: attr(data-text);\n  position: absolute;\n  left: 2px;\n  text-shadow: -1px 0 #00ff0c;\n  top: 0;\n  color: white;\n  background: transparent;\n  overflow: hidden;\n  clip: rect(0, 900px, 0, 0);\n  animation: noise-anim 2s infinite linear alternate-reverse;\n}\n\n@keyframes noise-anim-2 {\n  0% {\n    clip: rect(5px, 9999px, 98px, 0);\n  }\n  5% {\n    clip: rect(1px, 9999px, 39px, 0);\n  }\n  10% {\n    clip: rect(36px, 9999px, 63px, 0);\n  }\n  15% {\n    clip: rect(28px, 9999px, 23px, 0);\n  }\n  20% {\n    clip: rect(7px, 9999px, 73px, 0);\n  }\n  25% {\n    clip: rect(89px, 9999px, 54px, 0);\n  }\n  30% {\n    clip: rect(81px, 9999px, 28px, 0);\n  }\n  35% {\n    clip: rect(49px, 9999px, 65px, 0);\n  }\n  40% {\n    clip: rect(50px, 9999px, 91px, 0);\n  }\n  45% {\n    clip: rect(68px, 9999px, 5px, 0);\n  }\n  50% {\n    clip: rect(84px, 9999px, 100px, 0);\n  }\n  55% {\n    clip: rect(36px, 9999px, 95px, 0);\n  }\n  60% {\n    clip: rect(91px, 9999px, 98px, 0);\n  }\n  65% {\n    clip: rect(70px, 9999px, 22px, 0);\n  }\n  70% {\n    clip: rect(98px, 9999px, 55px, 0);\n  }\n  75% {\n    clip: rect(61px, 9999px, 47px, 0);\n  }\n  80% {\n    clip: rect(80px, 9999px, 13px, 0);\n  }\n  85% {\n    clip: rect(84px, 9999px, 80px, 0);\n  }\n  90% {\n    clip: rect(16px, 9999px, 89px, 0);\n  }\n  95% {\n    clip: rect(7px, 9999px, 58px, 0);\n  }\n  100% {\n    clip: rect(10px, 9999px, 37px, 0);\n  }\n}\n.articletitle:before {\n\n  content: attr(data-text);\n  position: absolute;\n  left: -2px;\n  text-shadow: 1px 0 yellow;\n  top: 0;\n  color: white;\n  background: transparent ;\n  overflow: hidden;\n  clip: rect(0, 900px, 0, 0);\n  animation: noise-anim-2 3s infinite linear alternate-reverse;\n}\n<\/style>\n\n<div class=\"article-title\" data-text=\"Le cr\u00e9nage\">Le cr\u00e9nage<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p id=\"mwFg\">Le <b id=\"mwFw\">cr\u00e9nage<\/b>, ou <b id=\"mwGA\"><a id=\"mwGQ\" title=\"Approche (typographie)\" href=\"https:\/\/fr.wikipedia.org\/wiki\/Approche_(typographie)\" rel=\"mw:WikiLink noopener\" target=\"_blank\">approche<\/a> de paire<\/b> (<i id=\"mwGg\"><span id=\"mwGw\" class=\"lang-en\" lang=\"en\" data-mw=\"{&quot;parts&quot;:[{&quot;template&quot;:{&quot;target&quot;:{&quot;wt&quot;:&quot;langue&quot;,&quot;href&quot;:&quot;.\/Mod\u00e8le:Langue&quot;},&quot;params&quot;:{&quot;1&quot;:{&quot;wt&quot;:&quot;en&quot;},&quot;2&quot;:{&quot;wt&quot;:&quot;kerning&quot;}},&quot;i&quot;:0}}]}\">kerning<\/span><\/i> en anglais), est l&rsquo;ajustement de l&rsquo;espacement entre les paires de <a id=\"mwHA\" class=\"mw-redirect\" title=\"Lettre (typographie)\" href=\"https:\/\/fr.wikipedia.org\/wiki\/Lettre_(typographie)\" rel=\"mw:WikiLink noopener\" target=\"_blank\">lettres<\/a> d&rsquo;une <a id=\"mwHQ\" title=\"Police de caract\u00e8res\" href=\"https:\/\/fr.wikipedia.org\/wiki\/Police_de_caract\u00e8res\" rel=\"mw:WikiLink noopener\" target=\"_blank\">police de caract\u00e8res<\/a> \u00e0 <a id=\"mwHg\" title=\"Chasse (typographie)\" href=\"https:\/\/fr.wikipedia.org\/wiki\/Chasse_(typographie)\" rel=\"mw:WikiLink noopener\" target=\"_blank\">chasse<\/a> variable. Dans une police bien cr\u00e9n\u00e9e, l&rsquo;espacement optique entre deux lettres est identique, quelle que soit la paire de lettres consid\u00e9r\u00e9e. Dans une fonte de caract\u00e8re cr\u00e9\u00e9e dans les r\u00e8gles de l&rsquo;art, le cr\u00e9nage est fait manuellement par le fondeur pour toutes les paires de caract\u00e8res une \u00e0 une. Dans le cas contraire, les logiciels de gestion de fonte peuvent le faire automatiquement, mais cela donne un moins bon r\u00e9sultat.<\/p>\n<p id=\"mwHw\">Les paires de caract\u00e8res doivent \u00eatre test\u00e9es et r\u00e9gl\u00e9es dans les deux combinaisons possibles (par exemple, \u00ab<span id=\"mwIA\">\u00a0<\/span>ab<span id=\"mwIQ\">\u00a0<\/span>\u00bb et \u00ab<span id=\"mwIg\">\u00a0<\/span>ba<span id=\"mwIw\">\u00a0<\/span>\u00bb), l&rsquo;espacement \u00e0 droite et \u00e0 gauche de chaque caract\u00e8re \u00e9tant souvent diff\u00e9rent en fonction de sa forme.<\/p>\n<p id=\"mwJA\">Enfin, certaines lettres peuvent se toucher comme les doubles t, doubles f ou fi (tt, ff, fi)<span id=\"mwJQ\">\u00a0<\/span>: ce sont les <a id=\"mwJg\" class=\"mw-redirect\" title=\"Ligature (typographie)\" href=\"https:\/\/fr.wikipedia.org\/wiki\/Ligature_(typographie)\" rel=\"mw:WikiLink noopener\" target=\"_blank\">ligatures esth\u00e9tiques<\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<style data-wp-block-html=\"css\">\n.crenage {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n  min-height: 100px;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n\n}\n\n.crenage span {\n  font-family: sans-serif;\n  font-size: 4rem;\n  font-weight: bold;\n  display: inline-block;\n  mix-blend-mode: multiply;\n  \n  animation-name: foo;\n  animation-direction: alternate;\n  animation-duration: 1s;\n  animation-iteration-count: infinite;\n  animation-timing-function: ease-in-out;\n}\n\n@keyframes foo {\n  from { transform: scale(0.9);  color: cyan; font-stretch: 100%; }\n  to {   transform: scale(1.3)\/*translate(0px, 30px) rotate(0.25turn)*\/; color: sandybrown; font-stretch: 250%; }\n}\n\n<\/style>\n\n<div class=\"crenage\">\n\n<p>\n  <span>H<\/span><span>e<\/span><span>l<\/span><span>l<\/span><span>o<\/span><span> <\/span><span>W<\/span><span>o<\/span><span>r<\/span><span>l<\/span><span>d<\/span><span>!<\/span>\n<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le cr\u00e9nage Le cr\u00e9nage, ou approche de paire (kerning en anglais), est l&rsquo;ajustement de l&rsquo;espacement entre les paires de lettres d&rsquo;une police de caract\u00e8res \u00e0 chasse variable. Dans une police bien cr\u00e9n\u00e9e, l&rsquo;espacement optique entre deux lettres est identique, quelle que soit la paire de lettres consid\u00e9r\u00e9e. Dans une fonte de caract\u00e8re cr\u00e9\u00e9e dans les &#8230; <a title=\"le cr\u00e9nage\" class=\"read-more\" href=\"https:\/\/3615graphisme.fr\/minitel\/le-crenage\/\" aria-label=\"En savoir plus sur le cr\u00e9nage\">Lire la suite<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-1743","post","type-post","status-publish","format-standard","hentry","category-typographie"],"_links":{"self":[{"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/posts\/1743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/comments?post=1743"}],"version-history":[{"count":31,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/posts\/1743\/revisions"}],"predecessor-version":[{"id":1975,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/posts\/1743\/revisions\/1975"}],"wp:attachment":[{"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/media?parent=1743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/categories?post=1743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/tags?post=1743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}