Comments on: How to specify dynamic font sizes consistently with CSS http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/ Web development and Internet trends Fri, 05 Dec 2008 10:55:48 +0000 http://wordpress.org/?v=2.6.1 By: All in a days work… http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-91043 All in a days work… Mon, 13 Aug 2007 02:56:59 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-91043 [...] How to specify dynamic font sizes consistently with CSS Let’s say we want a web page where the general font size is 10 pixels. We then take the desired font size, 10, and divide it with the default web browser size, 16: 10 / 16 = 0.625. This is the value that we use for the em unit on the body element: .625e (tags: em) [...] [...] How to specify dynamic font sizes consistently with CSS Let’s say we want a web page where the general font size is 10 pixels. We then take the desired font size, 10, and divide it with the default web browser size, 16: 10 / 16 = 0.625. This is the value that we use for the em unit on the body element: .625e (tags: em) [...]

]]> By: Kenneth Sundqvist http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-42477 Kenneth Sundqvist Wed, 14 Mar 2007 14:48:20 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-42477 One rule that should be used when deciding on the size for the body copy is that at the largest user setting in IE6 it should hit the bolder state (which is also +2 in FX, and that is less irritable to scale to than +3). If you don't know what that means try to scale the font on a page and watch it get bolder at some point. This is a usability thing. Because there are people with poor vision who use IE6 who like to scale their text and hitting that bolder spot makes reading a lot easier to read. Even I scale text to bolder when I'm sitting back from the monitor to read longer texts, such as these comments. Needless to say, the cool, crisp, small designer size fails at this, especially with the horrible medium grey colour. The Noodle Incident guide, posted above, is very good indeed. And I use it myself all the time. One rule that should be used when deciding on the size for the body copy is that at the largest user setting in IE6 it should hit the bolder state (which is also +2 in FX, and that is less irritable to scale to than +3). If you don’t know what that means try to scale the font on a page and watch it get bolder at some point.

This is a usability thing. Because there are people with poor vision who use IE6 who like to scale their text and hitting that bolder spot makes reading a lot easier to read. Even I scale text to bolder when I’m sitting back from the monitor to read longer texts, such as these comments.

Needless to say, the cool, crisp, small designer size fails at this, especially with the horrible medium grey colour.

The Noodle Incident guide, posted above, is very good indeed. And I use it myself all the time.

]]> By: kimblim http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40577 kimblim Tue, 06 Mar 2007 08:14:40 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40577 But ofcourse! Thanx! But ofcourse! Thanx!

]]> By: Robert Nyman http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40573 Robert Nyman Tue, 06 Mar 2007 07:57:20 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40573 kimblim, The value following the slash is line-height. kimblim,

The value following the slash is line-height.

]]> By: kimblim http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40432 kimblim Mon, 05 Mar 2007 21:45:37 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40432 Just a quick question regarding this: h1{ font: 1.7em/1em Arial, Helvetica, sans-serif; } Why the "1.7em/1em" ? Whats the 1em for? Just a quick question regarding this:

h1{
font: 1.7em/1em Arial, Helvetica, sans-serif;
}

Why the “1.7em/1em” ? Whats the 1em for?

]]> By: Robert Nyman http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40269 Robert Nyman Mon, 05 Mar 2007 08:03:43 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40269 Stefan, Jens, Anton, Thanks for your comments and input! Stefan, Jens, Anton,

Thanks for your comments and input!

]]> By: Anton Andreasson http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40086 Anton Andreasson Sun, 04 Mar 2007 18:08:51 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40086 Yeah, the noodle method is the only one I dare use on larger projects. Yeah, the noodle method is the only one I dare use on larger projects.

]]> By: Jens Wedin http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40015 Jens Wedin Sun, 04 Mar 2007 10:59:47 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-40015 Here's a great resource when it comes to font sizes. I´ve used his idea on a few big sites. http://www.thenoodleincident.com/tutorials/typography/index.html Here’s a great resource when it comes to font sizes.
I´ve used his idea on a few big sites.

