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

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

Answer 2

If you are using a build tool then try Rucksack.

Otherwise, you can use CSS Variables (Custom Properties) to easily control the min and max font sizes like so (demo):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Answer 3

There are several ways to achieve this

Use media query but requires font sizes for several breakpoints

body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

@media (min-width: 768)
{
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
}

Use dimensions in % or em. Just change the base font size everything will change. Unlike previous one you could just change the body font and not h1 everytime or let base font size to default of the device and rest all in em

1. “Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..
2. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

see kyleschaeffer.com/....

CSS3 supports new dimensions that are relative to view port. But this doesn't work in android

1. 3.2vw = 3.2% of width of viewport
2. 3.2vh = 3.2% of height of viewport
3. 3.2vmin = Smaller of 3.2vw or 3.2vh

4. 3.2vmax = Bigger of 3.2vw or 3.2vh

   body
   {
       font-size: 3.2vw;
   }
   

see css-tricks.com/.... and also look at caniuse.com/....

Answer 4

Have find this solution, work very good for me.

/* fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Answer 5

As with many frameworks, once you "go off the grid" and override the framework's default CSS, things will start to break left and right. Frameworks are inherently rigid. If you were to use Zurb's default H1 style along with their default grid classes, then the web page should display properly on mobile (i.e., responsive).

However, it appears you want very large 6.2em headings, which means the text will have to shrink in order to fit inside a mobile display in portrait mode. Your best bet is to use a responsive text jQuery plugin such as FlowType and FitText. If you want something light-weight, then you can check out my Scalable Text jQuery plugin:

http://thdoan.github.io/scalable-text/

Sample usage:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

Answer 6

If you don't mind to use a jQuery solution you can try TextFill plugin

jQuery TextFill resizes text to fit into a container and makes font size as big as possible.

https://github.com/jquery-textfill/jquery-textfill