1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

What is the best practice for font-size?

Discussion in 'CSS' started by malc, Jun 10, 2006.

?

What is the best practice for font-size in Css?

  1. %

    1 vote(s)
    50.0%

  2. em

    0 vote(s)
    0.0%

  3. px

    1 vote(s)
    50.0%
Multiple votes are allowed.
0
  1. #1
    Should I use relative font-size in css like [% or em] or should I use the distinct sizes like [xx-small or 14px]?
    What would be the best practice?
     
    malc, Jun 10, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    See css-discuss. Scan down the page a bit to "Sizing Text" for a thorough discussion.

    My pref? A percent base + em sizing.

    cheers,

    gary
     
    kk5st, Jun 10, 2006 IP
  3. malc

    malc Peon

    Messages:
    129
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for that Gary, I'll check it out.
     
    malc, Jun 10, 2006 IP
  4. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I agree with Gary on %-base and em-sizing, but beware of an obscure bug in IE! When nesting two or more elements where font size is determined using ems, IE will get the sizing very wrong when someone resizes their browser text away from the default.

    Observe the following:
    <html>
<head>
	<title>IE resize bug</title>
	<style type="text/css">
		div { font-size: .9em }
	</style>
</head>
<body>
<div>It's a nasty bug indeed!</div>

<hr>

	<div>
		It's a nasty bug indeed!
		<div>
			It's a nasty bug indeed!
			<div>
				It's a nasty bug indeed!
			</div>
		</div>
	</div>
</body>
</html>
    Code (markup):
    Plug that into a page and view it in any browser except for IE. Then try resizing the text. The nested text retains its relative size according to the parent elements.

    Now try it in IE. When you resize the text, the effect is wild! Text for which there is no question should be smaller than the text above it suddenly gets blown up or shrunk to the nth degree, instead of maintaining relative size.

    I believe when you resize something in IE and its size is set in ems, instead of IE raising the base font size across the board (which is what well-behaved browser do), IE increases the size of every element. So if you have .9em set and you push font sizes up by two, IE changes that to 1.3em, or something like that, and that's how the multiplying resize effect happens.

    In the grand picture of everything faulty about IE, this is a pretty small bug, but it will come back and bite you in the ass if you're not careful ;)
     
    the_pm, Jun 10, 2006 IP
  5. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Elements don't need to be nested to see this bug. The em unit is simply scaled wrong. When nested, however, the error is compounded and becomes more obvious.

    Why bother with a base? Why not just use percentage throughout?
     
    FeelLikeANut, Jun 10, 2006 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Because I feel comfortable with the method? Only the fixed size, pt/px, are actually bad, and then only because of IE.

    Pick the method you like.

    cheers,

    gary
     
    kk5st, Jun 10, 2006 IP
  7. malc

    malc Peon

    Messages:
    129
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    This thread is turning out to be really helpfull.
    Thanks everyone for the insight.
     
    malc, Jun 10, 2006 IP
  8. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You're right. IE gets it wrong no matter what. It's just that when they're not nested, blowing up individual elements doesn't show the bug. It still appears as if the base is being enlarged. So while it's still a bug, it doesn't really have any adverse effect on a layout, at least none that I've experienced.
     
    the_pm, Jun 11, 2006 IP
  9. dfsweb

    dfsweb Active Member

    Messages:
    1,587
    Likes Received:
    55
    Best Answers:
    0
    Trophy Points:
    88
    #9
    I use fixed pixel font sizes for all my sites. This way I can completely control the final look of the site and all content pages and know exactly how the final page will look on all machines regardless of how big they have set their font size etc. I like that control which is why I use this method. Ex: Have a look at my Photography site which uses this method.
     
    dfsweb, Jun 11, 2006 IP
  10. sgtsloth

    sgtsloth Peon

    Messages:
    205
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #10
    The downside of this is that users cannot resize the text to their liking if they're using Internet Explorer. Although this helps preserve the look of your site, those with poor vision may have trouble reading your text. I know I like to bump up the text size on some sites. :)
     
    sgtsloth, Jun 11, 2006 IP
  11. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #11
    As dfsweb mentioned, you have to decide which is more important: convenience for yourself or convenience for your visitors.

    Also, remember that this issue is a bug in IE only. Anyone browsing with Firefox, Safari, Opera, or others can still change the text size.
     
    FeelLikeANut, Jun 12, 2006 IP
  12. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #12
    But your site adjusts itself gracefully when you increase font sizes, so why not allow the people who need to do this the ability to do it, rather than taking advantage of a browser bug that inconveniences your audience?

    The other side of the coin is that using fixed pixel sizes allows designer to be lazy. It gives them a false sense of control, and they start designing things that break whenever you use a browser that allows for resizing. It's simply a bad practice all around.
     
    the_pm, Jun 12, 2006 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    dfsweb: When quoting, you should complete the context;
    As the others have said, IE does not allow resizing px measures. That is a Bad Thing. Any web designer worthy the name will design for at least smallest to largest text sizes on IE and ±2 sizes on Firefox.

    I should not have thrown pt measures into the mix, simply because they are totally inappropriate for the web. Only Linux and Mac even try to render pts accurately on the screen.

    cheers,

    gary
     
    kk5st, Jun 12, 2006 IP