La typo
dans le navigateur

<div class="vf" id="sample">Owl Concept</div>
<label>poids <span id="wVal">400</span>
  <input type="range" id="wght" min="100" max="1000" step="10" value="400">
</label>
<label>inclinaison <span id="sVal">0</span>
  <input type="range" id="slnt" min="-10" max="0" step="1" value="0">
</label>

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

.vf {
  font-family: 'Roboto Flex', sans-serif; font-size: 3rem; color: #e8edf7;
  /* un seul fichier → 100→1000 en continu, aucune graisse « en escalier » */
  font-variation-settings: 'wght' var(--w, 400), 'slnt' var(--s, 0);
}
label { display: block; color: #8492ac; font-size: .8rem; margin-top: .5rem; }

const sample = document.getElementById('sample');
const wght = document.getElementById('wght');
const slnt = document.getElementById('slnt');

function apply() {
  sample.style.setProperty('--w', wght.value);
  sample.style.setProperty('--s', slnt.value);
  document.getElementById('wVal').textContent = wght.value;
  document.getElementById('sVal').textContent = slnt.value;
}
wght.addEventListener('input', apply);
slnt.addEventListener('input', apply);
apply();

<div class="box">
  <span class="text">Aa</span>
</div>

.box {
  container-type: inline-size;   /* devient un conteneur de requête */
  resize: horizontal; overflow: auto; width: 220px; padding: 1rem;
  border: 1px solid #1e2d44; border-radius: 8px;
}
/* 12% de la largeur du CONTENEUR, borné entre 1.2rem et 4rem — sans media query */
.text { font-size: clamp(1.2rem, 12cqi, 4rem); color: #c9952a; font-weight: 700; }

<p class="pretty" lang="fr">
  L'anticonstitutionnellement, certains paragraphes un peu longs finissent
  par une vilaine ligne orpheline en bas de bloc.
</p>

.pretty {
  max-width: 24ch; color: #c9d4e8;
  text-wrap: pretty;   /* équilibre les dernières lignes, évite les orphelines */
  hyphens: auto;       /* césure — nécessite l'attribut lang sur le texte */
}

<div class="type" id="sample">Affiche fi fl — Small Caps — 0123456789</div>
<button data-feat="liga" class="is-on">Ligatures</button>
<button data-feat="smcp">Petites capitales</button>
<button data-feat="onum">Chiffres anciens</button>

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400&display=swap');

.type { font-family: 'Fraunces', serif; font-size: 1.6rem; color: #e8edf7; }
/* chaque classe active une fonctionnalité OpenType de la police */
.type.liga { font-variant-ligatures: common-ligatures; }
.type.smcp { font-variant-caps: small-caps; }
.type.onum { font-variant-numeric: oldstyle-nums; }

document.querySelectorAll('button[data-feat]').forEach((btn) => {
  const feat = btn.dataset.feat;
  const sync = () =>
    document.getElementById('sample').classList.toggle(feat, btn.classList.contains('is-on'));
  sync();                                        // état initial
  btn.addEventListener('click', () => { btn.classList.toggle('is-on'); sync(); });
});

<p class="measure" id="text">
  La typographie est l'art d'agencer les caractères pour rendre le langage
  lisible. Une bonne mesure évite à l'œil de se perdre ; un bon interligne
  laisse le texte respirer.
</p>
<label>mesure <span id="mVal">62ch</span>
  <input type="range" id="meas" min="30" max="80" step="1" value="62">
</label>
<label>interligne <span id="lVal">1.6</span>
  <input type="range" id="lh" min="1.1" max="2.2" step="0.05" value="1.6">
</label>

.measure {
  max-width: var(--measure, 62ch);   /* mesure : ~caractères par ligne (idéal 60–75) */
  line-height: var(--lh, 1.6);        /* interligne */
  color: #c9d4e8;
}
label { display: block; color: #8492ac; font-size: .8rem; }

const text = document.getElementById('text');
const meas = document.getElementById('meas');
const lh   = document.getElementById('lh');

function apply() {
  text.style.setProperty('--measure', meas.value + 'ch');
  text.style.setProperty('--lh', lh.value);
  document.getElementById('mVal').textContent = meas.value + 'ch';
  document.getElementById('lVal').textContent = (+lh.value).toFixed(2);
}
meas.addEventListener('input', apply);
lh.addEventListener('input', apply);
apply();

<div class="gradient">Typographie</div>

.gradient {
  font-size: 3rem; font-weight: 800;
  /* le fond est découpé au tracé des lettres */
  background: linear-gradient(100deg, #c9952a, #c586c0, #4577e8, #c9952a);
  background-size: 300% 100%;
  background-clip: text; -webkit-background-clip: text;
  color: transparent;
  animation: shift 8s linear infinite;   /* on anime la position du dégradé */
}
@keyframes shift { to { background-position: 300% 0; } }