17

I have text wrapped in <div>s, and would like to make the whole thing fluid including the font-size of the text, i.e. the text resizes itself in response to the size of the containing element.

I came across a Javasript + CSS solution, but just wondering if it is possible to do so with pure CSS?

Community
  • 1
  • 1
skyork
  • 7,113
  • 18
  • 63
  • 103
  • 1
    Unfortunately, there's no current solution using CSS only. You'll have to use JavaScript or JavaScript+CSS. – jmbertucci Aug 21 '12 at 16:54
  • I came across the same problem and finished with a javascript solution (actually it was Gquery as I was working with GWT)... I don't think a pure CSS solution exists... – Vinze Aug 21 '12 at 16:59

4 Answers4

34

While Jim has given you accurate information, it strays from the question asked slightly. Responsive design (@media queries) can alter the text according to screen size. From what I understand, you were asking if there is a pure CSS solution for fluid text size (continual resizing of text during window size changes).

Here is a link to css-tricks explanation of new font sizing techniques. Please be aware this is new and older browsers will most likely have some issues, and that even newer ones (Chrome + Safari) are still not bug-free.

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Edit- added code

Sébastien Renauld
  • 19,203
  • 2
  • 46
  • 66
Brett Santore
  • 799
  • 6
  • 14
6

Yes, look at CSS 3 media queries. You can provide different style rules depending on the viewport width. This includes altering the font size.

Jim
  • 72,985
  • 14
  • 101
  • 108
  • @media only screen and (max-width: 600px) {font-size:15px;} something like this.. this is how responsive designs are built. – Zach Aug 21 '12 at 17:54
  • @Jim, with media queries, is the change continuous with respect to the width change? – skyork Aug 21 '12 at 17:59
  • 3
    No. You can [make it less sudden using CSS transitions](http://elliotjaystocks.com/blog/css-transitions-media-queries/), but if you want it to be changing continuously, you'll have to use a JavaScript solution like [FitText](http://fittextjs.com). – Jim Aug 21 '12 at 19:38
  • This is limited. If the text your trying to shrink is dynamic you can't predict the width you should assign in your media query. At least as far as I can tell, you still need JavaScript. – Costa Michailidis Jul 10 '15 at 18:01
2

Short Answer

You can't have fluid font sizes, but you will when viewport-percentage lengths are widely available.

Long Answer

You have to understand these two terms: responsive and fluid.

Responsive means you make your stylesheet respond differently to different window sizes. This is done by using CSS Media Queries. While responsive is one of the hippest words in web design, it mostly means hardcoding CSS for different absolute lengths until you drop dead of boredom.

Fluid means you work with relative length units such as percentages. When you work with relative length units, every size is calculated automagically.

Example

Let's say you have a <div> inside the document body and you want it to fill half of the window.

The responsive solution is this:

@media (max-width: 1px) {
  body > div {
    width: 0.5px;
  }
}

@media (max-width: 2px) {
  body > div {
    width: 1px;
  }
}

@media (max-width: 3px) {
  body > div {
    width: 1.5px;
  }
}

@media (max-width: 4px) {
  body > div {
    width: 2px;
  }
}

/* Repeat until you reach gigabytes and hit operating systems' file size limitations. */

And the fluid solution:

body > div {
  width: 50%;
}

So?

What limits us today is that there is no wide support for viewport-relative length units. What you can do is drop the whole idea of "pure CSS fluid font sizes" and go responsive.

AlicanC
  • 863
  • 1
  • 8
  • 12
1

use calc with media query for a responsive and fluid font

@media screen and (min-width: 25em){
  div {  
    font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
  }
}
static_null
  • 194
  • 4
  • 14