<section class="fluid-typography-sec">
  <div class="fluid-typography-left">
    <h2>Generating `font-size` CSS Rules and Creating a Fluid Type Scale</h2>
    <h5>Lorem ipsum dolor sit amet.</h5>
    <p>Let's take the mystery out of sizing type. Typography is both foundational to any stylesheet and the quickest way to elevate an otherwise minimal layout from drab to fab. If you're looking for type design theory or how to select a font, that's outside the scope of this article. The goal for today is to give you a foundation for developing essential type styles in CSS, and terms to use if you wish to explore any topics deeper.</p>
    <p>Let's take the mystery out of sizing type. Typography is both foundational to any stylesheet and the quickest way to elevate an otherwise minimal layout from drab to fab. If you're looking for type design theory or how to select a font, that's outside the scope of this article. The goal for today is to give you a foundation for developing essential type styles in CSS, and terms to use if you wish to explore any topics deeper.</p>
    <p>Let's take the mystery out of sizing type. Typography is both foundational to any stylesheet and the quickest way to elevate an otherwise minimal layout from drab to fab. If you're looking for type design theory or how to select a font, that's outside the scope of this article. The goal for today is to give you a foundation for developing essential type styles in CSS, and terms to use if you wish to explore any topics deeper.</p>
    <p>Let's take the mystery out of sizing type. Typography is both foundational to any stylesheet and the quickest way to elevate an otherwise minimal layout from drab to fab. If you're looking for type design theory or how to select a font, that's outside the scope of this article. The goal for today is to give you a foundation for developing essential type styles in CSS, and terms to use if you wish to explore any topics deeper.</p>

    <p>Let's take the mystery out of sizing type. Typography is both foundational to any stylesheet and the quickest way to elevate an otherwise minimal layout from drab to fab. If you're looking for type design theory or how to select a font, that's outside the scope of this article. The goal for today is to give you a foundation for developing essential type styles in CSS, and terms to use if you wish to explore any topics deeper.</p>
    <p>Let's take the mystery out of sizing type. Typography is both foundational to any stylesheet and the quickest way to elevate an otherwise minimal layout from drab to fab. If you're looking for type design theory or how to select a font, that's outside the scope of this article. The goal for today is to give you a foundation for developing essential type styles in CSS, and terms to use if you wish to explore any topics deeper.</p>

  </div>
</section>
body {
  font-family: "Roboto", sans-serif;
  background: #f8f8f8;
  color: #fff;
}
img {
  max-width: 100%;
}
p {
  margin-top: 0;
  margin-bottom: 16px;
}
p:last-child {
  margin-bottom: 0;
}
h1,
h2,
h3,
h4h,
h5 {
  margin-top: 0;
}

.fluid-typography-sec {
  background: url("https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80")
    no-repeat center center;
  background-size: cover;
  position: relative;
  z-index: 0;
}
.fluid-typography-sec:before {
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #000;
  position: absolute;
  opacity: 0.8;
  z-index: -1;
}
.fluid-typography-sec .fluid-typography-left {
  padding: clamp(12px, 3vw, 85px);
}
.fluid-typography-sec .fluid-typography-left h2 {
  font-size: clamp(20px, 3vw, 50px);
  font-weight: 700;
  margin-bottom: clamp(8px, 1vw, 25px);
  line-height: normal;
}
p {
  line-height: 22px;
}
.fluid-typography-sec .fluid-typography-left h5 {
  font-size: clamp(19px, 2vw, 35px);
  font-weight: 500;
  margin-bottom: clamp(5px, 1vw - 5px, 20px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.