Font Sizes….

@joeysccFeb 21.2005

First…I didn’t know this forum existed until I did a search online for something. Glad to be here ?

Anyways…I see that font sizes are a very complicated issue when it comes to creating a standard for font sizing in websites… especially true if you have specific table sizes. Allowing a person to change the font appearance in any browser I think can result in extreme hell in your layouts.

My question is…What size method should a web designer adopt to maintain good design? I primarily use ‘px’ as my size standard, but noticed that many use ‘xx-small, x-small, small…etc). This is fine, but this becomes a nightmare for browser consistency.

I think I will make this a poll as well…

to post a comment

CSS

10 Comments(s) _↴

@FangFeb 21.2005 — #http://www.w3.org/QA/Tips/font-size

Relative!

btw % is also relative

@joeysccauthorFeb 21.2005 — #[B]

Relative!

btw % is also relative [/B][/QUOTE]

hehe...yes I realized that right after I clicked "Post" that I forgot to put Relative on that line.

@Robert_WellockFeb 22.2005 — #http://www.w3.org/QA/Tips/font-size
Avoid sizes in em smaller than 1em for text body, except maybe for copyright statements or other kinds of "fine print."[/quote]

What? An 1em doesn't really have a size in that sense.

If I set the body font to 7px 1 em would not be exactly what I would call easy to read. ?

@JonaFeb 22.2005 — #[font=trebuchet ms]Personally I like small fonts that are easy to read. For example, Verdana at "small" (or about 0.8em) is usually decent and easy to read (providing contrast is good). Depending on the design and content, though, sometimes a larger font is better (or necessary). I'm 100% for option #3, though! ? [/font]

@joeysccauthorFeb 22.2005 — #Seems like so far most here prefer the 'x-small, small...etc' sizing parameters...however, everyone is aware that they vary greatly in IE and netscape...not to mention firefox? Also remember too that if you have a very small table cell that fits a word very nicely at 12px, but if you make it "small" that your table cell and layout goes way out of wack.

I did a page up in many different sizing styles in a fixed and % table ...I was amazed at how much of a change there was comparing text size in 3 browsers when using the relative size method and how much it messed the table layout. The only two that were consistent was px and %

@JonaFeb 22.2005 — #[i]Originally posted by joeyscc [/i]

[B]Seems like so far most here prefer the 'x-small, small...etc' sizing parameters...however, everyone is aware that they vary greatly in IE and netscape...not to mention firefox? Also remember too that if you have a very small table cell that fits a word very nicely at 12px, but if you make it "small" that your table cell and layout goes way out of wack.

I did a page up in many different sizing styles in a fixed and % table ...I was amazed at how much of a change there was comparing text size in 3 browsers when using the relative size method and how much it messed the table layout. The only two that were consistent was px and % [/B][/QUOTE]

[font=trebuchet ms]I've never run into that problem, myself, in any browser... Small may be larger or smaller depending on the browser, but that doesn't screw up the layout. Besides, you have to remember that any font size unit you use can be changed by increasing or decreasing the default font size of your browser. The layout should work regardless of the font size.[/font]

@FantatierFeb 22.2005 — #for text i usualy use 0.7em anything bigger is too big for my liking...

@joeysccauthorFeb 22.2005 — #I primarily use px:

For small text: 10px (which 70% works fine as well);

For standard text: 12px (which 80% works as an equivelent);

My friend also does web design and he was telling me he uses Golive CS, but when he is in the Layout mode and applies CSS to his text, using px as sizing, it doesn't show until you preview the page he said but went on in saying that if he uses % or a couple others, it does show up in layout mode while some don't. Not sure why that is, but its a mystery to me. I use Dreamweaver and this phenomena of his doesn't have this effect in DW.

Anyways, its interesting to see what web designers use as their standard.

@JonaFeb 22.2005 — #[font=trebuchet ms]Pixels are a fixed-size unit - they'll be the same no matter what the resolution or browser size is. This can be used to your advantage for positioning and sizing block-level elements (to an extent; using EMs to create an elastic layout is the best way, but coming in second is fixed-width), but for fonts it's not my recommendation. Instead, let your users define their own font sizes, and build your layout so that it adjusts appropriately (or is compatible with any changes to font size). [url=http://www.alistapart.com/articles/relafont/]Relative font sizes[/url] are the best! ? [/font]

@joeysccauthorFeb 22.2005 — #Interesting article...[URL=http://www.alistapart.com/articles/relafont/]Relative font sizes[/URL]

I ended up playing with fonts...interesting world it is. I did a paragraphs in px, %, and keyword sizes with the font Verdana. Judging from viewing the results in Firefox, Netscape, and IE, I seen differences, but what I've come to the conclusion is (which the use of sizes and fonts are subject to individuals):

For text equivelents:

Small text: 10px -> 70% -> x-small

Standard text: 12px -> 80% -> small

Differences to take in account I discovered is the font being used as well. I found that for small text, using arial is very small, but if you use Verdana, it appears a bit larger and better to read at that size.

For Standard text (for typical word content), Arial is better at larger text sizes than Verdana because Verdana will appear much larger and kerns more (I hope I used that term right). Viewing these in the 3 browsers made for an interesting test and is how I based the equivelents above on.

Of course, as I mentioned, it really depends on the individual on what they use ?

Also in #CSS _↴

Major issue with non-IE browsers ruining stuff Overflow?IE kept render weird page while file validated against XHTML strict mode successfully

Success!

Help @joeyscc spread the word by sharing this article on Twitter...

Tweet This

Font Sizes….

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Font Sizes….

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