Responsive Type and Zoom

Typography that responds to viewport width (‘fluid’ or ‘responsive’ typography) can be useful when you want to ensure text does not get clipped or spill out of some design elements. Carousels, widget controls, or my Venn diagram are some examples.

I say viewport width because I rarely see responsive type consider the viewport height or the printed page. Not considering height can bw problematic for users holding their phone in landscape mode while trying to navigate pages with cookie consents and email form sign-ups. Not considering print can make for reams of wasted paper.

Responsive vs. Static

The alternative approach is to just use static text sizing, ignoring the size of the viewport.

To demonstrate the difference I forked a five-year-old Codepen that had just been updated last week, Precision responsive typography and started zooming the page, capturing screen shots along the way.

Then I duplicated the pen, removing all the responsive sizing styles, ensuring the text started at the same size in an un-zoomed window. Then I zoomed and screen-shat it.

Screens

All screen shots were captured in Windows 10 / Firefox 72.0b1, but the effect is the same across browsers.

The text in the screen shot is the same as the following image. The text in the screen shot is the same as the previous image.
The first/left image is the responsive type example with no zoom. The second image is the same HTML, but no responsive type, with no zoom. The text is the same size in both.
The text in this screen shot is smaller than the following image. The text in the screen shot is larger than the previous image.
The first/left image is the responsive type example at 200% zoom. The second image is the same HTML, but no responsive type, at 200% zoom. The size difference is apparent, but not overwhelming.
The text in this screen shot is significantly smaller than the following image. The text in the screen shot is significantly larger than the previous image.
The first/left image is the responsive type example at 300% zoom. The second image is the same HTML, but no responsive type, at 300% zoom. Firefox users cannot zoom any more, which means the text cannot get any larger for them. The text cannot get to truly 200% its original size.

While Firefox limits zoom to 300%, Chrome goes higher and at 400% zoom the user of the responsive type page can finally get the text to almost 200% of its original size.

Code

For comparison, I have embedded the two different CSS blocks within this poorly-styled details/summary thinger…

The original SCSS (comments stripped):

$min_width: 400;
$max_width: 800;
$min_font: 12;
$max_font: 24; 

:root { font-size: #{$min_font}px; }

@media (min-width: #{$min_width}px) and (max-width: #{$max_width}px){
  :root { 
    font-size: calc( #{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - #{$min_width}px) / ( #{$max_width} - #{$min_width}) ));
  }
}
@media (min-width: #{$max_width}px){
   :root { 
     font-size: #{$max_font}px;
   }
}

The entirety of the text sizing CSS in my pen:

:root {
  font-size: 150%;
}

Why It Matters

I have worked with users who scale text to this large. Some of them do it because they surf on their TV from their couch. Some do it when reading a recipe off their phone in the kitchen. Some do it when they need to present on a wall to a room full of a people. Some of them just have poor vision.

When people zoom a page, it is typically because they want the text to be bigger. When we anchor the text to the viewport size, even with a (fractional) multiplier, we can take away their ability to do that. It can be as much a barrier as disabling zoom. If a user cannot get the text to 200% of the original size, you may also be looking at a WCAG 1.4.4 Resize text (AA) problem — check out Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text.

I want to be clear — I am not picking on the specific example above. That example is only demonstrating what developers can do, not what they should do. There may be completely valid reasons to use these techniques and the example I borrowed shows one method to do that.

What to Do

Identify why you want responsive type. Is it based on user request? Surveys? Research? Or is it just that you or your team think it looks better? Or you want to try out this technique? The answers may tell you if you should even move ahead with responsive type.

Consider not setting a base font size. Maybe use the following rule (or similar or nothing) to inherit the font size from the browser, which may have been explicitly chosen by the user:

:root {
   font-size: 100%;
}

Then only set subsequent text size values using %, em, or rem units, avoiding values below 100%, 1em, or 1rem (unless scaling down in something already scaled up).

Be careful when using vw or vh units. Then be careful if using calc(). Be even more careful when using min(), max(), or clamp() (see CSS Values and Units Module Level 4 for the Working Draft spec language).

If you are going to use responsive typography techniques anyway, you must test it by zooming. Zoom across devices, across browsers, across viewport sizes (not everyone surfs full-screen), and across viewport orientations.

Also, don’t forget print styles. Consider print units in pt, and print to PDF to confirm it works without wasting paper.

Update: 7 January 2020

New York Times has an experimental interactive piece that demonstrates some of what I discuss above. Zooming out from a page should not make the text larger than zooming in.

At 80% zoom; about five words fit per line. At 110% zoom; about seven words fit per line. At 133% zoom; about six words fit per line.
The text is largest when at 80% zoom (first image), then much smaller at 110% zoom (middle image), then a bit larger at 133% zoom (last image).

2 Comments

Reply

Hey Adrian, I’m working on a design system that’s using a vw plus rem scaling font-size: calc(1rem + 0.2vw) and it seems to be responding just fine to both browser zoom and font-size settings in the browser config.

Have I not explored all the scenarios in which this kind of responsive type would break or do you think this solution is okay?

Mark Goho; . Permalink
In response to Mark Goho. Reply

Mark, I think 0.2vw is such a small number that it might not matter. But be aware that for a user who zooms, the vw value in your calc() will not change with zoom. But since the rem is the major value it may not be a big deal except in very wide windows.

As always, test those edge cases so you at least know what happens.

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>