http://www.thenoodleincident.com/tutorials/typography/index.html

]]> By: Stefan Van Reeth http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39750 Stefan Van Reeth Sat, 03 Mar 2007 03:46:34 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39750 Great article, good discussion. Except for agreeing mostly with Robert, there's not much to add to it anymore, so I leave it like this. Robert, about your last question: nope. Same answer as the big font sizes. If the user wants microscopic fonts, just let them ;). Great article, good discussion. Except for agreeing mostly with Robert, there’s not much to add to it anymore, so I leave it like this.

Robert, about your last question: nope. Same answer as the big font sizes. If the user wants microscopic fonts, just let them ;).

]]> By: Robert Nyman http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39569 Robert Nyman Fri, 02 Mar 2007 08:45:44 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39569 I agree with Ash here, that someone can always break the design anyway. And hell, if they want a gargantuan font size, just let them. What might be interesting in relation to that, though, is the question if we should prevent users from having a too small font-size. If the end user, accidentally (trust me, this has been up for a lot of web sites), have set their font size to smaller, the script could bump the default level up to a reasonable standard. I agree with Ash here, that someone can always break the design anyway. And hell, if they want a gargantuan font size, just let them.

What might be interesting in relation to that, though, is the question if we should prevent users from having a too small font-size. If the end user, accidentally (trust me, this has been up for a lot of web sites), have set their font size to smaller, the script could bump the default level up to a reasonable standard.

]]> By: Ash Searle http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39365 Ash Searle Thu, 01 Mar 2007 12:10:46 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39365 To answer some of Johan's questions with my own opinion: The usual default font-size is 16px (tested across different browsers and platforms.) 12px is the default only for monospaced text (e.g. text in a <code><pre></code> block) No, we don't need JS to control a max font-size setting (why would you? If a user wants to zoom to 160pt size, why stop them? They can always *always* break your layout if they want to...) Default line-height: <code>alert(getComputedStyle(document.documentElement, null).lineHeight)</code> This turns out to be <code>normal</code>... The CSS 2.1 spec says that browsers should implement a 'reasonable' value for <code>normal</code> somewhere between 1.0 and 1.2. I think the line-height depends on the application: if you're going to use sub-scripts and super-scripts (footnotes?) then you'll want a bigger line-height. Also, academic texts generally use a line-height of either 1.5 or 2 (allowing people to write notes between lines on a printed copy.) As for setting <body> font-size: most pages contain a few <code>div</code> elements used purely for layout, so why not set the font-size on each containing element (to 'small', 'medium' (16px) or 'large') then use context-relative <code>em</code> values? To answer some of Johan’s questions with my own opinion:
The usual default font-size is 16px (tested across different browsers and platforms.) 12px is the default only for monospaced text (e.g. text in a <pre> block)

No, we don’t need JS to control a max font-size setting (why would you? If a user wants to zoom to 160pt size, why stop them? They can always *always* break your layout if they want to…)

Default line-height:
alert(getComputedStyle(document.documentElement, null).lineHeight)
This turns out to be normal… The CSS 2.1 spec says that browsers should implement a ‘reasonable’ value for normal somewhere between 1.0 and 1.2.

I think the line-height depends on the application: if you’re going to use sub-scripts and super-scripts (footnotes?) then you’ll want a bigger line-height. Also, academic texts generally use a line-height of either 1.5 or 2 (allowing people to write notes between lines on a printed copy.)

As for setting <body> font-size: most pages contain a few div elements used purely for layout, so why not set the font-size on each containing element (to ’small’, ‘medium’ (16px) or ‘large’) then use context-relative em values?

]]> By: Robert Nyman http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39322 Robert Nyman Thu, 01 Mar 2007 07:39:32 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39322 Johan, I'll leave it to other readers to answer those questions, to see what the general opinion is. NICCAI, Thanks for sharing! Johan,

I’ll leave it to other readers to answer those questions, to see what the general opinion is.

NICCAI,

