/    Sign up×
Community /Pin to ProfileBookmark

EM’s versus pixels

Copy linkTweet thisAlerts:
Jun 25.2005

Hi

I’m designing a site at the moment, and have been told that i should use em’s for font sizes rather than pixels.

Is this correct? And if it is, what are the advantages of using EM’s and the disadvantages (if there are any).

Thanks a lot

to post a comment
Full-stack Developer

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@spidermattAug 17.2005 — ems are a general measurement that can be read by different sized screen and browsers etc and interpreted by the output media to give it a size relative to that media. Pixels however are a strict measurement (as you know). If you are to assign pixels to fonts then different sized screen and browsers will distort the text in weird ways usually by squashing it untill it is no longer readable. The cases in which this happens however would be few but you never know who is viewing your site and on what so to be on the safe side use ems for your fonts. Its all to do with accessability so it is an important thing to take note of in the future! hope this helps!
Copy linkTweet thisAlerts:
@felgallAug 17.2005 — Using EMs means that if your visitor needs to make the text bigger so they can read it they can. Using pixels means that the text will display using the specified number of pixels regardless of what the user wants. If their screen is set to 1000 pixels to the inch (no screen resolution goes this high yet but it could be soon) then the text would be microscopic. Even points is a better choice than pixels since at least it is independent of screen resolution although not changable by visitors without overriding the whole stylesheet.
Copy linkTweet thisAlerts:
@NogDogAug 17.2005 — Note that an em by itself is meaningless; it's size is coupled to the applicable font size of the element in question. If the current font size is 12px or 15pt or 0.2in, then the em will be roughly that size (12px, 15pt, or .02in)*. Then if the user increases/decreases the font size of his browser display, any elements using em units for any dimensions should have those dimensions increased/decreased in proportion to the new font size.

If you assign a font-size of 2em, then that means the font-size for that element will be twice the size of its default font.

____________
  • * The name "em" comes from the dimensions of a capital "M" within a given font style and size.
    • Copy linkTweet thisAlerts:
    @LJKAug 18.2005 — Hi -

    Call me crazy, but I usually set font-size:100%; in the body css, then set it from there in following elements - which may not be the greatest choice, but at least no matter what the user has it set for, the text will be proportional. [Line-heights I do w/ em's, tho - and letter-spacing in px.]

    El
    ×

    Success!

    Help @Alexpte spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.28,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...