v4: Can't set $font-size-base to a pixel value #23982
Comments
|
Hi @Jakobud you should always avoid doing fonts in px, it's not good for accessibility. Let me help you with your designers using sketch issues :) You can set up a function that transform px to rem like this: $font-size-root: 16; // no units, you assume the font size base of most browsers is 16px.
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
// prem stands for px to rem.
@function prem($pxval, $base: $font-size-root) {
@return strip-unit($pxval) / $base * 1rem;
}Then if the designers set a 36px font size, you use it like this: .class-name {
font-size: pem(32); // Returns 2rem (or 32px)
}This is a flexible solution that will let you use hope it helps! |
|
Can you explain why setting a base font size in px is bad for accessibility? |
|
Sure, there are many users with sight problems that set the default font size of the browser larger. Since rem units are relative to the root font size, your page will follow that change. If you set them in px, and pixels are absolute units and not relative, you would be blocking that font size bump. Some people argue that users can always do a zoom and they should be ok too. That's wrong for 2 things: 1- you don't want to ask people to do that if they set it by default in their browsers Thisi s not a bootstrap issue or bug, Bootstrap is doing calculations with rems, and that's why setting them in pixels fails in your codebase. There are many other benefits to using rem and you can probably google it. |
|
Okay, but what I was proposing was setting the base font size to pixels. Setting the base font size in pixels is fine for accessibility. It will resize properly with default browser font size changes and with zoom changes. Bootstraps code is this:
The only difference is that the calculations used elsewhere won't work if the value is in pixels. Does that make sense? |
|
setting the base font size in pixels overrides any minimum font size the user may have set in their browser, or any minimum default rem size a browser on a specific platform has been set to. not all use 16px default - for instance, from memory, browser on some kindle devices uses 20px or more |
|
it's not necessarily a complete deal breaker in terms of accessibility, but it's not really "the done thing" to just override user/platform prefs |
|
I need to somehow override the root rem because I'm creating a plugin that has it's own UI which will be used across multiple websites (it is scoped if you're wondering). Because you guys use REM for everything, if a website decides to use 20px root font, everything will be massively oversized. What can i do to avoid this? |
|
You can force the |
Currently,
$font-size-baseis defined as:If you attempt to define your base font size using pixels, for example:
Then SASS will not compile because of
Incompatible units: 'rem' and 'px'.in various calculations. It seems like you should be able to define a font size using pixels. If you are working with a designer who is using Sketch or something, you can sure bet that they have their font's defined in pixels. A designer is not going to have any clue what aremis.The text was updated successfully, but these errors were encountered: