What is the proper way of using em font size?

Hi all,

I have been using em for font size. How do I ensure that it scales with smaller devices?

At the moment, I have to change em size for my fonts with media query at smaller screen sizes. It seems that that defeats the purpose if em based font size is meant to scale automatically as screen size decreases.

Appreciate some pointers and advice. Thank you.

 

You want to start mobile up (with css media queries).

Set body to 100% or 62.5%.

@100% the base font size will be 16px = 1em
@62.5% the base will be 10px = 1em (same as pixels)

Then you can increase the font size after that:
100% 1.5em = 24px
62.5% 1.5em = 15px

 

Using EM is so it scales to user preferences, be it set in the OS or the browser. It is NOT for scaling to device size at ALL, that's NOT why you use it.

Though if you are having to change your font-size based on device size on your flow text (aka content -- as opposed to like headings where you might want it smaller) you are probably doing something wrong... like using garbage font sizes in the first place or doing the stupid "let's use 20 different sizes on paragraph text based on screen resolution" crap that does nothing but piss off desktop users.

EM has NOTHING to do with device/screen size or scaling. Anyone who told you that doesn't know enough about web development to be flapping their gums on the subject. It is about scaling to the default user preferences on browsers or operating systems that support it.

I suspect you are again thinking about "scaling" to devices instead of re-arranging to fit. "scaling" based on screen size of anything other than plate images is rubbish best avoided. Re-arrange the layout instead... that or stop using design elements that cannot be re-arranged like the mouth-breathing halfwit stupidity known as banners, image sliders/rotators, equal width equal height elements, etc, etc... You know, the garbage I keep saying has no damned business on websites in the first place no matter how "pretty" it is.

... and @turtile, I see you fell for the LIE. 100%/1EM on the laptop I'm sitting on right now is set to 20px, not 16 as I'm set to 125%/120dpi/Windows Large/Win7+ Medium/whateverTheyreCallingItThisyear... on my media center it's 24px. That's WHY you use EM, and that "62.5%" BULLSHIT is ignorant halfwit nonsense spewed by people who fail to grasp what EM is, why we should use it, or how to use it properly... as evidenced by saying 62.5% resulting in 12.5 on this machine or 15px on my TV... or a laughable 7.5 on the Sun Blade 2000 down in my garage.

Sorry @turtile, but you've been packed so full of sand on that one you could change your name to Sahara.

 

Yes I am thinking along the lines of scaling the h1,h2,h3,h4,p elements to device size. My understanding is that when using em for font size, it ought to fit the screen properly regardless of the device size. For example, my font size should not look unusually small on the mobile when it looks normal on bigger screen size. Therefore, I succumb to the temptation of increasing font size with do using media queries at smaller width like so (max-width:40em).

From your explanation, that means if I have to change font size with media query, I am doing it all wrong?

 

You have it COMPLETELY backwards. EM has NOTHING to do with scaling to device size. It is based on a user preference that to be honest, you are UNLIKELY to see mobile users use; it actually predates modern "responsive layout" and CSS3 by some, oh... 20 years? At least in concept. Internally Microsoft Windows has had the same functionality on it's rendering system since 1989... when it was called "8514 fonts" after the IBM 8514 graphics adapter. (kind-of a precursor to SVGA)

If you are changing the size of P just for the device, you've chosen the wrong size. PERIOD. You SHOULD be able to leave those alone. You MAY want to change heading sizes with media queries just because there's less space, but that's what media queries are for... so go ahead, use media queries for that, that's why they exist!

EM's have JACK **** to do with that in terms of what EM's do and why we are supposed to use them.

Though admittedly, the temptation to start screwing with them more is occurring thanks to "more is better to people who don't know better" stuff like retina displays -- but those browsers do a decent job of lying to us about their size; good thing too, since if you target those by resolution you're going to piss off people with 1080p or higher desktops. See the {massive string of expletives omitted} nitwits who make "flow text' -- aka the stuff that normally goes in paragraph tags --- larger just because of higher resolution. Way to piss off anyone on a desktop computer!

But in any case, you've COMPLETELY missed what EM's are for, what they do, and when they do it. They have NOTHING to do with device size. It's a user preference for accessibility, NOT some form of auto-scaling that occurs just because "It's a small screen" or "it's a large screen".

I use 120dpi/125%/20px/Windows Large / Win7+ Medium fonts and set my browsers to same on both my 1920x1080 laptop and 2560x1440 desktop displays, that's the audience for using EM's. Has NOTHING to do with what you seem to be thinking.

 

Ahhhh... Okay i really missed the point. I have no business messing around with ems to make fonts fit smaller device.

Back to basics for me. Thanks a bunch!

 

I prefer not to set font sizes at all except relative to user preferences, so I may use 1.5em on something I want to standout, but setting all the fonts to pixels or points or any other crap is stupid because know knows what sontsize a user needs better than the user. The same goes for imposing font faces. The user settings define the font the user is comfotable with why would yu want to screw with that and piss them off? You may own the site and the resources to produce the page, but when it gets delivered it belongs to the user and it purpose is to serve user needs... any other consideration is just a load ego bull.