digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

Effective Style with CSS and em

mondaybynoon.com — Revisiting the em unit of font-size and examining the benefits. A good read for those who want to make their site more accessible and usable.

Bury
show profanity settings
expand all
  • mchase, on 10/12/2007, -2/+3This is an excellent reference to point people towards when they ask about the pros and cons of font size types.
  • jreid, on 10/12/2007, -6/+2helped me out a bit :P
  • BladeMelbourne, on 10/12/2007, -6/+13xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | %

    These resize correctly in the target browsers I develop for.

    As correctly stated, using percentage is prefered by some developers, however I disagree that it is not intuitive.

    I never use em, ex, px, in, cm, mm, pt or pc.
    • BladeMelbourne, on 10/12/2007, -0/+25turgor - these font-size properties are part of the CSS 2.1 specification:
      http://www.w3.org/TR/CSS21/fonts.html#font-size-props

      These are perfectly valid for use with XHTML 1.1, which I develop to everyday.

      These font-size properties did not even exist when HTML 3.2 was ratified. HTML 3.2 is completely irrelevant from the discussion. Time for you get into the new millenium by revisiing your understanding of W3C standards.
    • magik, on 10/12/2007, -2/+7haha, pwn3d.
    • BladeMelbourne, on 10/12/2007, -0/+1@tugor
      You implicity implied that usage of these font properties is from the previous millenium.

      Using these font properties is ideal for an audience with visual impairments. The web application I develop for Amex EMEA is required to be DDA compliant (UK legislation, related to WAI/WCAG and US Section 508). Using these font properties allows visitors in MSIE, Mozilla, etc to use their browser to adjust the size of their fonts.

      A well designed page does not need a set default pixel size, PT or EM. Please have a look at http://www.mikeskinner.net/ to see what can be accomplished without it. Then look at it in another browser. Try resizing the fonts. Try turning the colour off. It is still just as accessible. Try another platform - Linux, Mac or Windows and it will still be accessible.

      Then look at the source code. Do you see any tables for non-tabular data? Do you see any font tags? The answer is NO.

      I have been using CSS for a very long time, and in my opinion you have yet to say anything that I even partially agree with.
    • prence, on 10/12/2007, -1/+2"A well designed page does not need a set default pixel size, PT or EM. Please have a look at http://www.mikeskinner.net/ to see what can be accomplished without it."

      Bahahaha. I'm sorry, I thought you said a well designed page.
  • lala, on 10/12/2007, -8/+1I like
  • Hanthus, on 10/12/2007, -21/+4OH NO !!! MORE CSS!! THE HORROR!
  • wolfzero, on 10/12/2007, -1/+1Not that they don't mention it in the article, but increase the size twice in Firefox (from default) and it breaks a few things. digg.com starts messing up text ads if you increase it all, more as you increase it. The site remains functional at a +3 increase...which is probably the best you could hope for. Anything beyond that is a little ridiculous, and I'm using a 15in LCD at 1600x1200.
    • pcronin, on 10/12/2007, -1/+115" @ 1600x1200? ouch. notebook I asume? couldn't imagine a desktop at that res.
      my 21" @ 1650x1080 is sometimes hard to read if I lean back too far ;)
    • elsjaako, on 10/12/2007, -1/+1With Opera you can scale properly, It'll even scale images and stuff.
    • shakin, on 10/12/2007, -0/+1@elsjaako

      Last I checked (9.0 preview 1), Opera doesn't scale pages correctly at all. It zooms the whole page, which is not the same thing as increasing the font size. The page ends up being too wide so it scrolls horizontally, the graphics look bad and lost detail, and fonts often render too tight at some sizes.

      Firefox just scales the font size, which normally allows the HTML elements to expand as necessary to fit the text, allows the text to wrap instead of go off the screen and doesn't affect images at all.
  • cr3ative, on 10/12/2007, -6/+9That site looks horrible, in my opinion.
    Digg this comment if you agree, but it's far too "busy" yet trying to be minimalistic.
    • Urusai, on 10/12/2007, -0/+1If you're gonna hype web style, it's a good idea to actually use some on your website.
    • mzhao, on 10/12/2007, -0/+1It's ironic that though the article (which is informative for those still using px) discusses using ems for layout measurements, the site itself doesn't use ems for layout :P
  • xodex, on 10/12/2007, -6/+1I'll stick with px
    • ThankTheCheese, on 10/12/2007, -0/+6There's no excuse for using px for fonts. It's just plain irresponsible. It's just as easy to use % or em as it is for px.

      I use % myself; perhaps it isn't as intuitive at first, but you soon get a feel for it.

      I can understand ppl using px for widths of DIVs, because giving DIVs percentage widths can screw up the placement of a design, but using relative sizes for fonts has absolutely no negative side effects on the design of a page, so there's no reason to use px aside from lazyness IMO.
    • jinexile, on 10/12/2007, -1/+1px and pt have severe accessibility repurcussions in IE. I worked with a guy that was damn near blind and relied on being able to resize fonts, easiest Firefox convert I ever had, thanks crappy web designers.
    • JohntB, on 10/12/2007, -0/+2Really, if you're using em for fonts, you should be using em for divs. Unless you want your users who are viewing it at large font sizes to see lots of text crammed into an itty bitty box.
  • claco, on 10/12/2007, -1/+2The trick to em font sizing is this hack.

    body { font-size: 76%};

    See similiar info related to the article:
    http://www.alistapart.com/articles/elastic/
    http://www.thenoodleincident.com/tutorials/typography/index.html
    • Vagari, on 10/12/2007, -1/+262.5%, that basically gives you 1em = 10px.
    • Bogtha, on 10/12/2007, -0/+2No, 62.5% on the root element gives you 62.5% of the user's default font size. That only gives you 1em = 10px when the user's default font size is 16px. That is a huge unwarranted assumption that leads to fragile designs that don't work very well.

      A good designer understands the medium he works with. Being a good web designer means knowing that there are some things you just can't control. Font sizes are one of these things. Font sizes can and will vary.

      If you try and control font sizes, you are working against the medium's strengths. Variable-sized fonts are a feature, not a bug. If your designs don't work with a range of font sizes, then trying to "fix" the font size is an attempt to bury your head in the sand and pretend the web isn't the way it is. Instead of "fixing" the font size, fix your designs.
  • zonemen, on 10/12/2007, -1/+2That site is screwed in IE7. Text on top of text.
  • MrDan, on 10/12/2007, -0/+0"After taking some steps to lightly test the usage of em units, I’ve found that the character rendering seems to be off kilter in both Galeon and Epiphany when using Linux. They appear to reflect the same issues as Opera and IE in Windows but I wasn’t able to find a great deal of related information."

    So...."doesn't work very well" then ! *rolls eyes*
  • bananaph0nee, on 10/12/2007, -2/+2cr3ative, I agree. It's too busy.
  • sembetu, on 10/12/2007, -0/+0Just be careful mixing % for fonts and px for Div's, it can result in some screwy design. Px Div settings create a hard space, whereas % fonts are fluid, and a hard space will not gracefully resize as your % fonts will.
    • UGM2099, on 10/12/2007, -1/+2it's easy to allow it scale vertically without breaking. there's nothing wrong with fixed width design if it's designed well.
  • mrfoos, on 10/12/2007, -2/+2I know this is counter the intellectual movement of web design but I will only use fixed fonts. I have seen many users where the default sizing was too small to read on the browser, and the users didn't know how to size it up. Remember, most users are clueless. They assume there's nothing they can do, and they move on to the next website. And what about images? In the example in the article he talked about an Exec wanting to read some small print. It's more likely the Exec wants to see a zoom up on a photo or something like a pie graph. Fancy fonts can't help that. Amazingly, a browser like Opera can zoom everything regardless of style sheet technique. So whats a better solution? Think about it. There are fewer browser types than websites. 10,000,000 web designers agreeing to design their sites a specific way? OR, using zooming functionality in browsers like Opera. I've also worked with some techies in a college lab for the visual impaired. They already have special browsers for their needs. They don't really need our help. It would be like designing windows in all buildings and houses to function like lens so near-sighted people can see better out the window. Near-sighted people already have glasses. You're just going to mess up the view for everyone else.
    • notman, on 10/12/2007, -2/+1I noticed the text doesn't align on this site also (on IE7)

      It doesn't on Digg either, so I'm not sure if I just replied to the right post :/
      Edit: Damn, wrong post :( This was in response to "That site is screwed in IE7. Text on top of text."
    • thomasf, on 10/12/2007, -3/+1I guess no one else is noticing how much sense you just made. Thanks for the intelligent thought.
    • Bogtha, on 10/12/2007, -1/+2> I have seen many users where the default sizing was too small to read on the browser, and the users didn't know how to size it up.

      Which browsers ship with a default text size that is too small to read?
    • thomasf, on 10/12/2007, -0/+0bogtha: I believe he meant that a user using a high res or with a visual impairment. Thus, the default text size was fine for normal users but not for her. But she didn't know how to utilize the font size options and so just moved on. Em did nothing.
    • Bogtha, on 10/12/2007, -0/+2If you are considering high resolutions or people with visual impairment, then px is an even worse choice than normal. And how are these people coping with the unreadable text everywhere else in their environment? I haven't seen any web browser use a default font size that is smaller than the default font size in menu bars, email, word processors... you name it.

      If somebody has trouble with small text, then giving them a fixed size can only cause problems, because you have no way of knowing how big you should make it. Giving them exactly the font size they have configured, on the other hand, is not going to cause problems because if they can't read that, then they can't read anything else on the computer, and will be learning how to change font sizes very quickly.
    • regguy, on 10/12/2007, -0/+0I know what he's talking about. I've seen people where the dynamically sized fonts were really, really small. Who knows how it got that way? Maybe they accidental scrolled it down with the mouse. Most users don't know you can increase the font size anyway. So if the font was fixed at say 10 or 12, they have no problems reading the page. On your page, they can't read jack so they leave. Again, these are normal people without eye problems.
    • Bogtha, on 10/12/2007, -0/+1Oh, I've seen plenty of users with really small fonts too. It's always one of the following things:

      1. Dynamically-sized text in ems or percentages, where the ems or percentages are stupidly small.

      2. Absolute unit or pixel-based.

      I've never seen 100%/1em unreadable. Ever.

      > So if the font was fixed at say 10 or 12, they have no problems reading the page.

      10 or 12 what? Points? Pixels? Either is unreadable for many people, whether it's poor eyesight, high resolutions, small screens, etc.
  • swein515, on 10/12/2007, -3/+2em is fine for blogs and other text-based sites, but for web applications, they're a recipe for disaster. PX is the way to go if you want to ensure precise sizing (just set your browser's default font to 48pt and see how it destroys the site).
    • jinexile, on 10/12/2007, -0/+1If you want precise sizing then webpages are not the format you should be using, PDFs or Images are for that.
    • swein515, on 10/12/2007, -0/+0I'm talking about web app structure. Your comment makes no sense in that context.
    • jinexile, on 10/12/2007, -0/+2Maybe but you're misusing the medium. I've developed plenty of webapps and have used the fact that they are web based to allow for dynamic sizing, it's actually helped in a company where users complained about the size of fonts where too large or too small on their client side app.
  • myxyplik, on 10/12/2007, -1/+2@BladeMelbourne (WHY DO THE REPLY LINKS KEEP DISAPPEARING!!!)

    As someone who works as a web developer, I totally agree. The whole point of using relative font-sizing is to allow for user size adjustability, particularly for those who are visually challenged. That's just good web design.
  • montanna, on 10/12/2007, -1/+0Why does no one get exited/even mention about scaling IMGs with font size. I always thought that was just as cool. If you can't read the text, then you can't see the detail in the image right?

    (oh FP. Hi all!)
    • arizonagroove, on 10/12/2007, -0/+2I don't get excited about it because images generally look kinda rubbish when re-sized by a browser.
  • jtrost, on 10/12/2007, -1/+4All the corporate intranet design I've done has required the use of em because it's the only font measurement that meets usability standards. Personally, I don't think it's a big deal to learn how to measure an em because you can still achieve the same font size as a pt or px. People just like to use pt and px because they've memorized that type of measurement.
  • thedarklordmole, on 10/12/2007, -3/+0body{
    font-size: 10px;
    }

    then you use em to set the rest of your fonts which uses 10px as the base.

    -the mole
    • arizonagroove, on 10/12/2007, -1/+2Using px for font sizes is generally a very bad idea. 20px may look great on a 1024x768 screen but it may be unreadable on say 1600x1200 screen. There are case where using px for font size is desirable, e.g. if you want to fit the text inside an element who's dimensions are for whatever reason of a fixed size specified in px, but for general content it is best to not to specify a font-size in body at all let alone one in px.
    • jinexile, on 10/12/2007, -0/+1Not to mention in IE that locks the 10px font at 10px, which is a huge usuability issue. I prefer to let the user's operating system (and thus the user) control the default font size then build everything to scale according to that.
    • thedarklordmole, on 10/12/2007, -0/+0you're missing my point. you set the default to 10px, but then style accordingly with em on your div's, etc... 1.2ems is 12px, 2.0 is 20px. (or so)

      -the mole
  • joshpeek, on 10/12/2007, -0/+2If you dealing with font sizes 1.5em = 150%. But if you use percent for a width (or any length) it will be that percent of the parent object. So width:0.5em and width:50% are different. 0.5em would set the width to half the font size and 50% would set it to half the page.

    I prefer sticking to ems for font-sizes. And I vary the use of percent, pixels, and ems for lengths.
  • drunkJerkface, on 10/12/2007, -2/+2That site is horrible. Why would I read anything from such a poorly designed page?
  • banglogic, on 10/12/2007, -0/+1I can't see the page. Is there a cache?
  • Joshuarr, on 10/12/2007, -2/+0"While this situation may not be applicable to every situation" ... Brilliant writing. E for effort.
  • diffuze, on 10/12/2007, -0/+0Excellent article!
    I've been using 'px' almost exclusively up til now, sure.. the odd 'em' slips in but not to full context.
    This read made me think again! I'll remake my stylesheet the next few days.
  • melanko, on 10/12/2007, -2/+0Been doing this for a while.
    • kewlceo, on 10/12/2007, -1/+1Here's a gold star to stick on your forehead. ;)
  • kola_kidd, on 10/12/2007, -0/+1Great to see more design bits n' pieces on digg. Cheers shockEnterprise
  • kyndig, on 10/12/2007, -1/+1I too still believe that % based is the best solution, as pixels and em are hard-set values.
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.