Responsive font size in CSS

by

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

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}
<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 accommodate 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?

34 Answers
34

You can use the viewport value instead of ems, pxs, or pts:

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

From CSS-Tricks: Viewport Sized Typography

Leave a Comment