Thanks for sharing!

]]> By: NICCAI http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39263 NICCAI Wed, 28 Feb 2007 23:08:33 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39263 I prefer to set body font-size equal to x-small which is approximately 10px (but not in IE 5.5 which is xx-small). From there I simply size up using percentages - 110% approx = to 11px, 160% approx = to 16px, etc... I prefer to set body font-size equal to x-small which is approximately 10px (but not in IE 5.5 which is xx-small). From there I simply size up using percentages - 110% approx = to 11px, 160% approx = to 16px, etc…

]]> By: Johan http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39177 Johan Wed, 28 Feb 2007 10:28:44 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39177 There is a correlation between page lay-outs and font styling: - fluid lay-outs use ems and percentage for font-size depending on the way the fluid container boxes are styled to prevent breakage. - zoom lay-outs are ems all the way, both font-sizing and container boxes - fixed lay-outs use px, ems and percentage for font-size but have px styled container boxes The body is the preferred way to set a default font-size but does vary a lot, as I have seen with many a design. body {font-size:100.01%; /* Opera fix*/} body {font-size: 100%;}} body{font-size: 76%; /* Owen Briggs idea?? */} body{font-size: 62.5%; /* very small */} body{font-size:0.8em; /* any quirks possible??*/} body{font-size: small; /* IE5 WIN and font sizing} All of the above are related to the px range 12-16px for default font-size. Other questions: - What is the default font-size to aim for: 12px or 16px - Do we need JS to control eg max font-sizing? - line-height has many settings from 1.2 to 1.5 which equals about 19px for average normal text treatments, what is a default line-height value here? There is a correlation between page lay-outs and font styling:
- fluid lay-outs use ems and percentage for font-size depending on the way the fluid container boxes are styled to prevent breakage.
- zoom lay-outs are ems all the way, both font-sizing and container boxes
- fixed lay-outs use px, ems and percentage for font-size but have px styled container boxes

The body is the preferred way to set a default font-size but does vary a lot, as I have seen with many a design.

body {font-size:100.01%; /* Opera fix*/}
body {font-size: 100%;}}
body{font-size: 76%; /* Owen Briggs idea?? */}
body{font-size: 62.5%; /* very small */}

body{font-size:0.8em; /* any quirks possible??*/}

