Fluid Type with Zoom

user_1712198 0
Viewed 146

My requirements are:

  1. From 1280 to 1920, font size should be fluid 14px to 22px
  2. Users should be able to zoom as normal

I haven't found a solution that actually does both. Yes I've seen CSS Tricks simplified fluid, using vw of any kind renders zoom ineffective.

  • clamp(0.875em, 1.146vw, 1.375em) - doesn't scale a the same rate as regular zoom, it's like 5% instead of 50%.
  • clamp(0.875em, 1.4vw - 0.3em, 1.375em) - runs into the min and max but shrinks on zoom.
  • calc(0.875em + 8 * (100vw - 1280) / 640) - doesn't zoom.
fluid-layout typography css
2 Answers

In CSS calculations have limitations e.g. multiplication require one of the numbers to be unitless ref. So the formula which we were targeting can't be achieved in CSS:

clamp(14px, calc(1.09375vw + (0.05208vw * (100vw - 1280px) / 640)), 22px)

To cover all requirements we need handle this using JavaScript:

let element = document.querySelector('.scale');

function updateFontSize() {
  let size = 14;
  let vpWidth = window.innerWidth;
  let zoom = ((window.outerWidth) / window.innerWidth);

  if (vpWidth >= 1920) {
    size = 22;
  } else if (vpWidth <= 1280) {
    size = 14;
  } else {
    //calculate
    size = 14 + (vpWidth - 1280) * 8 / 640;
  }
  //apply zoom
  size *= zoom;

  element.style.setProperty('--font-size', size + 'px');

  document.getElementById('stats').innerText = 'Viewport Width: ' + vpWidth + 'px  \nZoom: ' + (zoom.toFixed(2) * 100).toFixed(0) + '%';
}


window.addEventListener('resize', () => updateFontSize());
updateFontSize();
p {
  margin: 0;
  padding: 0;
}

.f14 {
  font-size: 14px;
}

.f22 {
  font-size: 1.376rem;
}

.scale {
  --font-size: 14px;
  font-size: var(--font-size);
}

@media screen and (min-width: 1280px) and (max-width: 1980px) {
  body {
    background-color: wheat;
  }
}
<div id=stats></div>
<hr><br>
<p class=f14>Lorem ipsum dolor sit amet.| 14px</p>
<p class=scale>Lorem ipsum dolor sit amet.| scaling</p>
<p class=f22>Lorem ipsum dolor sit amet.| 22px</p>

Because StackOverflow puts output in iframe you won't see actual result running the snippet here. Switch to Full Page or run the code in separate local HTML file.
The way I found zoom level in above code requires code not placed in iframe. Finding zoom level of browser is not an easy task. See the thread for more info.

I didn't get the perceived vs required font size at 150% zoom. Also, let us know what should happen if user zooms out to 50%.

user_152739680

I think it's not possible to achieve it with CSS only, but even with JavaScript it's quite a straightforward solution. Please let me know if I misunderstood something from the requirements.

Solution

I'm resetting the --fluid-size CSS variable at load & resize events by running the resetFluidSize function (notice this process will hurt the performance as it triggers reflows every time it runs, I'm not doing any optimization here in order to keep it simple).

Then I used the outerWidth to prevent the zoom level (which affects the innerWidth) from messing up the proper scale so no matter the page zoom, the computed style will be the desired one.

After doing the math, I update the CSS variable with document.body.style.setProperty.

Note

In order to see the right values, run the code snippet Full page.

window.addEventListener('load', () => {
  resetFluidSize();
  window.addEventListener('resize', resetFluidSize);
});

const
  a = 14,
  b = 22;

function resetFluidSize() {
  const
    factor = (window.outerWidth - 1280) / 640,
    lerp = a + (b - a) * factor,
    clamp = Math.max(a, Math.min(b, lerp)),
    fluidSize = `${clamp}px`;

  document.body.style.setProperty('--fluid-size', fluidSize);

  /* Just to update the feedback. */
  document.getElementById('fluid-text').setAttribute('currentSize', fluidSize);
}
:root {
  --fluid-size: 16px;
}

#fluid-text {
  font-size: var(--fluid-size);
}


/* Ignore the style below, its just for the feedback. */

p {
  border-right: 1px solid black;
  margin: 0;
  width: fit-content;
  position: relative;
}

p::after {
  content: attr(currentSize);
  position: absolute;
  left: 100%;
}
<body>
  <p style="font-size: 14px;" currentSize="14px">
    Lorem ipsum
  </p>
  <p id="fluid-text">
    Lorem ipsum
  </p>
  <p style="font-size: 22px;" currentSize="22px">
    Lorem ipsum
  </p>
</body>

Edit

If you want to run it locally, you can use this index.html (a GitHub Gist).

user_82743080
Related