Working with rems

Hey @Norm,

Blocs offers to set font sizes in rems - yay! - , yet it seems that Blocs uses the standard 16px as base size for 1 rem.

When working with rems I find it a lot easier to set the base font size to html {font-size: 62.5%;} which makes 1rem = 10 pixel. That way it’s much easier to work with rems. 1.6rem would be 16px etc… you sure know the discussion about why to use rem over px …

Would love to hear your thoughts about this. Maybe at some point there’s a setting for that in Blocs? :wink: I tried adding a custom css sheet with this. While that works fine in preview, it does not in edit mode.

I don’t think that would be a practical idea, since most web browsers have a default size of 16px and it’s really just a distraction.

I am a big fan of rem and glad to see Bootstrap moving more in the direction, since it always made sense to me. In Bootstrap 5 they’ll be dropping px gutters and moving to rem, plus there will be responsive font sizes by default. This was standard in Foundation years ago and about time Bootstrap was the same.

For the time being no need to focus too much on the maths with rem, since it adapts to different screen resolutions. In a nutshell, if it looks right at each breakpoint it is right. If you think a header looks right at 2.6 rem the px value is basically irrelevant.

I don’t understand why that wouldn’t be practical. I still have those standard pixel sizes for headers and paragraphs in my mind, and when using rems always trying to figure out how much e.g. 22px would be in rems, is … cumbersome. I’m not a math genius :drooling_face: So using 2.2rem in that case… sounds practical to me.

Plus, users that increase the default font size of their browsers because they are e.g. visually impaired, won’t easily break the page that way.

I’d like to have at least the option to do so in blocs or to have the edit window show it correctly when changed with a stylesheet. But maybe that’s just me.

When you become used to working with rem you will forget about px completely. I just look at a font with the intended purpose then adjust as needed. The px values don’t even enter the equation.

If you want to get a feel for this just set the rem value as 1 and see how it looks on page in edit mode. If you think it needs to go bigger try it at 1.3 or 1.5 for example until you are happy. You may occasionally want it to be smaller and make the text 0.8. The trick is to detach yourself from px and think in rem. If you are working in rem, px is an irrelevance.

Just to make that clear, I am very much used to work with rems (with 1rem = 10px) after spending several months on learning how to code by hand, to be able to understand what’s going on under the hood and to add custom css rules to expand my design with Blocs.

That’s the only reason I’d love to be able to define how large in px one rem would be. If that could be added as an option, so that I don’t need to add an extra style sheet to do that (which doesn’t show the effect in edit mode anyway), I’d be very happy. But I’m sure @Norm other things to work on atm :wink:

This article may help you https://medium.com/@julienetienne/pixels-are-dead-faa87cd8c8b9

Thanks Flashman, I (assume to) know why you did that. It didn’t help me in the way you might have intended, but it’s an interesting article after all.

I started with Foundation that was always in rem and never needed to think about px, so all of this comes to me fairly automatically. If you ignore the existence of px font sizes and set values in Blocs using rem it should just work.

I sure will. Though that wasn’t the point of my initial post :wink:

I understand, however I suggest you look at font changes coming in Bootstrap 5. It’s possible I am wrong though and Norm will like your idea.

Yes, BS5 will have the RFS (Responsive Font Size) engine as default.

I think it’s incorporating a pre existing project. RFS would scale by viewport including the fonts padding, margins, border and box shadows. (Based off its repository)

How this will look in BS5 I am not sure, maybe someone here has checked out the alpha release. But we better get used to using REM regardless.

I understand @pumpkin original point of the post though.

Not been looking much into BS5 details, but that sound promising :slight_smile: