title: Scaling font size with screen size?
body: <p>I'm developing a web app with AngularJS 1.x and Angular Material. I'm trying to create a landing page with a large title at <code>md-display-4</code>.</p>
  
  <p>Here's what it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/XLxvd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XLxvd.png" alt="App on large screen"></a></p>
  
  <p>As you can see, the title fills the page nicely and fits in one line.</p>
  
  <p>However, this is on a 1680x1050 monitor. If I move the browser window to my smaller 1366x768 monitor, I get this instead:</p>
  
  <p><a href="https://i.stack.imgur.com/l3Ewi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l3Ewi.png" alt="App on smaller screen"></a></p>
  
  <p>As you can see, the font stays the same physical size and overruns to the next line, and also is no longer centred.</p>
  
  <p>How can I ensure a consistent look where font scales depending on screen size?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;FOOBY DOOBY&lt;/title&gt;
  
          &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"&gt;
          &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"&gt;
  
          &lt;link rel="stylesheet" href="styles.css" /&gt;
  
          &lt;!-- Angular Material requires Angular.js Libraries --&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Angular Material Library --&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"&gt;&lt;/script&gt;
  
          &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-app="homePage"&gt;
          &lt;div layout="column"&gt;
              &lt;div layout layout-align="center"&gt;
                  &lt;h1 class="md-display-4"&gt;FOOBAR IS THE TITLE HERE&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;!-- Description here --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>