REM vs. PX


#1

Folks,
there was a post by one of the experts regarding the rem/px issue.
But I can’t find it.
Can somebody explain, why it is better to use rem instead of px.

Thanks in advance
Roger


#2

If you search Google you will find lots of detailed answers, but in broad terms I believe px is a fixed measurement, whereas rem is flexible and translated by the browser into pixel values. Foundation makes use of rem settings and I find it works very well for maintaining a consistent appearance across device types and screen resolutions.

A couple links here:

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px


#3

Hi @Bootsie

Useful calculator to conver from px to rem.

Cheers
Phil


#4

Hi Flashman,
I did.
But everything I found raises more questions than it shows answers.
I read the articles you recommended and … well … as I said - more questions.
But thank you so much anyway, it helped at least a bit.

@pmweb:
This is very helpful, Phil.
From now on I stop worrying about this issue and start using this calculator.

One last question:
where can I set the html root font size in Blocs?


#5

I don’t think you can, since I gather it is provided by the web browser’s default settings.


#6

Ok
Got it.
Thanx everyone


#7

My understanding is that Bootstrap HTML default font size at root in 10 px in Bootstrap. Therefore, if you would like your paragraph to be at 16 px (which is probably the most used) you should set the rem @1.6 in the project settings for paragraph.

However, I prefer to use em instead of rem and the default size in Blocs is 14 px. For instance if you set your paragraph at 1 em then your paragraph will be 14 px and then you calculate your other font sizes. If you wanted your paragraph to be at 16 then your em would be 1.143em for paragraph. Then it is also good to set your line heights em as well.

This is the scale I currently use:

Website Font Size Scale.pdf.zip (234.1 KB)

Another calculator maybe more handy:

http://pxtoem.com

Cheers,
Phil


#8

To all of you,
I’ve never thought that font sizes are that complicated to set.
I’ll take a look of any suggestions you made and - learn :wink:
Thanx a lot


#9

Why not just link to the article its from, instead of your PDF with images in it? The actual article should give a better overview for peoples understanding of the approach. :wink:


#11

It certainly is worth.
I thank you.


#12

Thank you.


#13

Oh geez …

Ouch, interesting sarcasm you present, seems out of place. :neutral_face:

Your PDF on the left – / – the Linked Article on the right:

I don’t see any differences do you?

Also your scanned paper document includes “Show / Hide the CSS” which is found on the article and to my knowledge conventional paper is yet to do that magically.

So it would appear …

It’s indeed from the article.

I guess it was too hard to just say " Thanks for the link I had forgotten where I found that ".

Obviously I meant no ill intensions with my post, the article merely seemed more informative for people than just your PDF so I thought it was optimal to share it. But you did do a great job taking me sharing the article link that it was from completely out of context.

Bravo Geez.


#15

I guess so. Wow this amazing.

You mean like noticing on the link you have now provided that its just an image from the original article link I posted above and talks about that exact article?

Seems like all roads lead back to that original article however, yet …

Instead you just seem to want to go on and on about it as if it came from somewhere else? So of course I am gonna respond to the things you are saying. Rather silly that all this is because you seemed to take offense to me posting a link to the original article and decided to approach me with your sarcasm.

:neutral_face:


#17

You apparently cared, otherwise this conversation would have never taken place. As for helping people, the article with actual context will help people better than just the chart by itself. But that seems to be where you got your feathers ruffled. Too bad you couldn’t have just been happy for the link so this discussion need not have taken place. Yet you still can’t seem to let it go and remain trying to talk about it to somehow save face.

Indeed who cares, aside from you whom stated this entire discord.


#19

By posting a link to the article and mentioning it would be better than just the PDF? You really do get your feathers ruffled easily.


#21

I wish you two would just stop!

Casey


#22

No problem, I’m done helping @pmweb to allow himself to look silly any further. Except now he is PM-ing me, LOL.