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

jQuery "FitText" is probably the best responsive header solution. Check it out at Github: https://github.com/davatron5000/FitText.js

Answer 2

You can make font size responsive if define it in vw (viewport width). However not all browser support it. Solution is to use JS to change base font size depending on browser width and set all font sizes in %. Here is article describing how to make responsive fontsizes: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Answer 3

I am afraid there is no easy solution with regards to font resizing. You can change font-size using media query, but technically it will not resize smoothly. For an example, if you use:

@media only screen and (max-width: 320px){font-size: 3em;}

Your font size will be 3em both for 300px and 200px width. But you need lower font-size for 200px width to make perfect responsive.

So, what is the real solution? There is only one way. You have to create a png (with transparent background) image containing your text. After that you can easily make your image responsive (ex: width:35%; height:28px). By this way your text will be fully responsive with all devices.

Answer 4

You can use 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: http://css-tricks.com/viewport-sized-typography/

Answer 5

I use this CSS classes, make my text fluid on any screen size:

.h1-fluid {
font-size: calc(1rem + 3vw);
line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
font-size: calc(1rem + 2vw);
line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
font-size: calc(1rem + 1vw);
line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
font-size: calc(1rem + 0.5vw);
line-height: calc(1.4rem + 0.6vw);
}

Answer 6

This is partly implemented in foundation 5.

in _type.scss they have two set of header variable

// We use these to control header font sizes
//for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

For medium up they generates sizes based on the first set of variables.

@media #{$medium-up} {
      h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
      h1 { font-size: $h1-font-size; }
      h2 { font-size: $h2-font-size; }
      h3 { font-size: $h3-font-size; }
      h4 { font-size: $h4-font-size; }
      h5 { font-size: $h5-font-size; }
      h6 { font-size: $h6-font-size; }
    }

And for default-i.e small screens they use second set of variables to generates css.

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

you can use these variables and override in your custom scss file to set font sizes for respective screen sizes