How can i enlarge wesite font-size when used with

Question

I'm writing some css style sheets for my website and having a mass use of "vw" and "vh" css units. I noticed that when I'm trying to enlarge (resize?) the font size with the browser magnifier or using Ctrl+Scrolling up with mouse, the font size doesn't incrase and stays static. I have to make this website accessible (AA Level) and one of the main requirements are

Ensure Your Site Responds Well to Increased Text-Size (1.4)

Got it from here.

Using "rem" or "em" do resize, but they don't have the effect of "stretched" when i resize the window which is the biggest adventage when using "vw" units.

How can i solve this? How can I gain both things? Making text resize and keep the aspect ratio of the text for the screen?

Thanks.

Answer 1

It's pretty simple to make viewport units scale according to user font-size preferences. Just combine viewport units with relative units using calc(). For example:

.example { 
  font-size: calc(1rem + 1.5vw); 
}

This also has an added bonus of setting a minimum font-size of 1rem (16px) which is usually useful for more than just accessibility.

There are also other ways of controlling the rate of scale, but that is out of scope for this question. Just google 'Fluid Typography' and you should find the techniques I'm talking about.

Answer 2

vh and vw units are not intended to be used for font-size if you want to be compatible with WCAG.

The only possible solution if you want to have the expected behavior is to make use of javascript.

EDIT : Sample solution with jQuery:

$(document).ready(function() {
  $(".vh").each(function() {
    $(this).css("font-size", $(this).css("font-size"));
  });
});

.vh {
   font-size: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vh">Test</div>