Generated by SassMeister.com.

input.scss

@use 'sass:map';
@use 'sass:math';

$font-size-base: 1rem !default;
$font-size-min: 0.875rem !default;
$font-size-max: 1.125rem !default;

$font-ratios: () !default;
$font-ratios: map.merge(
    (
        'minor-second': 1.067,
        'major-second': 1.125,
        'minor-third': 1.2,
        'major-third': 1.25,
        'perfect-fourth': 1.333,
        'augmented-fourth': 1.414,
        'perfect-fifth': 1.5,
        'golden-ratio': 1.618
    ),
    $font-ratios
);

$font-sizes: () !default;
$font-sizes: map.merge(
    (
        'sm': -1,
        'base': 0,
        'md': 1,
        'lg': 2,
        'xl': 3,
        'xxl': 4,
        'xxxl': 5,
    ),
    $font-sizes
);

@function type-ratio($key) {
    @return map.get($font-ratios, $key);
}

@function font-size($key) {
    $size: map.get($font-sizes, $key);
    @return round(type-size($size), 2);
}

@function type-var($size) {
    @return var(--font-size-#{$size});
}

$font-size-ratio: type-ratio('major-third') !default;


@function type-size($step, $base: $font-size-base, $ratio: $font-size-ratio) {
    @return math.pow($ratio, $step) * $base;
}

// https://stackoverflow.com/a/74399869
@function round($value, $fraction-digits: 0) {
  $power: math.pow(10, $fraction-digits);
  @return (math.round($power * $value) / $power);
}

$type-scale-min: 1.25;
$type-scale-max: 1.333;

@mixin generate-typography() {
    :root {
        @each $step, $size in $font-sizes {
            $font-size: round(type-size($size), 2);
            $min: round($font-size-min * math.pow($type-scale-min, $size), 3);
            $min2: round($font-size-min * $font-size-ratio, 3);
            $max: round($font-size-max * math.pow($type-scale-max, $size), 2);
            
            $tes: #{calc(#{$font-size-min} + (#{$font-size-max} - #{$font-size-min}) * ((100vw - 48rem) / (120 - 48)))};
            
            
            --font-size-#{$step}: clamp(#{$font-size}, (0.5vw + 14px), #{$max});
            // --c: #{type-var('md')};
            --min: #{$min};
            --max: #{$max};
            --c: #{$min2};
            --tes: #{$tes};
        }
    }
    
    h1 {
        font-size: type-var('xxxl');
    }
    
    h2 {
        font-size: type-var('xxl');
    }
    
    h3 {
        font-size: type-var('xl');
    }
    
    h4 {
        font-size: type-var('lg');
    }
    
    h5 {
        font-size: type-var('md');
    }
    
    p {
        font-size: type-var('base');
    }
    
    small {
        font-size: type-var('sm');
    }
}

@include generate-typography();

output.css

:root {
  --font-size-sm: clamp(0.8rem, (0.5vw + 14px), 0.84rem);
  --min: 0.7rem;
  --max: 0.84rem;
  --c: 1.094rem;
  --tes: calc(0.875rem + (1.125rem - 0.875rem) * ((100vw - 48rem) / (120 - 48)));
  --font-size-base: clamp(1rem, (0.5vw + 14px), 1.13rem);
  --min: 0.875rem;
  --max: 1.13rem;
  --c: 1.094rem;
  --tes: calc(0.875rem + (1.125rem - 0.875rem) * ((100vw - 48rem) / (120 - 48)));
  --font-size-md: clamp(1.25rem, (0.5vw + 14px), 1.5rem);
  --min: 1.094rem;
  --max: 1.5rem;
  --c: 1.094rem;
  --tes: calc(0.875rem + (1.125rem - 0.875rem) * ((100vw - 48rem) / (120 - 48)));
  --font-size-lg: clamp(1.56rem, (0.5vw + 14px), 2rem);
  --min: 1.367rem;
  --max: 2rem;
  --c: 1.094rem;
  --tes: calc(0.875rem + (1.125rem - 0.875rem) * ((100vw - 48rem) / (120 - 48)));
  --font-size-xl: clamp(1.95rem, (0.5vw + 14px), 2.66rem);
  --min: 1.709rem;
  --max: 2.66rem;
  --c: 1.094rem;
  --tes: calc(0.875rem + (1.125rem - 0.875rem) * ((100vw - 48rem) / (120 - 48)));
  --font-size-xxl: clamp(2.44rem, (0.5vw + 14px), 3.55rem);
  --min: 2.136rem;
  --max: 3.55rem;
  --c: 1.094rem;
  --tes: calc(0.875rem + (1.125rem - 0.875rem) * ((100vw - 48rem) / (120 - 48)));
  --font-size-xxxl: clamp(3.05rem, (0.5vw + 14px), 4.73rem);
  --min: 2.67rem;
  --max: 4.73rem;
  --c: 1.094rem;
  --tes: calc(0.875rem + (1.125rem - 0.875rem) * ((100vw - 48rem) / (120 - 48)));
}

h1 {
  font-size: var(--font-size-xxxl);
}

h2 {
  font-size: var(--font-size-xxl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

h5 {
  font-size: var(--font-size-md);
}

p {
  font-size: var(--font-size-base);
}

small {
  font-size: var(--font-size-sm);
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}