A CSS module for fluid and responsive typography, featuring scalable text sizes based on the Golden Ratio and other typographic scales, implemented using the clamp() function for seamless readability across devices.

ResponsiveTypeRatios.css

/**
 * Typographic Scale and Font Size Variables
 *
 * This CSS defines a series of font scales and size variables for responsive typography.
 * The scales are based on musical and mathematical ratios, with the default set to the Golden Ratio.
 *
 * Gist Keywords: typography, responsive, responsiveness, css, variables, custom properties
 * Author: Knol Aust
 */

:root {
  /* Font scale options based on different ratios. Uncomment the desired scale. Default: Golden Ratio */
  /* --font-scale: 1.067;  /* Major Second */
  /* --font-scale: 1.125;  /* Minor Third */
  /* --font-scale: 1.2;    /* Major Third */
  /* --font-scale: 1.25;   /* Perfect Fourth */
  /* --font-scale: 1.333;  /* Augmented Fourth */
  /* --font-scale: 1.414;  /* Perfect Fifth */
  /* --font-scale: 1.5;    /* Minor Sixth */
  --font-scale: 1.618;    /* Golden Ratio */
  /* --font-scale: 1.667;  /* Major Sixth */
  /* --font-scale: 1.778;  /* Minor Seventh */
  /* --font-scale: 1.875;  /* Major Seventh */
  /* --font-scale: 2;      /* Octave */
  /* --font-scale: 2.5;    /* Major Tenth */
  /* --font-scale: 2.667;  /* Major Eleventh */
  /* --font-scale: 3;      /* Major Twelfth */
  /* --font-scale: 3.5;    /* Double Octave */

  /* Font size variables using clamp for responsive sizes */
  --font-size-small: clamp(0.5rem, 0.5rem + (1vw - 0.5rem) / var(--font-scale), 0.75rem);
  --font-size-normal: clamp(0.75rem, 1rem, 1.25rem);
  --font-size-large: clamp(1rem, 1rem * var(--font-scale), 2rem);
  --font-size-xlarge: clamp(1.25rem, 1rem * var(--font-scale) * var(--font-scale), 3rem);
  --font-size-xxlarge: clamp(1.5rem, 1rem * var(--font-scale) * var(--font-scale) * var(--font-scale), 4rem);
}

/* Class-based implementation for easy application of font sizes */
.text-small { font-size: var(--font-size-small); }
.text-normal { font-size: var(--font-size-normal); }
.text-large { font-size: var(--font-size-large); }
.text-xlarge { font-size: var(--font-size-xlarge); }
.text-xxlarge { font-size: var(--font-size-xxlarge); }