Responsive font size in CSS

Question

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

Answer 1

There's another approach to responsive font sizes - using rem units.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Later in media queries, you can adjust all fonts sizes by changing the base font size:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

To make this work in Internet Explorer 7 and Internet Explorer 8 you will have to add a fallback with px units:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

If you're developing with Less, you can create a mixin that will do the math for you.

Rem units support - http://caniuse.com/#feat=rem