How to create truely responsive typography in CSS3 relative to screen width

Question

Imagine you have a container div:

.container {
  max-width: 95%;
  margin-right: auto;
  margin-left: auto;
}

This creates a lovely, fully responsive left and right margin, proportionate to any browser screen width, right?

For extra small and extra large screens, you can even add a couple of @media queries to bound it, so the content is always readable:

@media (min-width: 450px) {
  .container {
  max-width: 100% // Remove the padding
  }
}

@ media (min-width: 1170px) {
  .container { max-width: 1170px // Prevent your content scaling to infinity
  }
}

Now imagine you wanted to have the same principals applied to typography and font sizes.

A relative % font size with min and max values, proportionate to screen width. I'm not talking about lots of jumpy static @media queries (as say, ahem BS3 relies), but a smooth transition, just like the container above.

And I want to do it without javascript (boo! no lettering.js!). Any CSS3 gurus out there?

Answers on a postcard please.

Answer 1

You can use css animations, as long as the browser supports it

HTML

<div class="ProportionateFont">Text To Animate</div>

CSS

@media (max-width: 450px) {
    .ProportionateFont {
        animation: SmallerFont 0.3s;
        animation-fill-mode: forwards;
        -webkit-animation: SmallerFont 0.3s;
        -webkit-animation-fill-mode: forwards;
    }
}

@media (min-width: 450px) {
    .ProportionateFont {
        animation: LargerFont 0.3s;
        animation-fill-mode: forwards;
        -webkit-animation: LargerFont 0.3s;
        -webkit-animation-fill-mode: forwards;
    }
}

@keyframes SmallerFont {
    0% { font-size:24px; }
    100% { font-size:12px; }
}

@-webkit-keyframes SmallerFont {
    0% { font-size:24px; }
    100% { font-size:12px; }
}

@keyframes LargerFont {
    0% { font-size:12px; }
    100% { font-size:24px; }
}

@-webkit-keyframes LargerFont {
    0% { font-size:12px; }
    100% { font-size:24px; }
}

When screen is less than 450px (min-width:450px media query), the animation will be applied

When screen is more than 450px (max-width:450px media query), the animation will be applied

Fiddle Demo

Animation Doc

Keyframes Doc

Answer 2

There newer methods emerging using relative units (vw/vh/vmax/vmin) a good article for this is: http://snook.ca/archives/html_and_css/vm-vh-units

however, this is still not widely supported. The best method I've found is applying font adjustments per resolution to the html selector (example below). You only declare the base font-size at the mobile view and progressively enhance using "rem" values (which are relative to the root selector).

Caveat to this, lte IE 8, Opera Mini, and iOS Safari 3.2 doesn't support the rem value, IE 9/10 doesn't support it in the shorthand "font" property. So it depends on your browser support needs. Using px values as fallbacks defeats the purpose of the relative units so... unless you're using modernizr's .no-cssremvalue to specify px units as fallbacks, and then you should be using modernizr to check for vw/vh/vmax/vmin support anyways.

alternate methods:

I'd also look into the Zurb Foundation 5's front-end framework as they've used a rather interesting method using meta tags to adjust the font-sizes responsively. http://foundation.zurb.com/docs/components/global.html

There are js libraries like flowtype.js and a few others as well, just look around (lots of new stuff out there since Aug '13)

:root { font-size:68.75% }

  body{ font-size:1rem; /*IE9 & 10*/
        line-height:1.625; /*IE9 & 10*/
        font:1rem/1.625 sans-serif }

    h1{ font-size:2.9375rem }
    h2{ font-size:1.8125rem }
    h3{ font-size:1.4375rem }

@media (min-width:30rem){     :root{ font-size:81.25% } }
@media (min-width:37.5em){    :root{ font-size:93.75% } }
@media (min-width:50em){      :root{ font-size:112.5% } }
@media (min-width:62.4375em){ :root{ font-size:118.75% } }

/* etc. */

Answer 3

Two solutions that I know of:

1. Create hundreds of media queries for hundreds of screen widths and apply an appropriate font size to each one. It will appear as though the copy is smoothly changing size when it fact it's just using media queries like normal. It's just there are a lot of them.

2. Use SVG Text. Scales smoothly and is SEO friendly. Here is a quick example I found that shows smooth scaling SVG text (among other things)

http://jsfiddle.net/9tUAd/33/

<div class="svg-wrap">
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 550 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet" height="100%" width="100%">
    <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">Simplified example</text>
</svg>

There is no pure CSS solution to smoothly scaling text, outside of media queries.

Answer 4

You can use viewport units.

h1{font-size: 5.4vw}

That would give you a font size that is equal to 5.4% of the viewport width I believe. I just learned about this because I was looking myself.

Here's the link: http://css-tricks.com/viewport-sized-typography/

• 1vw = 1% of viewport width
• 1vh = 1% of viewport height
• 1vmin = 1vw or 1vh, whichever is smaller
• 1vmax = 1vw or 1vh, whichever is larger

(from the link above)