2

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?

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184

1 Answers1

6

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:

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
  • Thank you for a great advice, I think you are right, but I am actually using vmax at the moment and when I reduce the window size to 1024 or slightly bigger, the text is so small I can hardly read. I have to see about that one, but thanks for a great answer. I don't care about older browsers, as long as it works in the new ones :) –  Feb 18 '14 at 04:15
  • It kinda depends on the layout/sizing of the containing element too. For example, a min-width/min-height on the containing element might prevent the text from getting too small. Alternatively, you could couple it with a `media` query so below a certain breakpoint you switch to using pixels or another fixed font size. – Brett DeWoody Feb 18 '14 at 05:06
  • Isn't there something like percentages relative to the width and height of the parent element. for example there should be a container font size and then there should be the child element font size, how come there isn't some function like minimum font-size or something like that. It is so stupid! –  Feb 18 '14 at 06:58