Menu icon Foundation
Scale text instead of wrapping

Just wondering if anyone has any tips on preventing h1,h2,h3, etc tags from wrapping on smaller screensizes.... instead I'd like the text to scale down.

Thanks for any suggestions.

scalewrap

Just wondering if anyone has any tips on preventing h1,h2,h3, etc tags from wrapping on smaller screensizes.... instead I'd like the text to scale down.

Thanks for any suggestions.

Tim Farley almost 6 years ago

I've used this jQuery plugin to some success in the past: http://fittextjs.com/ And there's some pretty good documentation on their github page: https://github.com/davatron5000/FitText.js

If you're not into dropping another piece of JS into the site (or if you're only planning on wanting this functionality on a single tag), it can be pretty easily accomplished with Foundation's SCSS mixins for media. Something like this:

h1 {
  // small sizes get a smaller font size
  font-size: rem-calc(22);

  // but when we are medium or higher (default is 40.063em == 641px), use default h1 size (44px)
  @media #{$medium-up} {
    font-size: $h1-font-size;
  }
}

Remember that Foundation is mobile-first by default, so this code starts by setting the default font size to 22px, but once the window size is wider than 641px, it reverts to Foundation's default font size for at 44px.

Karl Ward almost 6 years ago

This is a good question, which has no ultimate answer, but there are several techniques. The challenge is, sure you wanna scale down large headings on smaller screens, but exactly how much? Besides, sometimes a long heading will need to wrap on a small screen regardless.

By default, Foundation already includes basic media queries for header sizes based on screen size. You could easily use Media Queries to set your own font sizes based on the small-, medium- and large screen media queries in Foundation. This is the most practical approach, although it basically just sets smaller font-size for smaller screens. For example in Foundation SASS:

h2 {
   font-size: 2em;
   @media #{$medium-up} { font-size: 2.5em; }
   @media #{$large-up} { font-size: 3em; }
}

There is another interesting technique, but it only works on relatively big texts, because it basically sets fonts to be directly proportional with screen width by using the vw (viewport width) measurement. For example in CSS:

h2 {
   font-size: 3vw;
}

The above is used in the large intro text on this page http://photos.zachholman.com/hong-kong-beijing. It does not translate very well down to smaller headings though, because you don't normally want font-size directly proportional with screen width.

The last method is to use some basic javascript to set the font-size. It's a bit ugly to have to deal with header font-sizes by means of javascript, but it does allow custom tailoring. There are a few plugins I might wanna try out myself:
http://simplefocus.com/flowtype/
http://jbrewer.github.io/Responsive-Measure/
The challenge is to make the settings. Keep in mind, a mobile device might be better off with slightly smaller fonts, but just because it is a smaller device, it does not mean we wanna read much smaller text.

Wes Mann almost 6 years ago

Thanks for your ideas guys.