How to implement fluid font size using pure CSS

Question

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?

Qualm

Unfortunately, there's no current solution using CSS only. You'll have to use JavaScript or JavaScript+CSS. – Glaucous

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... – Karole

Answer 1

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

Outage

@media only screen and (max-width: 600px) {font-size:15px;} something like this.. this is how responsive designs are built. – Watchful

@Jim, with media queries, is the change continuous with respect to the width change? – Qualm

No. You can make it less sudden using CSS transitions, but if you want it to be changing continuously, you'll have to use a JavaScript solution like FitText. – Outage

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. – Filippo

Answer 2

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

Kristikristian

I like this one :) – Shaum

Answer 3

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.

Cestar

according to caniuse.com/#feat=viewport-units , we now can use viewports units in all major browser ! – Canaletto

Answer 4

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) );
  }
}

Periscope