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)?

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)?

• javascript
• jquery
• css
• html
• fonts

• Yes - use the vh unit - css-tricks./viewport-sized-typography – Rory McCrossan Commented Jan 23, 2015 at 16:10
• 2 Self-shaming promotion: I made a plugin for that kind of thing. You can take a look if it fit your needs. github./kagagnon/Responsive-Font – Karl-André Gagnon Commented Jan 23, 2015 at 16:17
• @Karl-AndréGagnon Can I edit the line-height and letter spacing of the font with this method as well? – Blake Bowman Commented Jan 24, 2015 at 20:56
• @BlakeBowman Unfortunately, not yet. It's something i'm gonna do one day, but alternatively, you can set a line-height as a percent of the font-size. – Karl-André Gagnon Commented Jan 26, 2015 at 1:33

2 Answers 2

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>

with jquery:

$('#mySelector').css("font-size", $(window).height()/10);

demo with resize handling: http://jsfiddle/scu5Ltfh/