Re: [css-d] Site Check, Please; Some Questions
-3-
Font-sizing: Hardest to leave behind are my pixel-based fonts. :\ There
is a large difference between IE and Firefox, which I've slapped a
band-aid on for now... that Opera isn't happy with.
I've read about many people's preferences on this, but could use a lot
more. Opinions on the best way to make them relatively the same
cross-browser?
One thing immediately stands out: you are declaring a font-size of 85% on
the body. As the standard browser font size is 16 pixels, and 85% of 16 is
13.6, you're starting from a baseline of 13.6 pixels. As you can't have
fractions of a pixel, you're pretty much bound to run into rounding errors
and so forth later on.
If you want to use a base font size of 14 pixels, which is nearest to what
you have currently, then use a font size of 87.5%. (Alternatively, if you
were going for 13 pixels, use 81.25%.)
I personally find it useful to specify a font size of 62.5% on the body,
giving me a default size for 1em of 10 pixels. If I then want a heading at
14 pixels, I can specify 1.4em.
One thing to bear in mind is that, if you specify things like padding and
margins in ems (to make the page scale correctly when the user increases
their font size), the em-size is that of the element to which said spacing
is applied. So, if you have:
body {
font-size: 62.5%; /* makes 1em = 10px */
}
h1 {
font-size: 1.4em; /* sets h1 to 14px */
margin: 1em;
}
then the h1 will have margins of 14 pixels, not 10. Personally, I find
having the 10px base size so useful in specifying the structure of the
page that I don't mind reaching for the calculator occasionally when
dealing with that kind of case, but YMMV :-)
HTH,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check, Please; Some Questions
L. Robinson wrote:
Converting legacy site to tableless layout and there are some advanced
(and not-so-advanced) cross-browser tricks eluding me. Having searched,
I'd be most grateful if someone can hit me with a clue stick on a few of
these.
Site here: http://beta.consupro.net/default_new.asp
CSS here: http://beta.consupro.net/site-styles/screen-switcher-default.css
[...]
-3-
Font-sizing:...
I've read about many people's preferences on this, but could use a lot
more. Opinions on the best way to make them relatively the same
cross-browser?
I think you hit target when you wrote 'opinions' regarding font-sizing.
The purpose of typography, on and off the Web, is very simple: make the
written readable.
I would suggest this as one way one /might/ do that on your site:
html,body {
/*font: 85%/1.5em arial, helvetica, verdana, tahoma, sans-serif;*/
font-family: arial, helvetica, verdana, tahoma, sans-serif;
line-height: 1.5;
}
/*htmlbody { font-size: 76%; }*/
And reduce the font-size on h2, the h-nav.
aside: there seems to be an e-mail protocol error on your end?
Best,
~dL
--
David Laakso
http://www.dlaakso.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check, Please; Some Questions
Nick Fitzsimons wrote: One thing immediately stands out: you are declaring a font-size of 85% on the body. As the standard browser font size is 16 pixels, and 85% of 16 is 13.6, you're starting from a baseline of 13.6 pixels. As you can't have fractions of a pixel, you're pretty much bound to run into rounding errors and so forth later on. Actually it won't be later on that it happens. Browsers round differently, and even 13.6 returns different sizes depending on browser: http://members.ij.net/mrmazda/auth/Font/font-rounding.html Tested in the customary WinXP 96 DPI @ 1024x768: IE6 - 85% is same as 14px, but 13.6px is same as 13px Gecko 1.8 - both 13.6px and 85% same as 14px, larger than 13px. Opera 8.51 - both 13.6px and 85% same as 13px, smaller than 14px. Konqueror 3.4.2 (Mandriva Linux 2006) - both 13.6px and 85% same as 13px, smaller than 14px. -- I can do all things through Him who gives me strength. Philippians 4:13 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check, Please; Some Questions
Nick Fitzsimons wrote: I personally find it useful to specify a font size of 62.5% on the body, giving me a default size for 1em of 10 pixels. If I then want a heading at 14 pixels, I can specify 1.4em. Yes, it's a simple calculation - although not too precise across browser-land. However, keep in mind that the 62.5% base may result in very, very, large fonts if a user apply 'min-font-size'[1] in their browser. No one set 'min-font-size' to as low a value as 10px (if they set it at all). For example: I use 'min-font-size' of 14px in all browsers that support it. The result in Opera and Firefox will be 1.4em based on root:14px, and that's a pretty readable size. Make sure layouts don't break under the stress, and people like me, with less than perfect eye-sight, will be quite happy with it. So, test with ordinary browser-options before releasing layouts that rely on such calculations, as nothing is set in stone across the web. I always test with 'min-font-size' at 28px, just to make sure... regards Georg [1]http://www.gunlaug.no/contents/wd_1_03_04.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check, Please; Some Questions
Gunlaug Sørtun wrote: However, keep in mind that the 62.5% base may result in very, very, large fonts if a user apply 'min-font-size'[1] in their browser. Min-font-size isn't the only way for that to happen. User stylesheets can do the same thing: http://members.ij.net/mrmazda/css/share/userContent.alt -- I can do all things through Him who gives me strength. Philippians 4:13 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
