How to create truly responsive typography in CSS3 regarding screen width

Question

Imagine you have a div container:

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

This creates a beautiful, fully responsive left and right margin proportional to the width of the browser screen, right?

For extra small and extra large screens, you can even add some @media requests to link them, so the content is always read:

 @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 that you wanted the same principles to apply to typography and font sizes.

Relative% font size with minimum and maximum values, proportional to the width of the screen. I'm not talking about a lot of unstable static @media queries (as they say, ahm BS3 relies), but a smooth transition, like the container above.

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

Answers to the card please.

Answer 1

New methods arising using relative units (vw / vh / vmax / vmin) are a good article for this: http://snook.ca/archives/html_and_css/vm-vh-units

however, this is still not widely supported. The best method I've found is to apply font resolution adjustments for the html selector (example below). You only declare the base font size on the mobile view and gradually increase it using the "rem" values ​​(which refer to the root selector).

Caution: IE IE 8, Opera Mini, and iOS Safari 3.2 do not support rem; IE 9/10 does not support it in the abbreviated font property. So it depends on your browser support needs. Using px values ​​as backups leads to a rejection of the target relative units, so ... if you do not use modernizr .no-cssremvalue to specify pixels as backups, then you should use modernizr to check vw / vh / vmax / support vmin anyway.

alternative methods:

I would also look into the Zurb Foundation 5 interface module, as they used a rather interesting method, using meta tags to quickly change the font size. http://foundation.zurb.com/docs/components/global.html

There are js libraries like flowtype.js and some others, just take a look (there are a lot of new things since August 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 2

You can use css animation if 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; } } 

If the screen is smaller than 450px (minimum width: 450px media request), the animation will be applied

When the screen exceeds 450 pixels (maximum width: 450 pixels), the animation will be applied

Demo Screenshot

Animation document

Keyframes doc

Answer 3

Two solutions that I know of:

• Create hundreds of media queries for hundreds of screen widths and apply the appropriate font size to each one. It seems that the copy is smoothly resizing when it just uses media queries, as usual. There are just a lot of them.

• Use SVG text. The scales are smooth and optimized for SEO. Here is a quick example that I found that shows smooth scaling of 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 for smoothly scaling text outside of media queries.

Answer 4

You can use view units.

 h1{font-size: 5.4vw} 

This will give you a font size equal to 5.4% of the width of the viewport that I count. I just found out about it because I watched it myself.

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

• 1vw = 1% of the width of the viewport
• 1vh = 1% of viewing height
• 1vmin = 1vw or 1vh, whichever is less
• 1vmax = 1vw or 1vh, whichever is greater

(from the link above)