Change font size based on window height

Question

Is it possible to change the CSS font-size and line-height of a headline based on the height of the browser window (not the width using media queries)?

Answer 1

Yes it is. You can do this with CSS alone using the vh (viewport height) unit:

vh unit
Equal to 1% of the height of the initial containing block.

font-size: 1vh;     /* Equal to 1/100th of the viewport height. */
font-size: 50vh;    /* Equal to 1/2 of the viewport height. */
font-size: 100vh;   /* Equal to the viewport height. */

The same applies to line-height:

line-height: 1vh;     /* Equal to 1/100th of the viewport height. */
line-height: 50vh;    /* Equal to 1/2 of the viewport height. */
line-height: 100vh;   /* Equal to the viewport height. */

Demo

html, body, h1 { margin: 0; }

h1 {
  font-size: 50vh;
  line-height: 100vh;
  text-align: center;
}

<h1>Hello, world!</h1>