/**
* 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); }