<div class="main">
  <div>
    <h1>Fluid type with less mixin</h1>
    <div class="wrap">
      <h1 class="header1">Fluid typography primary title</h1>
      <h2 class="header2">Fluid typography secondary title</h2>
      <h3 class="header3">Fluid typography tertiary title</h3>
      <h4 class="header4">Fluid typography tertiary title</h4>
      <h5 class="header5">Fluid typography tertiary title</h5>
      <h6 class="header6">Fluid typography tertiary title</h6>
      <p class="bodyCopy">Purus sociis porta aliquam dolor pulvinar vut aliquet risus in, etiam aenean? Nunc phasellus ac tortor ut placerat rhoncus, scelerisque vel natoque pulvinar porta. Augue placerat, nunc et, amet nec enim elit, sit! Odio tortor natoque urna urna turpis, augue scelerisque! Phasellus, in, diam, parturient phasellus, ac porta. Nascetur duis.</p>
    </div>
  </div>
  <div>
  <h1>Fluid type with clamp()</h1>
  <div class="wrap">
    <h1 class="h1">Fluid typography primary title</h1>
    <h2 class="h2">Fluid typography secondary title</h2>
    <h3 class="h3">Fluid typography tertiary title</h3>
    <h4 class="h4">Fluid typography tertiary title</h4>
    <h5 class="h5">Fluid typography tertiary title</h5>
    <h6 class="h6">Fluid typography tertiary title</h6>
    <p class="p">Purus sociis porta aliquam dolor pulvinar vut aliquet risus in, etiam aenean? Nunc phasellus ac tortor ut placerat rhoncus, scelerisque vel natoque pulvinar porta. Augue placerat, nunc et, amet nec enim elit, sit! Odio tortor natoque urna urna turpis, augue scelerisque! Phasellus, in, diam, parturient phasellus, ac porta. Nascetur duis.</p>
    </div>
  </div>
</div>
// type will display red for browsers that don't support clamp

:root {
  --smaller-line-height: 1.2;
  --base-line-height: 1.5;
  --primary-font-weight-bold: 700;
  --primary-font-weight-normal: 400;
  --base-header-color: black;
  --base-margin-top: 0.5rem;
  --base-margin-bottom: 0;
}

// breakpoints
@xlg-desktop : 1440px;
@lg-desktop : 1280px;
@desktop : 1024px;
@tablet : 768px;
@mobile : 320px;
@base: 16;

// mixin
.fluid-typography-rem(@min-screen: 320px, @max-screen: 1600px, @base-font: 16px, @min-font, @max-font, @fallbackFontSize) {
    // min size font
    font-size: @min-font;

    @media screen and (min-width: unit((@min-screen / @base-font), ~'rem')) {
        font-size: ~'@{fallbackFontSize}';
        font-size: calc(
            @min-font ~' + ' unit(@max-font - @min-font) ~' * ((100vw - '
                unit((@min-screen / @base-font), ~'rem') ~') /' unit(
                    (@max-screen / @base-font) - (@min-screen / @base-font)
                ) ~')'
        );
    }

    @media screen and (min-width: unit((@max-screen / @base-font), ~'rem')) {
        // max size font
        font-size: @max-font;
    }
}


// shared type styles
h1, h2, h4, h5 {
  color: var(--base-header-color);
  line-height: var(--smaller-line-height);
  margin-top: var(--base-margin-top);
  margin-bottom: var(--base-margin-bottom);
  font-weight: var(--primary-font-weight-bold);
}

h3, h6, p {
  color: var(--base-header-color);
  line-height: var(--smaller-line-height);
  margin-top: var(--base-margin-top);
  margin-bottom: var(--base-margin-bottom);
  font-weight: var(--primary-font-weight-normal);
}


// utilizing mixin
.header1 {
    .fluid-typography-rem(@mobile, @xlg-desktop, @base, 1.6rem, 2rem, 1.75rem);
}

.header2 {
    .fluid-typography-rem(@mobile, @xlg-desktop, @base, 1.3rem, 1.5rem, 1.4rem);
}

.header3 {
    .fluid-typography-rem(@mobile, @xlg-desktop, @base, 1.2rem, 1.375rem, 1.3rem);
}

.header4 {
    .fluid-typography-rem(@mobile, @xlg-desktop, @base, 1rem, 1.25rem, 1rem);
}

// utilizing clamp
.h1 {
  @supports (font-size: clamp(1.6rem, 3.5vw, 2rem)) {
      font-size: clamp(1.6rem, 3.5vw, 2rem);
      color: black;
  }
  font-size: 1.75rem;
  color: red;
}

.h2 {
    @supports (font-size: clamp(1.3rem, 3.5vw, 1.5rem)) {
      font-size: clamp(1.3rem, 3.5vw, 1.5rem);
      color: black;
    }
    font-size: 1.4rem;
    color: red;
}

.h3 {
    @supports (font-size: clamp(1.2rem, 3.5vw, 1.375rem)) {
      font-size: clamp(1.2rem, 3.5vw, 1.375rem);
      color: black;
    }
    font-size: 1.3rem;
    color: red;
}

.h4 {
    @supports (font-size: clamp(1rem, 2.5vw, 1.25rem)) {
      font-size: clamp(1rem, 2.5vw, 1.25rem);
      color: black;
    }
    font-size: 1rem;
    color: red;
}

// smaller headings don't need to scale
.h5,
.header5 {
    font-size: 1rem; /* 16px */
}

.h6,
.header6 {
    line-height: var(--base-line-height);
    font-size: 1rem; /* 16px */
}

.bodyCopy, .p {
    line-height: var(--base-line-height);
    font-size: 1rem; /* 16px */
}


// pen styles
.main {
  font-family: 'Lato', sans-serif;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  padding: 30px;
}
View Compiled 
// display computed font sizes
function calc() {
    let elements = document.querySelectorAll('.wrap > *');
    elements.forEach(function (e) {
        let compStyles = window.getComputedStyle(e);
        e.textContent = e.tagName + 
            ' font-size: ' +
            compStyles.getPropertyValue('font-size') +
            ', line-height: ' +
            compStyles.getPropertyValue('line-height');
    });
}
calc();
window.addEventListener('resize', calc, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.