CSS » Typography Units
Najzad kalkulacija Prvi smislio: Fluid typography examples - MadeByMike Fluid Typography | CSS-Tricks - CSS-Tricks
Amazing tools for typography
-
Fluid Type Scale to generate responsive font-size variables inspired by Type Scale - A Visual Calculator
Explained in detail: Creating a Fluid Type Scale with CSS Clamp
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:
- Respecting Font Size Preferences: Rems and 62.5% Base Font Size | Aleksandr Hovhannisyan
- Bootstrap 4 uses rem
- Why designers should move from px to rem | by Christine Vallaure | UX Collective
- Original article from 2011: Font sizing with rem
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
- Don’t use rem/em for paddings, margins and more In short: if you do that, then user changing font-size is same as zoom, which already works perfect.