0

I've read quite a bit about the "em" measurement for "font-size" and I've noticed that some say that especially disabled users benefit from "em" because they can adjust the size of font.

I'm new to CSS & HTML and I do not understand how this really works. As I understand I can always - as a user - enlarge the viewing size in my browser. Doesn't this also work when I use "px" all the time?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Hip
  • 99
  • 9
  • Possible duplicate of [Why em instead of px?](https://stackoverflow.com/questions/609517/why-em-instead-of-px) – adamoffat Sep 18 '18 at 21:09
  • "Doesn't this also work when I use "px" all the time?" Yes, but it wasn't true in the past. – Alohci Sep 18 '18 at 21:46
  • Does that mean there is no difference between "px" and "em" today and the size adjusts itself when the user switched the size in browser?? – Hip Sep 19 '18 at 16:45

1 Answers1

1

Em represents a page's default size, so for example, 1em might be 12px, but for larger screens may be something else, perhaps 16px. 2em would be twice that size of 1em.

The takeaway is em scales with the screen resolution and is a good choice for responsive design.

Px on the other hand is a specific, fixed sizing guide, where a pixel is one square on a screen. So 12px on one screen may look small on a larger screen.

I recommend using em for most purposes unless there's a good reason you need a specific pixel size.

Curtis White
  • 250
  • 3
  • 13
  • Is rem same as em ? – Kal Sep 18 '18 at 21:16
  • @Kal em is relative to parent, so each element should consider its parent and rem is relative to root, so all the element will have the same reference – Temani Afif Sep 18 '18 at 21:39
  • So rem might be better for consistency across all objects right ? All h1s will be same size no matter what their parent size is ? – Kal Sep 18 '18 at 21:51
  • @curtis So I don't have to set a parent in "px" first? I would just say the heading is 1em and the paragraphs below are 0.9em? And the screen resolution of the user decides how much "px" 1em, or 0.9em is, right? – Hip Sep 19 '18 at 15:05
  • 1
    @Hip Right. Here's a site that explains how to use rem and em. https://j.eremy.net/confused-about-rem-and-em/ – Curtis White Sep 19 '18 at 18:11
  • @CurtisWhite Can you tell me if I'm right assuming that when I have two "div"-containers, and the first "font-size" would be 10px for 1em(because of the resolution of the device) - the child container would calculate upwards from this 10px to 1.2em(12px) and not from 16px, which is usually the default size? So with **em** the resolution adjusts itself without me having to first say 10px = 1em, and so on?`
    Example
    Example2
    `     – Hip Sep 19 '18 at 20:33
  • Sounds about right. I haven't used it like that in a while though. It's best to look up examples to see how it behaves, or test it on your own website – Curtis White Sep 19 '18 at 20:41