Skip to main content

em vs pixel vs % 2323 Responses

Last post: 6 years, 4 months ago | Thread started: Aug 5, 08, 12:54 p.m.

RespondNew TopicDisable Images

  • nearestexit

    When specifying font size in a stylesheet, which should i use and why?

    Aug 5, 08, 12:54 p.m. – Permalink
  • Mojo

    this probably isn't helpful, but it depends.

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 12:58 p.m. – Permalink
  • d_rek

    Yeah, depends on if you're making a fluid or static page... percentages are good for fluid, pixels are good for static or keeping things consistent, and I still cant' figure out why they let you use EMs when designing for the web...

    • EM spacing is relative to typeface. 1EM in Arial is a different dimension than 1EM in Georgia. You dig?ian001/2
      I see, thanks!d_rek2/2
    next note >+ add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 12:59 p.m. – Permalink
  • JG_LB

    I usually go with pixel because most people I ask don't know what em's are...

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 1 p.m. – Permalink
  • Milan

    pixels

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 1:02 p.m. – Permalink
  • TheBlueOne

    I bounce between pixels or ems depending on the design and my mood...

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 1:02 p.m. – Permalink
  • acescence

    pixels are relative to the resolution of the viewing device and will differ.

    em will give you the most consistence and will resize predictably when someone increases or decreases the font size

    next note >+ add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 1:02 p.m. – Permalink
  • ephix

    why dont know about em? is it the same as pt?

    next note >+ add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 1:04 p.m. – Permalink
  • Milan

    browser text-size increase should never be used anyway, as it completely breaks the layout in any site... "blind" people should use zoom instead

    • if it breaks the layout then you're doing it wrongacescence1/6
      sorry not trying to sound mean!acescence2/6
      There are times when text-size increase is good, and there are ways to avoid breaking the layout.ismith3/6
      i agree. if a layout breaks upon text-size increase, then it's probably not coded properly...nearestexit4/6
      at least in terms of accessibility.nearestexit5/6
      Yeah, make your site resize gracefullyyaphi6/6
    next note >+ add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 1:06 p.m. – Permalink
  • ismith

    I almost always use EM, but I find myself using pixels as well. Never percents.

    • So, a mix of em/px on most projects.ismith
    + add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 1:07 p.m. – Permalink
  • ian00

    "Our task was to find a way to size text that allows designers to retain accurate control of typography, without sacrificing the user’s ability to adjust his or her reading environment. We tested various units across common browsers. Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers."
    http://www.alistapart.com/articl…

    • good article. mostly because it agrees with what i thought was the answer.nearestexit
    + add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 1:19 p.m. – Permalink
  • Chazolta

    px

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 3:43 p.m. – Permalink
  • trooper

    body{font-size:62.5%} = 10px or 1em - work it out from there ;)

    next note >+ add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 3:58 p.m. – Permalink
  • airey

    there needs to be rappers called all 3 of these names. then this thread would be tre-cool instead of uber-nerd. i hope in the next life i'm not an uber-nerd. if anyone's listening up or down there!

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 4 p.m. – Permalink
  • 1pxsolid

    The base declaration for 'body' should be px or a named value like 'small'

    Then all your other styles should be percentages. And they represent percentages of the value set in body.

    • I used to do this, now I do the 62.5% body ruleyaphi
    + add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 4:14 p.m. – Permalink
  • nocomply

    Obviously I try to avoid px because it does not scale in IE 6 and IE 7.

    IE 6 and below have problems smoothly scaling font sizes in ems.

    so here's what i do:

    html {font-size: 100%;}

    body {font-size: .75em;}

    This sets the default font-size in most browsers to about the same as 12px.

    From there I set the font size in divs using ems as necessary. For example to make the font in a side-column looks more like 11px I would do something like:

    #side_column {font-size:.92em;}

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 5:54 p.m. – Permalink
  • nocomply

    In all honesty though, don't listen to me...get it from the source:

    http://www.alistapart.com/articl…

    + add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 5:59 p.m. – Permalink
  • mjbauer

    If you are talking only about typography, you use a pixel height in the body declaration, because this makes it so you can start from the same point in all browsers. Then you use ems for font size and line-height, letter-spacing, etc. because when you adjust one, the others will change in relation to it.

    Ex: You set your <p> font-size to 1.2em and your line-height to 1.4em (these are based on the 12px height that you specified in your <body> style). Then if you decide later to change your <body> font size to 11px the other measurements change in relation to it, and you don't need to edit those styles as well. If you used pixels on everything, then you would need to change each instance of font, line, and spacing measurement if you decided to change one, because they aren't relative measurements.

    I'm not sure why A List Apart suggests using a percentage for your <body> style, because font sizes differ from browser to browser, platform to platform. It seems like it's best to unify this by setting the pixel size from the beginning, but maybe I'm missing something that would explain why their method is better.

    Either way, this method has worked really well for me.

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 6:27 p.m. – Permalink
  • svenreed

    i recently started 'reteaching' myself css and html. one of the first things i read from various sources, including qbn, was to use em's and avoid pixels.

    also remember, not all users have their fonts set to standard size, some people are reallyyyy old, or just can't see well. hehe.

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 7:21 p.m. – Permalink
  • nikdaum

    In a related note, has anyone seen how Firefox 3 scales pages. Instead of just the text, the whole page scales up. The size ratios off all elements on the page stay intact.

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 7:45 p.m. – Permalink
  • allworknosleep

    I just finished my first website using all em instead of pixels.. it can become a bit tricky but its definitely worth it.

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earAug 5, 08, 10:07 p.m. – Permalink

Login or Register to respond to this

Skip to main content