CSS » Typography Units

CSS » Typography Units

Najzad kalkulacija Prvi smislio: Fluid typography examples - MadeByMike Fluid Typography | CSS-Tricks - CSS-Tricks

Amazing tools for typography

I’ll use PX from now on.

Why not REM as font size unit?

  • Only advantage of REM, is that users who use a bigger default font-size in their browser setting, will get the font-size scaled properly, while px will not scale.
  • I actually want to DISABLE ability to scale ONLY text as I never liked how any site looked when only text is scaled.
  • Zoom of every element is working as expected both with PX and REM.

Keep in mind, most users use zoom instead of font-size change in their browser and phones, because zoom easier to access.

Pro:

Against:

So after all the research, I came to the conclusion that the only advantage of rem, is that users who use a bigger default font-size in their browser setting, will get the font-size scaled properly, while px will not scale. In other words, using rem for font-size, adds support for Accessibility to your website.

html - Why use rem instead px when it’s the same anyway? - Stack Overflow

If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant.

One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don’t have to worry about unexpected font sizes from breaking your layout.

!!! This is a good idea, unless it isn’t. E.g. when you don’t have 100% control over all the CSS on your website. Think of 3rd party components (e.g. cookie consents so popular these days, online chats, etc.), libraries like Bootstrap etc. - these sometimes expect that the root font-size is somewhat reasobanle and therefore use rem as well. But if you change the root font-size, suddenly those 3rd party components act accordingly.

Solution? I think I now prefer to use rems as-is or an intermediate calc utility (in a CSS preprocessor) to convert pixels to rems for me.

I guess another way to say it: scaling font size seems like a feature of a previous generation of browsers, whereas modern browsers all advocate zooming (and make it easy to do), which works regardless of that setting


My take on responsive typography

Precise control over responsive typography - MadeByMike

date 01. May 2022 | modified 17. Jan 2023
filename: CSS » Typography Units