How about a font size unit update.

Discussion in 'CSS' started by peter lewis, Mar 23, 2013.

  1. #1
    I have tried my best to search the forums for the best font size units to use. The last really good thread is dated 2007. With ie6 irrelevent now, may I ask what font size units are best practice - px, em, or %?
    My apologies if I missed a more recent thread. My searches returned only discussions about ads and adsense.
     
    Solved! View solution.
    peter lewis, Mar 23, 2013 IP
  2. #2
    %/em (same thing really, just one is *100 in scale) should be used as much as possible -- in particular on your flow text (aka your content paragraphs). PT (points) is for PRINT, and PX should only be resorted to when you have an image interaction -- which these days means not all that often given all the neat stuff we can do with CSS3. (IE9/earlier users don't get it, OH WELL).

    A number of years ago I wrote a font size comparison page that covers what all these sizes actually DO -- really this hasn't changed one bit.
    http://battletech.hopto.org/html_tutorials/fontCompare/template.html

    You can see the reason for using %/em in that large font/120dpi users will automatically get larger text WITHOUT diving for the zoom in anything except firefxxors -- mostly due to it being Nyetscape 4's sweetly retarded cousin. (I'm a BIG fan of Gecko, can't you tell?). For a while I advocated PT for screen since it was the only one that Gecko obeyed, but I've changed my position on that as the Nyetscape 4 legacy and gecko become less and less relevant... and if you REALLY want FF and it's kin to do this, you CAN change the default size in the settings.

    ... and that's REALLY what %/em is about -- letting the content size to the users browser and/or OS preferences so the user isn't diving to play with the zoom when they shouldn't have to; because something I've found in testing with users is that if they have to zoom, they won't bother and they'll go find some other website. (usually because most people don't even know browsers CAN zoom).

    Also beware that % or EM is based on the elements parent... or that elements parent... or that elements parent, all the way up the chain to BODY... so if you do something silly like set "font-size:12px" on body, you've completely shtupped the entire reason for using %/em anywhere on the page, as instead of being based on browser default it's now based off 12px.

    Of course %/em works best in a semi-fluid, elastic or responsive layout. You crap out a fixed width design that can't adjust to the default font size being different, it's gonna blow up in your face. NOT that ANYONE has ANY business crapping out fixed width designs, no matter what the lazy sleazeballs and PSD jockeys who know Jack **** about accessibility will try and tell you.
     
    deathshadow, Mar 24, 2013 IP