<article>
  <h1 class="fluid-type">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</h1>
  <p>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.</p>
  <h2 class="fluid-type">Cras mattis consectetur purus sit amet fermentum.</h2>
  <p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p>Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <hr />
  <blockquote class="fluid-type">
    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  </blockquote>
  <hr />
  <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.</p>
</article>
/**
 * FLUID TYPE
 *
 * Scale text based on viewport and the following variables. Props should be unitless, but will be converted
 * to REM units. E.G '1' will be converted to '1rem'
 *
 * --fluid-type-min-size: The smallest font size. Default 1
 * --fluid-type-max-size: The largest font size: Default 2
 * --fluid-type-min-screen: The smallest viewport size that this works for: Default 20
 * --fluid-type-max-screen: The largest viewport size that this works for: Default 88
 */
.fluid-type {
  --fluid-type-min-size: 1;
  --fluid-type-max-size: 2;
  --fluid-type-min-screen: 20;
  --fluid-type-max-screen: 88;

  /* We multiply by 1rem to essentially stick a rem unit to a number. */
  font-size: calc(
    (var(--fluid-type-min-size) * 1rem) + (var(--fluid-type-max-size) - var(--fluid-type-min-size)) *
      (100vw - (var(--fluid-type-min-screen) * 1rem)) /
      (var(--fluid-type-max-screen) - var(--fluid-type-min-screen))
  );
}


/*
* SET LOCKS ON ELEMENTS
*/
h1.fluid-type {
  --fluid-type-min-size: 2;
  --fluid-type-max-size: 4;
}

h2.fluid-type {
  --fluid-type-min-size: 1.5;
  --fluid-type-max-size: 2.2;
}

blockquote.fluid-type {
  --fluid-type-min-size: 1.2;
  --fluid-type-max-size: 1.8;
}




/*
* PRESENTATION STYLES
*/
body {
  font-family: 'Source Sans Pro', sans-serif;
  background: #f3f3f3;
  color: #141414;
  padding: 4rem 2rem;
  line-height: 1.4;
}

h1, h2, h3 {
  line-height: 1.2;
}

p {
  font-size: 1.25rem;
  max-width: 75ch;
}

h1, h2, h3, blockquote {
  font-family: 'Libre Baskerville', serif;
}

blockquote {
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
}

blockquote p {
  font-size: 1em;
}

article {
  max-width: 50rem;
  margin: 0 auto;
}

article > * + * {
  margin-top: 1.8em;
}

hr {
  border: none;
  height: 1px;
  background: #ccc;
  margin: 3em auto;
  max-width: 30rem;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Libre+Baskerville:400i,700|Source+Sans+Pro:400,400i
  2. https://codepen.io/andybelldesign/pen/VRoevJ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.