CSS Tip

Manual typography using Scroll-driven animations

Add a slider to adjust the font-size of your website using modern CSS features.

@property --i {
  syntax: "<number>";
  inherits: true;
  initial-value: 1; 
}
html {
  --min: 14px;
  --max: 64px;
  --step: 2px;
  
  timeline-scope: --thumb-view;
  animation: i 1s linear;
  animation-timeline: --thumb-view;
  animation-range: entry 100% exit 0%;
  font-size: round(var(--min) + (var(--max) - var(--min))*var(--i),var(--step));
}
@keyframes i {
  to{--i: 0}
}
input[type="range" i]::-webkit-slider-thumb{
  view-timeline: --thumb-view inline;
}

Adjust the slider on the left to control the font-size

See the Pen Fluid typography with slider (CSS-only) by Temani Afif (@t_afif) on CodePen.

More CSS Tips