<h1>Primary headline</h1>
  <p>You can make use of <code>vmin</code> and <code>vmax</code> for the <code>font-size</code> property. Utilize this e.g. for a resposive hierachy on headlines. This works well across all devices. And especially helps on smaller screens used in portrait and landscape mode. With this method there is no immediate need for media queries on typographic elements.</p>
  <p>On large screens headlines are clearly distinguished in size. If the screens get smaller the hierachy is maintained while not being as extreme as before. Readability and scanability of the content is preserved.</p>
  <p>In this example I combined it with <code>vmin</code> on the <code>margin</code> property for each of the headlines. This condenses the layout while still maintaining the structure on small screens.</p>
  <p>Richard Rutter wrote an in-depth article about responsive typography on <a href="https://24ways.org/2016/responsive-display-text/" class="link-underline">24ways.org</a>. Go check it out.</p>
  <h2>Secondary headlines</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ipsam iste ipsum eos blanditiis nulla error cupiditate voluptate ducimus magni distinctio, deleniti nobis vero. Cupiditate aliquid veritatis veniam enim possimus.</p>
  <h3>Tertiary headlines</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non corrupti explicabo magnam illo laboriosam quis aliquam unde neque praesentium placeat, fuga blanditiis in natus voluptas! Iste dolores laborum recusandae numquam!</p>
  <h4>Another headline</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum ratione, quisquam excepturi fugiat repellendus quae perspiciatis, voluptas minus facilis cupiditate rerum quod nemo voluptatum aliquid provident. Consectetur repudiandae quis, tenetur.</p>
  <h5>And another</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem vel, recusandae sed hic dolore nihil facere nostrum vero soluta numquam quis fugit nisi molestiae cumque quibusdam a distinctio id delectus.</p>
  <h6>The last headline</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo officiis architecto voluptate, assumenda ex ad alias debitis ratione, inventore porro numquam veniam quas facilis a totam, officia minima! Ipsum, eaque.</p>
*, *:before, *:after {
  box-sizing: border-box;

html {
  color: rgb(40,40,40);
  line-height: 1.5;
  font-family: PT Sans, sans-serif;
  font-size: calc(100% + .05vw);

a {
  position: relative;
  text-transform: lowercase;
  text-decoration: none;
  color: inherit;

p {
  margin-top: 0;
  margin-bottom: 2vmin;
  padding: 0;

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  font-weight: 700;

h1 {
  font-size: calc(1rem + 7vmin);
  margin: 6vmin 0 2vmin 0;

h2 {
  font-size: calc(1rem + 4vmin);
  margin: 4vmin 0 1.5vmin 0;

h3 {
  font-size: calc(1rem + 3vmin);
  margin: 3vmin 0 1vmin 0;

h4 {
  font-size: calc(1rem + 2vmin);
  margin: 2vmin 0 .5vmin 0;

h5 {
  font-size: calc(1rem + 1vmin);
  margin: 1vmin 0 .25vmin 0;

h6 {
  font-size: calc(1rem + 0vmin);
  margin: 1vmin 0 .25vmin 0;

code {
  background: rgb(235,235,235);
  padding: 0 .15em;

article {
  margin: 0 auto;
  padding: 1vmax 2vmin;
  max-width: 45rem;

article p {
  max-width: 40em;

.link-underline {
  font-weight: 700;
  position: relative;
  transform: translateY(0);

.link-underline:before {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(1px)scaleY(.75);
  width: 100%;
  height: 2px;
  background: black;
  transition: .3s ease;

.link-underline:hover:before {
  transform: translateY(-3px)scaleY(.5);
    transition: .3s ease;
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=PT+Sans:400,700

External JavaScript

This Pen doesn't use any external JavaScript resources.