CODEWITHSUNDEEP
htmlcssfluid-layout
skyork
skyork

Reputation: 7411

How to implement fluid font size using pure CSS

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?

Upvotes: 17

Views: 29838

Answers (4)

static_null
static_null

Reputation: 304

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

Upvotes: 1

AlicanC
AlicanC

Reputation: 893

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.

Upvotes: 2

Brett Santore
Brett Santore

Reputation: 797

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

Upvotes: 34

Jim
Jim

Reputation: 73966

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

Upvotes: 6

Related Questions