<html lang="en-US">
<head>
  <title>Responsive Type with CSS - by Dapper Gentlemen</title>
  <link href='https://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
</head>

<body>
  <header>
    <h1>
      Dapper Gentlemen
    </h1>
      <h2>
        Designing the internet.
      </h2>
    </header>
  
  <section>
      <p>
        By using vW as a sizing unit we can have type, margins, containers and more scale to the screen width of the user.
      </p>
    <p>
      Not only can you scale type to the user's viewport, you can scale anything that allows sizing to scale to the viewport as well. Containers for example.
      </p>
  </section>
</body>
</html>
body {
  background-color:   #ff5442;
  font-family:        ‘Lato’, Arial, sans-serif; 
  margin:             2vw;
  
}

h1 {
  color:              #fff;
  font-size:          6vw;
  font-weight:        900;
  text-transform:     uppercase;
  line-height:        .3vw;
  }

h2 {
  color:              #fff;
  font-size:          4vw;
}

p {
  color:              #fff;
  font-size:          1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.