css

Fluid type with one clamp()

One clamp, one rule, and the fluid type scale everywhere on this site.

cssclamp-fluid-type.css
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
line-height: 1.5;

Why this works

The middle value is the one doing the work: a rem base plus a vw term scales with the viewport, and the outer two stop it going anywhere silly at either end.

What to change

The 0.5vw term. Raise it for a steeper curve, lower it for a flatter one — the two clamps stay as they are.

Copy takes the whole block including the comment. The comment is the part you will want in six months.

More snippets

Three others worth a permalink.

Fluid type with one clamp() css 1
2 
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
line-height: 1.5;
 A grid that wraps itself css 1
2
3
4 
display: grid;
grid-template-columns:
  repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-4);
 A debounce in six lines js 1
2
3
4
5
6
7 
function debounce(fn, ms) {
  let t;
  return (...a) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...a), ms);
  };
}

3comments

Markdown works. Be kind.
  1. MR
    Maya Rodriguez 2 days ago

    The implicit grid explanation finally made this click for me. I had been declaring rows for years without knowing why it sometimes worked anyway.

    1. SS
      Swarnil Singhai 2 days ago

      That is exactly the trap — it works right up until the content count changes. Glad it helped.

  2. DK
    Dan K. 5 days ago

    Would love a follow-up on subgrid. It is the one part I still avoid.