Search code examples
csscross-browserresponsive-designgraceful-degradation

How can I gracefully degrade CSS viewport units?

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!

Solution
    • 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/