Generated by SassMeister.com.

input.scss

// Default Typographic Styles
// --------------------------

// Font Families
$font-family--default: "Inter", Arial, Helvetica Neue, Helvetica, sans-serif;
$font-family--display: "Anton", Arial Black, Arial Bold, Gadget, sans-serif;

// Font Weights
$font-weight--400: 400;
$font-weight--500: 500;
$font-weight--700: 700;

// Font Sizes
$font-size--1: clamp(0.9375rem, 0.9203rem + 0.0862vi, 1rem);
$font-size-0: clamp(1.125rem, 1.0905rem + 0.1724vi, 1.25rem);
$font-size-1: clamp(1.35rem, 1.2914rem + 0.2931vi, 1.5625rem);
$font-size-2: clamp(1.62rem, 1.5281rem + 0.4595vi, 1.9531rem);
$font-size-3: clamp(1.944rem, 1.8068rem + 0.6861vi, 2.4414rem);
$font-size-4: clamp(2.3328rem, 2.1345rem + 0.9917vi, 3.0518rem);
$font-size-5: clamp(2.7994rem, 2.5193rem + 1.4005vi, 3.8147rem);
$font-size-6: clamp(3.3592rem, 2.9705rem + 1.9436vi, 4.7684rem);



// Typographic Sass Maps
// ---------------------

// Typography Options
$typography-options: (
  default: (
    weight: $font-weight--500,
    line-height: 1.2,
    letter-spacing: -0.0135rem, // -0.0135rem (calculated by -0.216px / 16px/rem)
    font-sizes: (
      -1: $font-size--1,
      0: $font-size-0,
      1: $font-size-1
    )
  ),
  prose: (
    weight: $font-weight--500,
    line-height: 1.5,
    letter-spacing: -0.01619rem, // -0.01619rem (calculated by -0.259px / 16px/rem)
    font-sizes: (
      -1: $font-size--1,
      0: $font-size-0,
      1: $font-size-1,
      2: $font-size-2
    )
  ),
  strong: (
    weight: $font-weight--700,
    line-height: 1.2,
    letter-spacing: -0.038875rem, // -0.038875rem (calculated by -0.622px / 16px/rem)
    font-sizes: (
      -1: $font-size--1,
      0: $font-size-0,
      1: $font-size-1,
      2: $font-size-2,
      3: $font-size-3,
      4: $font-size-4
    )
  ),
  display: (
    weight: $font-weight--400,
    line-height: 1.05,
    letter-spacing: -0.06719rem, // -0.06719rem (calculated by -1.075px / 16px/rem)
    font-sizes: (
      3: $font-size-3,
      4: $font-size-4,
      5: $font-size-5,
      6: $font-size-6
    )
  )
);



// Mixin for typography styles
// ---------------------------

@mixin typography($option, $size) {
  $option-settings: map-get($typography-options, $option);
  // Apply font-family only for 'display' option
  @if $option == 'display' {
    font-family: $font-family--display;
  }
  font-size: map-get(map-get($option-settings, 'font-sizes'), $size);
  font-weight: map-get($option-settings, 'weight');
  letter-spacing: map-get($option-settings, 'letter-spacing');
  line-height: map-get($option-settings, 'line-height');

}

// Usage example
.bc-hero {
  h1 {
    @include typography('display', 4);
  }
}

output.css

.bc-hero h1 {
  font-family: "Anton", Arial Black, Arial Bold, Gadget, sans-serif;
  font-size: clamp(2.3328rem, 2.1345rem + 0.9917vi, 3.0518rem);
  font-weight: 400;
  letter-spacing: -0.06719rem;
  line-height: 1.05;
}

settings.json

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