Variable Fonts & Motion

Instead of loading separate font files for Bold, Italic, Light, and Condensed weights, variable fonts allow continuous interpolation along custom axes with zero layout shift.

Key Axes Used in This Portfolio

• "wdth": Dynamically controls condensed vs expanded letterforms during scroll.
• "slnt": Subtle kinetic slanting without pseudo-italic distortion.
• "ROND": Softening corner roundness on interactive magnetic buttons.

/* Smoothly morph font width based on cursor velocity */
.dynamic-title {
  font-variation-settings: "wdth" var(--scroll-width, 110), "wght" 900, "slnt" -10;
  transition: font-variation-settings 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}