Responsive font size according to window width, is it possible with CSS?

Question

I have made a responsive design on Wordpress and have adjusted everything. The whole layout and slideshows and plugins adjust to the window width, but I can't make the fonts responsive. I have tried many different options with percentages and also now with Vw and Vh. It does work but viewport width and height units have too big intervals and unfortunately when the window resizes the changes are very dramatic. I need some smooth way of reducing font size with the window size with little changes and also preferably minimum width to be set to some fixed unit. Please help me, is it possible with just CSS?

Answer 1

Sounds like you want to have pretty fine control over the font sizing.

There's a great article over on CSS-Tricks that outlines some of your options. Chris recommends using vmin to control the font-size. After experimenting I'd recommend using vmax because it will select the max of vw and vh, which kinda serves as the minimum font-size you mentioned.

Something like:

p {

  font-size: 2vmax;

}

Also note: there's a bug in Chrome 20+/Safara 6+ that prevents the font from resizing itself according to the new viewport size.

If this isn't fine-grained enough unfortunately I think you're going to have to use js. I'd recommend going with one of these fine plugins:

• SlabText
• FitText