body{font-size: small; /* IE5 WIN and font sizing}

All of the above are related to the px range 12-16px for default font-size.

Other questions:
- What is the default font-size to aim for: 12px or 16px
- Do we need JS to control eg max font-sizing?
- line-height has many settings from 1.2 to 1.5 which equals about 19px for average normal text treatments, what is a default line-height value here?

]]> By: Robert Nyman http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39160 Robert Nyman Wed, 28 Feb 2007 08:56:11 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39160 Johan, <blockquote> why not add seperate font styles in pixels for IE WIN?? </blockquote> Answered twice above. <blockquote> more specific: zoom feature IE7 and fontsize? </blockquote> Doesn't affect font-size at all, but only the display of the entire web page. <blockquote> px vs percentage? </blockquote> That's a long discussion. My take is that percentage would be the way to go then to make it scalable. <blockquote> line-height in px or relative fontsizes for body? (to accomodate min-fontsize Moz FF) </blockquote> Definitely a discussion for another day... :-) Ash, Absolutely. But while that's true, most designs out there are based on a preferred pixel size that will work best with the design. My take is that one should try to make the default font match that font size, but still be scalable (through em/percentage etc). Jeena, Well, I think that's the general problem: to try and combine a custom font size with the font size set in a web page. In my opinion, it shouldn't be done. But if someone has chosen a larger font size, it will be smaller than the one set through preferences, but still larger than the normal font size. So, in that respect, it's still dynamic, but it isn't an exact match for the setting. But if you want that, my take is that you should use the overriding option. Jermayn, I understand that. 10 pixels is just a simple example for demo and calculating purposes. Go with what suits you best. :-) And thanks, I'm glad it was useful to you! :-) Siegfrid, Thank you! Good input about IE. Johan,

why not add seperate font styles in pixels for IE WIN??

Answered twice above.

more specific: zoom feature IE7 and fontsize?

Doesn’t affect font-size at all, but only the display of the entire web page.

px vs percentage?

That’s a long discussion. My take is that percentage would be the way to go then to make it scalable.

line-height in px or relative fontsizes for body? (to accomodate min-fontsize Moz FF)

Definitely a discussion for another day… :-)

Ash,

Absolutely. But while that’s true, most designs out there are based on a preferred pixel size that will work best with the design. My take is that one should try to make the default font match that font size, but still be scalable (through em/percentage etc).

Jeena,

Well, I think that’s the general problem: to try and combine a custom font size with the font size set in a web page. In my opinion, it shouldn’t be done.

But if someone has chosen a larger font size, it will be smaller than the one set through preferences, but still larger than the normal font size. So, in that respect, it’s still dynamic, but it isn’t an exact match for the setting. But if you want that, my take is that you should use the overriding option.

Jermayn,

I understand that. 10 pixels is just a simple example for demo and calculating purposes. Go with what suits you best. :-)

And thanks, I’m glad it was useful to you! :-)

Siegfrid,

Thank you!
Good input about IE.

]]> By: Jeroen Mulder http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39159 Jeroen Mulder Wed, 28 Feb 2007 08:52:44 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39159 While I understand the problem and the reasoning this method might break (being the result not the same as the setting) the advantage of setting a new default font size in your browser, I ask you: what is the solution? The solution is <em>not</em> fixed font-sizes, because that does not solve the source of the problem mentioned above. In fact, I doubt it can be solved. Simply fact is that for most people the default font size is too large, meaning designers need to accommodate for that by setting the root's font size element to a fraction of it. After all, even now when people set their default font size to the actual default (usually 16px), we <em>still</em> don't get that. So, is the correct conclusion that the default font size is bound to break anything that tries to take the user's setting into account, while still providing decent font sizes? I probably don't understand the problem, but if I do, I would encourage the people that change their default font size to stop pretending they are important, because all it takes is to increase your non-standard default font size by 1.6 times. While I understand the problem and the reasoning this method might break (being the result not the same as the setting) the advantage of setting a new default font size in your browser, I ask you: what is the solution?

The solution is not fixed font-sizes, because that does not solve the source of the problem mentioned above. In fact, I doubt it can be solved. Simply fact is that for most people the default font size is too large, meaning designers need to accommodate for that by setting the root’s font size element to a fraction of it.

After all, even now when people set their default font size to the actual default (usually 16px), we still don’t get that. So, is the correct conclusion that the default font size is bound to break anything that tries to take the user’s setting into account, while still providing decent font sizes?

I probably don’t understand the problem, but if I do, I would encourage the people that change their default font size to stop pretending they are important, because all it takes is to increase your non-standard default font size by 1.6 times.

]]> By: Siegfried http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39156 Siegfried Wed, 28 Feb 2007 08:24:46 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39156 Indeed a very good article. I personally use font sizes in percent and base the various container sizes then on em. Now, the IE has <em>no bug</em> here. The IE behaviour here is simply close to the specification. So if a designer setz a font size to 12px, then this simply means 12px. What most designers do not know is that the physical dimensions of one pixel may vary largely across different media. But still, a size in pixels is a size in pixels. So if a web page designer wishes to fix a font size to some pixels this should not be ignored by any browser. I had a long discussion about that in the mozilla zine some time ago. What i learned there was, that this special Firefox feature to let the user ignore the page design by rezizing fonts regardless of their pixel size was put in because the vast majority of real world pages where designed so poorly. So to be precise, this "feature" is indeed a "bug" in Firefox, altough a bug which unfortunately is necessary to make poorly designed pages usable. The correct place to set the users preferences (f.ex. the preferred font size) is the preferences dialogue. Firefox has this and IE has this. This has exactly the efects Jeena Paradis already pointed out. And a well designed page always referes to these sizes. Font sizes in pixels are an exception and should, if at all, be used very very sparse. F.ex. i had for some time navigation buttons on my page. These had a grafical button as background images. So then the size of the button element was set exactly to the size of that grafik. The text on the button then had to fit into that box and that grafik. So for these navigation texts i fixed the font size to the appropriate number of pixels. The "font size bug" in Firefox made it possible to crash this layout. Lately i threw out those grafical buttons. Besides not adapting to very small screens (PDAs and the like) i wanted to avoid the layout beeing crashed by font resizing. Font size fixing in pixels may be necessary, but exceptional and rare. But since under very rare and special conditions this may be necessary resizing fonts may make those pages unusable. Tis Firefox "feature" is a quite dangerous one, altough i admit that it is necessary because of those many poorly designed web pages. But it is <em>no bug</em> that the IE does not have this "feature". Indeed a very good article. I personally use font sizes in percent and base the various container sizes then on em.
Now, the IE has no bug here. The IE behaviour here is simply close to the specification. So if a designer setz a font size to 12px, then this simply means 12px. What most designers do not know is that the physical dimensions of one pixel may vary largely across different media. But still, a size in pixels is a size in pixels. So if a web page designer wishes to fix a font size to some pixels this should not be ignored by any browser. I had a long discussion about that in the mozilla zine some time ago. What i learned there was, that this special Firefox feature to let the user ignore the page design by rezizing fonts regardless of their pixel size was put in because the vast majority of real world pages where designed so poorly. So to be precise, this “feature” is indeed a “bug” in Firefox, altough a bug which unfortunately is necessary to make poorly designed pages usable.

The correct place to set the users preferences (f.ex. the preferred font size) is the preferences dialogue. Firefox has this and IE has this. This has exactly the efects Jeena Paradis already pointed out. And a well designed page always referes to these sizes. Font sizes in pixels are an exception and should, if at all, be used very very sparse. F.ex. i had for some time navigation buttons on my page. These had a grafical button as background images. So then the size of the button element was set exactly to the size of that grafik. The text on the button then had to fit into that box and that grafik. So for these navigation texts i fixed the font size to the appropriate number of pixels. The “font size bug” in Firefox made it possible to crash this layout. Lately i threw out those grafical buttons. Besides not adapting to very small screens (PDAs and the like) i wanted to avoid the layout beeing crashed by font resizing.

Font size fixing in pixels may be necessary, but exceptional and rare. But since under very rare and special conditions this may be necessary resizing fonts may make those pages unusable. Tis Firefox “feature” is a quite dangerous one, altough i admit that it is necessary because of those many poorly designed web pages. But it is no bug that the IE does not have this “feature”.

]]> By: Jermayn Parker http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39109 Jermayn Parker Wed, 28 Feb 2007 03:19:45 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39109 Probably my only problem with this article is that size 10 is too small. I have average eyes and I find it too small. btw just for the record I usually use the same method as you, thanks for the article, always useful as a reference tool :) Probably my only problem with this article is that size 10 is too small. I have average eyes and I find it too small.

BTW just for the record I usually use the same method as you, thanks for the article, always useful as a reference tool :)

]]> By: Jeena Paradies http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39065 Jeena Paradies Tue, 27 Feb 2007 22:48:47 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39065 <blockquote>In my opinion, I don’t think I break it.</blockquote> I thik they do. Think of one who wants his "normal" font size not to be 16 but 20 pixel on every page. All other font sizes should scale with it. So his 1em is 20px big and that's what em is all about, to ensecure that all sizes scale with the users own personal 1em (eg. 20px). If all sites would ues em the "right" way, he would never have to change the font-size on a specific page becourse the "normal" font-size would always be his own 20px.

In my opinion, I don’t think I break it.

I thik they do. Think of one who wants his “normal” font size not to be 16 but 20 pixel on every page. All other font sizes should scale with it. So his 1em is 20px big and that’s what em is all about, to ensecure that all sizes scale with the users own personal 1em (eg. 20px).

If all sites would ues em the “right” way, he would never have to change the font-size on a specific page becourse the “normal” font-size would always be his own 20px.

]]> By: Article Feed » How to specify dynamic font sizes consistently with CSS http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39061 Article Feed » How to specify dynamic font sizes consistently with CSS Tue, 27 Feb 2007 22:04:30 +0000 http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/#comment-39061 [...] m, since most designs and wanted end results are based in pixels, … Original post by Robert Nyman and powered by Img Fly [...] [...] m, since most designs and wanted end results are based in pixels, … Original post by Robert Nyman and powered by Img Fly [...]

]]>