How can I gracefully degrade CSS viewport units?

Question

CSS viewport units (vw, vh, vmin, vmax) are great, and I want to start using them for fonts -- but I noticed here that they aren't that widely supported. I tried to google any best practices for graceful degradation in unsupported browsers, but couldn't find anything useful. Are there any better ways beyond doing something like:

    h1 {
      font-size: 120%;    /* for unsupported browsers */
      font-size: 5.3vmin; /* for supported browsers */
    }

Thanks in advance!

Answer 1

• Native usage

You'll at least want to provide a fallback:

h1 {
  font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
  font-size: 5.4vw;  
}

Also tells about mimicing the functionality with FitText.js.

For more information, read Chris Coyier's "Viewport Sized Typography" http://css-tricks.com/viewport-sized-typography/

Answer 2

You cannot gracefully degrade the viewport units in CSS simply because there is nothing conceptually even remotely similar in older versions of CSS.

For example, setting font size to 120% does not address the issue at all: it simply sets the font size 1.2 times the parent element’s font size, quite independently of viewport dimensions.

It is, however, possible to approximate the effects of viewport units using client-side JavaScript so that you get the viewport properties and then set the font-size property based on them. See e.g. answers to the question Is there any cross-browser javascript for making vh and vw units work.

Answer 3

As per How to properly use css-values viewport-relative-lengths?, I don't think it's correct to use viewport units outside of restricting them with @media queries for minimum height and width of the viewport, and even then, I think it should only be used when you know that the page they'll be applying to is very small (e.g. a business-card style page), and would otherwise leave the whole viewport screen empty handed.

---

In other words, what exactly are you looking for when you say font-size: 5.3vmin?

What if I cascade multiple windows one by one, only leaving enough room in each viewport as to see three lines of normal text? The text at 5.3vmin will be so small at to be unintelligible!

Likewise, if I have a huge monitor (say, Seiki 39" @ 3840x2160, which, I must point out, is quite affordable at below 400 USD), and you use font-size: 5.3vmin for all your headers on a page with a lengthy article, then you're stripping my ability and comfort to fully enjoy all the extra lines of text that my monitor can support, instead having 5 headers occupy more than a quarter of the screen, which instead could have been filled by a hundred of extra lines of text.