La typographie est le seul poste qui distingue vraiment deux sites au meme budget : une palette se copie en dix minutes, une composition non. Quatre regles tenues partout : une seule famille exploitee a fond plutot que deux a moitie, des titres fluides en clamp() plutot que des points de rupture, une mesure entre 45 et 75 signes, et aucune police distante imposee.
A. Echelle et composition
Titres demesures, echelle a rapport constant, accents typographiques, titre masque par une image, titre contourne.
L'ouverture d'un site vitrine. La taille est fluide entre 34 et 104 px, l'interlettrage se resserre a mesure que le corps grossit : sans cela un grand titre parait delave.
Six corps, un seul rapport. L'echelle suit une progression constante (facteur 1,25) : c'est elle qui donne la coherence, pas le choix des valeurs prises une a une.
un rapport de 1,25 entre chaque cran, arrondi au pixel
Une pompe a chaleur posee proprement.
Le devis en 24 heures, pas en trois semaines.
Nos equipes sont salariees.
Titre avec accent typographique
Un mot traite differemment du reste : italique, serif, ou simple changement de graisse. C'est la maniere la moins couteuse de donner un ton, et la plus solide dans le temps.
Voir le codeMasquer le code
<div class="ty-demo ty-accents">
<h2>Une pompe a chaleur posee <em>proprement</em>.</h2>
<h2>Le devis en <b>24 heures</b>, pas en trois semaines.</h2>
<h2>Nos equipes sont <u>salariees</u>.</h2>
</div>
Le titre laisse voir une texture a travers ses lettres. Tres visible, donc a reserver a un seul titre par page ; le repli affiche simplement le titre en couleur pleine.
Lettrine, colonnes de magazine, citation mise en scene, numerotation, intertitre en marge, texte imbrique avec une forme.
Le remplacement d'une chaudiere fioul par une pompe a chaleur air/eau reste, en 2026, l'operation la plus subventionnee du parc residentiel. Le montant de MaPrimeRenov depend du revenu fiscal de reference du foyer et de la zone climatique du logement, ce qui explique des ecarts importants d'un dossier a l'autre.
Les certificats d'economie d'energie s'ajoutent a cette aide et sont verses par le fournisseur d'energie, le plus souvent sous forme de deduction directe sur le devis.
Lettrine
Ouverture d'un article. La lettrine occupe trois lignes exactement : au-dela elle decroche du paragraphe et devient un ornement isole.
Voir le codeMasquer le code
<div class="ty-article">
<p class="ty-lettrine">Le remplacement d'une chaudiere fioul par une pompe a chaleur air/eau reste, en 2026, l'operation la plus subventionnee du parc residentiel. Le montant de MaPrimeRenov depend du revenu fiscal de reference du foyer et de la zone climatique du logement, ce qui explique des ecarts importants d'un dossier a l'autre.</p>
<p>Les certificats d'economie d'energie s'ajoutent a cette aide et sont verses par le fournisseur d'energie, le plus souvent sous forme de deduction directe sur le devis.</p>
</div>
Le remplacement d'une chaudiere fioul par une pompe a chaleur air/eau reste l'operation la plus subventionnee du parc residentiel francais.
Le montant de MaPrimeRenov depend du revenu fiscal de reference et de la zone climatique, ce qui explique des ecarts importants d'un dossier a l'autre.
Les certificats d'economie d'energie s'ajoutent a cette aide et sont verses par le fournisseur, generalement sous forme de deduction directe sur le devis.
La TVA a taux reduit de 5,5 % s'applique aux travaux d'amelioration de la performance energetique, a condition que l'attestation soit signee avant le debut du chantier.
Colonnes de magazine
Un texte long sur ecran large. Les colonnes se reduisent a une seule sous 700 px, sinon la ligne devient trop courte et la lecture hache.
Voir le codeMasquer le code
<div class="ty-colonnes">
<p>Le remplacement d'une chaudiere fioul par une pompe a chaleur air/eau reste l'operation la plus subventionnee du parc residentiel francais.</p>
<p>Le montant de MaPrimeRenov depend du revenu fiscal de reference et de la zone climatique, ce qui explique des ecarts importants d'un dossier a l'autre.</p>
<p>Les certificats d'economie d'energie s'ajoutent a cette aide et sont verses par le fournisseur, generalement sous forme de deduction directe sur le devis.</p>
<p>La TVA a taux reduit de 5,5 % s'applique aux travaux d'amelioration de la performance energetique, a condition que l'attestation soit signee avant le debut du chantier.</p>
</div>
Intervention rapide et proprete irreprochable. La pompe a chaleur a ete posee en deux jours et le dossier MaPrimeRenov monte par leurs soins.
Marie D.Neuilly-sur-Marne, aout 2026
Citation mise en scene
Un temoignage sorti du flux. Le guillemet ouvrant est decoratif et n'entre pas dans la mesure du texte : il deborde a gauche.
Voir le codeMasquer le code
<figure class="ty-citation">
<blockquote>Intervention rapide et proprete irreprochable. La pompe a chaleur a ete posee en deux jours et le dossier MaPrimeRenov monte par leurs soins.</blockquote>
<figcaption><b>Marie D.</b><span>Neuilly-sur-Marne, aout 2026</span></figcaption>
</figure>
Releve sur place et etude thermique offerte, sous cinq jours.
02
Devis et aides
Devis detaille, aides deduites, dossier monte par nos soins.
03
Pose
Par nos equipes salariees, en une a trois journees.
Numerotation editoriale
Une liste d'etapes ou d'arguments. Le numero est en gros, pale, et sort dans la marge : il rythme la page sans concurrencer les titres.
Voir le codeMasquer le code
<ol class="ty-numeros">
<li><b>01</b><div><strong>Visite technique</strong><p>Releve sur place et etude thermique offerte, sous cinq jours.</p></div></li>
<li><b>02</b><div><strong>Devis et aides</strong><p>Devis detaille, aides deduites, dossier monte par nos soins.</p></div></li>
<li><b>03</b><div><strong>Pose</strong><p>Par nos equipes salariees, en une a trois journees.</p></div></li>
</ol>
MaPrimeRenov, les certificats d'economie d'energie et la TVA a 5,5 % se cumulent. Nous montons le dossier et deduisons les aides du devis.
Delais
Trois semaines en moyenne entre la signature et la pose, selon la disponibilite du materiel et la saison.
Garantie
Cinq ans pieces et main d'oeuvre sur l'ensemble de l'installation, entretien annuel inclus la premiere annee.
Intertitre en marge
Sur ecran large, l'intertitre se place a gauche du paragraphe plutot qu'au-dessus. Le texte garde sa mesure et la page respire.
Voir le codeMasquer le code
<div class="ty-marge">
<div><h4>Aides</h4><p>MaPrimeRenov, les certificats d'economie d'energie et la TVA a 5,5 % se cumulent. Nous montons le dossier et deduisons les aides du devis.</p></div>
<div><h4>Delais</h4><p>Trois semaines en moyenne entre la signature et la pose, selon la disponibilite du materiel et la saison.</p></div>
<div><h4>Garantie</h4><p>Cinq ans pieces et main d'oeuvre sur l'ensemble de l'installation, entretien annuel inclus la premiere annee.</p></div>
</div>
Le remplacement d'une chaudiere fioul par une pompe a chaleur air/eau reste, en 2026, l'operation la plus subventionnee du parc residentiel. Le montant depend du revenu fiscal de reference du foyer et de la zone climatique du logement.
Les certificats d'economie d'energie s'ajoutent a cette aide et sont verses par le fournisseur d'energie, le plus souvent sous forme de deduction directe sur le devis remis au client.
Texte et image imbriques
L'image est enroulee par le texte au lieu d'etre posee a cote. shape-outside suit la forme reelle plutot que le rectangle, ce qui evite le trou blanc habituel.
Voir le codeMasquer le code
<div class="ty-imbrique">
<div class="ty-imbrique__forme"></div>
<p>Le remplacement d'une chaudiere fioul par une pompe a chaleur air/eau reste, en 2026, l'operation la plus subventionnee du parc residentiel. Le montant depend du revenu fiscal de reference du foyer et de la zone climatique du logement.</p>
<p>Les certificats d'economie d'energie s'ajoutent a cette aide et sont verses par le fournisseur d'energie, le plus souvent sous forme de deduction directe sur le devis remis au client.</p>
</div>
Huit associations qui fonctionnent. La regle : contraster franchement (serif avec sans) ou ne pas contraster du tout (une seule famille en deux graisses). L'entre-deux fait accident.
Voir le codeMasquer le code
<div class="ty-couples">
<div><b class="ty-serif">Iowan Old Style</b><i class="ty-sys">system-ui</i><small>Cabinet, bureau d'etudes, artisan premium</small></div>
<div><b class="ty-sys" style="font-weight:800">system-ui 800</b><i class="ty-sys">system-ui 400</i><small>Produit logiciel, outil interne</small></div>
<div><b class="ty-etroit">Helvetica condensed</b><i class="ty-sys">system-ui</i><small>Signaletique, chantier, sportif</small></div>
<div><b class="ty-times">Times New Roman</b><i class="ty-mono">ui-monospace</i><small>Editorial, revue, institutionnel</small></div>
<div><b class="ty-rond">Avenir Next</b><i class="ty-rond">Avenir Next 400</i><small>Sante, services a la personne</small></div>
<div><b class="ty-mono">ui-monospace</b><i class="ty-sys">system-ui</i><small>Technique, supervision, donnees</small></div>
</div>
titre en une famille, texte courant en une autre, jamais trois
text-wrap: balance
Un titre dont les lignes sont equilibrees plutot que coupees au hasard
Sur les titres uniquement, jusqu'a 6 lignes.
text-wrap: pretty
Un paragraphe dont la derniere ligne ne se reduit jamais a un seul mot orphelin en bas du bloc.
Sur les paragraphes.
font-variant-numeric: tabular-nums
4 280,00 1 890,00 12 400,00
Sur tous les montants et les tableaux.
hyphens: auto
Un texte justifie sans cesures produit des rivieres blanches particulierement disgracieuses.
Avec text-align: justify, et l'attribut lang.
font-feature-settings
Affiche — office — final
Ligatures et chiffres elzeviriens quand la police les porte.
Reglages fins
Ce qui separe un texte compose d'un texte pose. Cinq reglages, tous natifs, tous a appliquer par defaut sur un site editorial.
Voir le codeMasquer le code
<div class="ty-reglages">
<div><code>text-wrap: balance</code><p class="ty-eq">Un titre dont les lignes sont equilibrees plutot que coupees au hasard</p><small>Sur les titres uniquement, jusqu'a 6 lignes.</small></div>
<div><code>text-wrap: pretty</code><p class="ty-jolie">Un paragraphe dont la derniere ligne ne se reduit jamais a un seul mot orphelin en bas du bloc.</p><small>Sur les paragraphes.</small></div>
<div><code>font-variant-numeric: tabular-nums</code><p class="ty-tab">4 280,00<br>1 890,00<br>12 400,00</p><small>Sur tous les montants et les tableaux.</small></div>
<div><code>hyphens: auto</code><p class="ty-cesure" lang="fr">Un texte justifie sans cesures produit des rivieres blanches particulierement disgracieuses.</p><small>Avec text-align: justify, et l'attribut lang.</small></div>
<div><code>font-feature-settings</code><p class="ty-liga">Affiche — office — final</p><small>Ligatures et chiffres elzeviriens quand la police les porte.</small></div>
</div>
<!-- 1. Preconnexion : gagne 100 a 300 ms -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 2. display=swap : le texte s'affiche tout de suite avec le repli -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;600;800&display=swap">
/* 3. Le repli reste declare, et la pile complete est portee par un jeton */
:root {
--font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* 4. Ajuster le repli pour que le texte ne saute pas a l'arrivee
de la police : les trois valeurs se mesurent une fois. */
@font-face {
font-family: "Instrument Sans repli";
src: local("Helvetica Neue"), local("Arial");
size-adjust: 104%;
ascent-override: 92%;
descent-override: 24%;
}
Sans display=swap, le texte reste invisible jusqu'a 3 secondes. Sans repli ajuste,
la page saute a l'arrivee de la police : c'est le defaut le plus visible d'un site par ailleurs soigne.
Tout le catalogue fonctionne sans aucune police distante, ce n'est donc jamais un prealable.
Ajouter une police distante
Quand la pile systeme ne suffit pas. Trois precautions : preconnexion, affichage immediat avec la police de repli, et un repli metriquement proche pour que le texte ne saute pas au chargement.
Voir le codeMasquer le code
<div class="mv-code">
<pre><code><!-- 1. Preconnexion : gagne 100 a 300 ms -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 2. display=swap : le texte s'affiche tout de suite avec le repli -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;600;800&display=swap">
/* 3. Le repli reste declare, et la pile complete est portee par un jeton */
:root {
--font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* 4. Ajuster le repli pour que le texte ne saute pas a l'arrivee
de la police : les trois valeurs se mesurent une fois. */
@font-face {
font-family: "Instrument Sans repli";
src: local("Helvetica Neue"), local("Arial");
size-adjust: 104%;
ascent-override: 92%;
descent-override: 24%;
}</code></pre>
<p class="mv-note">Sans <code>display=swap</code>, le texte reste invisible jusqu'a 3 secondes. Sans repli ajuste,
la page saute a l'arrivee de la police : c'est le defaut le plus visible d'un site par ailleurs soigne.
Tout le catalogue fonctionne sans aucune police distante, ce n'est donc jamais un prealable.</p>
</div>
/* aucun style specifique : le socle .btn suffit */
preconnect + display=swap + un jeton --font-ui qui porte la pile complete