← Back to gallery
CSS

Variable Font Weight Morph

A variable typography morph that changes weight, width, and slant axes inside a reserved text track instead of using scale transforms.

variable-fontfont-variation-settingswghtwdthslnt

Variable typography · axis morph

Variable Font Weight Morph

Font variation settings interpolate weight, width, and slant inside a reserved text track so morphing type does not cause nearby layout shift. Three variants demonstrate a wght pulse, a wdth breathing pass, and an editorial slnt + wght combo — each on a fixed inline track.

wght axis · stable track

Weight Pulse

A boldness morph cycles the weight axis from regular up to heavy and back. The preview stage reserves enough inline width for the heaviest frame so neighboring content never shifts as the weight changes.

  • wght
  • font-variation
  • stable width

wdth axis · no scaleX

Width Breathing

Width variation breathes through font-variation-settings rather than geometric `transform: scaleX()` — the glyph design itself widens, no distortion. The reserved text track prevents axis changes from pushing neighboring content around.

  • wdth
  • no scale
  • overflow guard

slnt axis · controlled tilt

Editorial Slant

A restrained slant + weight morph creates motion without distorting glyph geometry. Slant values stay conservative; strong tilt can degrade reading even when the axis is technically supported.

  • slnt
  • typography
  • readability

Variable font inspector

Weight Pulse

  • wght
  • font-variation
  • stable width

A boldness morph cycles the weight axis from regular up to heavy and back. The preview stage reserves enough inline width for the heaviest frame so neighboring content never shifts as the weight changes.

.varfont-word {
  display: inline-block;
  /* Reserve enough inline space for the heaviest / widest frame so
     the morph never shifts neighboring layout. */
  min-width: min(100%, 12ch);
  padding: 0 0.08em;
  overflow: hidden;
  color: #fff7ed;
  font-variation-settings: "wght" 360, "wdth" 100, "slnt" 0;
  text-shadow: 0 0 22px rgba(251, 191, 36, 0.13);
  animation: varfont-axis 3.00s ease-in-out infinite alternate;
}

@keyframes varfont-axis {
  from { font-variation-settings: "wght" 360, "wdth" 100, "slnt" 0; }
  to   { font-variation-settings: "wght" 880, "wdth" 100, "slnt" 0; }
}

@media (prefers-reduced-motion: reduce) {
  .varfont-word {
    animation: none;
    /* Pin to a balanced static axis state for readability. */
    font-variation-settings: "wght" 360, "wdth" 100, "slnt" 0;
  }
}