Responsive Font Size

Question

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1.

CSS

body {font-size:100%}
/* Headers */
h1 { font-size:6.2em;font-weight:500; }

HTML

<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div><!-- End Tagline -->
</div><!-- End Row -->

When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accomodate for the large text.

I've noticed that on the Zurb Foundation 3 Typography example page, the headers adapt to the browser as it is compressed and expanded.

Am I missing something really obvious? How do I achieve this?

Answer 1

After much conclusions I ended up with this combination

@media only screen and (max-width: 730px) {

 h2{
        font-size: 4.3vw;
    }

}

Answer 2

Use CSS media specifiers (that's what they [zurb] use) for responsive styling:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Answer 3

"vw" solution has a problem when going to very small screens. You can set base size and go up from there with calc():

font-size: calc(16px + 0.4vw);

Answer 4

Responsive font size can also be done with this javascript called FlowType:

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - Responsive web typography at its finest: font-size based on element width.

Or this javascript called FitText:

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - Makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.