[WSG] Font Size Re-sizing
G'day Mates,
I've reviewed articles on A List Apart and the WSG sites, as well as, The CSS
Anthology, but I
really would like a more defintive answer pertaining to the best method for
re-sizing text.
Therefore, I thought it prudent to turn to the experts!
The following is my current set of rules for allowing visitors to zoom text:
body
{margin: 0;
padding: 0;
font-size: 76%;
background: #6A6A8F;}
#container
{width: 100%;
font: normal 1em/14pt verdana, arial, sans-serif;
text-align: justify;
background: #fff;}
Any advice regarding this important design and accessible feature is greatly
appreciated!
Respectfully submitted,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Font Size Re-sizing
I know there are a lot of old school designers out there (and when I
say designer I mean those people who spend their hours in photoshop
and NOT doing the markup) who still insist that font-sizes be in point
size. That is simply not practical in the web-space (as, I'm sure you
know)...generally I ignore them and their silly point sizes. I find
the best method for font resizing is using the keyword syntax, i.e.
xx-small, x-small, small, large, etc
Generally I'd set the base font to x-small/small (depending on what
the design shows) and then use em's to inc them for headers and strong
tags, etc.
body {
font: x-small/130% Verdana, Arial, sans-serif;
color: #333;
}
h1 {
font-size: 2em;
}
h2 {
fon-size: 1.8em;
}
...
...
HTH
D
On 8/17/05, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
G'day Mates,
I've reviewed articles on A List Apart and the WSG sites, as well as, The CSS
Anthology, but I
really would like a more defintive answer pertaining to the best method for
re-sizing text.
Therefore, I thought it prudent to turn to the experts!
The following is my current set of rules for allowing visitors to zoom text:
body
{margin: 0;
padding: 0;
font-size: 76%;
background: #6A6A8F;}
#container
{width: 100%;
font: normal 1em/14pt verdana, arial, sans-serif;
text-align: justify;
background: #fff;}
Any advice regarding this important design and accessible feature is greatly
appreciated!
Respectfully submitted,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Font Size Re-sizing
We are in the middle of redesigning our company's website and after using pt
for so long ems have been challenging to get used to. I have declared body
{font-size: 1em;} and have adjusted from there (i.e. sidenav {font-size:
0.80em;}.Can you explain what the slash in your example is (body {font:
x-small/130% Veranda, Arial, san-serif;}).Is this a browser hack?
Thanks,
Janelle
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Darren Wood
Sent: Tuesday, August 16, 2005 1:55 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Font Size Re-sizing
I know there are a lot of old school designers out there (and when I say
designer I mean those people who spend their hours in photoshop and NOT
doing the markup) who still insist that font-sizes be in point size. That
is simply not practical in the web-space (as, I'm sure you know)...generally
I ignore them and their silly point sizes. I find the best method for font
resizing is using the keyword syntax, i.e.
xx-small, x-small, small, large, etc
Generally I'd set the base font to x-small/small (depending on what the
design shows) and then use em's to inc them for headers and strong tags,
etc.
body {
font: x-small/130% Verdana, Arial, sans-serif;
color: #333;
}
h1 {
font-size: 2em;
}
h2 {
fon-size: 1.8em;
}
...
...
HTH
D
On 8/17/05, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
G'day Mates,
I've reviewed articles on A List Apart and the WSG sites, as well as,
The CSS Anthology, but I really would like a more defintive answer
pertaining to the best method for re-sizing text.
Therefore, I thought it prudent to turn to the experts!
The following is my current set of rules for allowing visitors to zoom
text:
body
{margin: 0;
padding: 0;
font-size: 76%;
background: #6A6A8F;}
#container
{width: 100%;
font: normal 1em/14pt verdana, arial, sans-serif;
text-align: justify;
background: #fff;}
Any advice regarding this important design and accessible feature is
greatly appreciated!
Respectfully submitted,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Font Size Re-sizing
Janelle Clemens wrote:
Can you explain what the slash in your example is (body {font:
x-small/130% Veranda, Arial, san-serif;}).Is this a browser hack?
130% in this case is the line height. it's short hand for:
body {
font-family: verdana, sans-serif;
font-size: x-small;
line-height: 130%;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Font Size Re-sizing
Hi Janelle
This is CSS shorthand, it is the same as font-size:x-small;
line-height:130%; font-family...;}
Personally, I like to write out the long format while testing my pages. I
just seem to have less bugs when I don't shorten the body font styles.
Ted
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Janelle Clemens
Sent: Tuesday, August 16, 2005 2:15 PM
To: 'wsg@webstandardsgroup.org'
Subject: RE: [WSG] Font Size Re-sizing
We are in the middle of redesigning our company's website and after using pt
for so long ems have been challenging to get used to. I have declared body
{font-size: 1em;} and have adjusted from there (i.e. sidenav {font-size:
0.80em;}.Can you explain what the slash in your example is (body {font:
x-small/130% Veranda, Arial, san-serif;}).Is this a browser hack?
Thanks,
Janelle
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Darren Wood
Sent: Tuesday, August 16, 2005 1:55 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Font Size Re-sizing
I know there are a lot of old school designers out there (and when I say
designer I mean those people who spend their hours in photoshop and NOT
doing the markup) who still insist that font-sizes be in point size. That
is simply not practical in the web-space (as, I'm sure you know)...generally
I ignore them and their silly point sizes. I find the best method for font
resizing is using the keyword syntax, i.e.
xx-small, x-small, small, large, etc
Generally I'd set the base font to x-small/small (depending on what the
design shows) and then use em's to inc them for headers and strong tags,
etc.
body {
font: x-small/130% Verdana, Arial, sans-serif;
color: #333;
}
h1 {
font-size: 2em;
}
h2 {
fon-size: 1.8em;
}
...
...
HTH
D
On 8/17/05, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
G'day Mates,
I've reviewed articles on A List Apart and the WSG sites, as well as,
The CSS Anthology, but I really would like a more defintive answer
pertaining to the best method for re-sizing text.
Therefore, I thought it prudent to turn to the experts!
The following is my current set of rules for allowing visitors to zoom
text:
body
{margin: 0;
padding: 0;
font-size: 76%;
background: #6A6A8F;}
#container
{width: 100%;
font: normal 1em/14pt verdana, arial, sans-serif;
text-align: justify;
background: #fff;}
Any advice regarding this important design and accessible feature is
greatly appreciated!
Respectfully submitted,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Font Size Re-sizing
Hi Janelle,
The slash in my example separates font-size from line-height.
Regards,
Mario
We are in the middle of redesigning our company's website and after using pt
for so long ems
have been challenging to get used to. I have declared body {font-size:
1em;} and have adjusted
from there (i.e. sidenav {font-size: 0.80em;}.Can you explain what the
slash in your example
is (body {font: x-small/130% Veranda, Arial, san-serif;}).Is this a
browser hack?
Thanks,
Janelle
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Darren
Wood
Sent: Tuesday, August 16, 2005 1:55 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Font Size Re-sizing
I know there are a lot of old school designers out there (and when I say
designer I mean those
people who spend their hours in photoshop and NOT doing the markup) who still
insist that
font-sizes be in point size. That is simply not practical in the web-space
(as, I'm sure you
know)...generally I ignore them and their silly point sizes. I find the best
method for font
resizing is using the keyword syntax, i.e.
xx-small, x-small, small, large, etc
Generally I'd set the base font to x-small/small (depending on what the
design shows) and then
use em's to inc them for headers and strong tags, etc.
body {
font: x-small/130% Verdana, Arial, sans-serif;
color: #333;
}
h1 {
font-size: 2em;
}
h2 {
fon-size: 1.8em;
}
...
...
HTH
D
On 8/17/05, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
G'day Mates,
I've reviewed articles on A List Apart and the WSG sites, as well as, The
CSS Anthology, but
I really would like a more defintive answer
pertaining to the best method for re-sizing text.
Therefore, I thought it prudent to turn to the experts!
The following is my current set of rules for allowing visitors to zoom
text:
body
{margin: 0;
padding: 0;
font-size: 76%;
background: #6A6A8F;}
#container
{width: 100%;
font: normal 1em/14pt verdana, arial, sans-serif;
text-align: justify;
background: #fff;}
Any advice regarding this important design and accessible feature is
greatly appreciated!
Respectfully submitted,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Font Size Re-sizing
Ahhh, thank you. Does it always have to have the slash or can you use a
space? All other css short cuts seem to use a space, is the
size/line-height short cut special?
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Brian Cummiskey
Sent: Tuesday, August 16, 2005 2:25 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Font Size Re-sizing
Janelle Clemens wrote:
Can you explain what the slash in your example is (body {font:
x-small/130% Veranda, Arial, san-serif;}).Is this a browser hack?
130% in this case is the line height. it's short hand for:
body {
font-family: verdana, sans-serif;
font-size: x-small;
line-height: 130%;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Font Size Re-sizing
Oh, another quick question. Is it better to use % for line-height versus
pixel?Like I said I am used to using set sizes (pt px) for everything.
This css is such a learning/breaking bad habits adventure.
:-)
Janelle
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Brian Cummiskey
Sent: Tuesday, August 16, 2005 2:25 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Font Size Re-sizing
Janelle Clemens wrote:
Can you explain what the slash in your example is (body {font:
x-small/130% Veranda, Arial, san-serif;}).Is this a browser hack?
130% in this case is the line height. it's short hand for:
body {
font-family: verdana, sans-serif;
font-size: x-small;
line-height: 130%;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Font Size Re-sizing
Mario,
/* use percentile on html to prevent IE from seemingly using a logrimthic increase and decrease
in font size when scaling (IE
Bug) and use 100.1% to prevent a bug in Opera, and then set your font
sizes in em's after that. Declare Body and Table Font size together to
compensate for an IE bug of Table not in heriting font info (I think) */
html {font-size:100.1%;}
body, table {font-size:1em;}
A little bit of light reading:
http://css-discuss.incutio.com/?page=BrowserBugs
http://www.communitymx.com/content/article.cfm?cid=FAF76print=true-- __Bugs are, by definition, necessary.
Just ask Microsoft!www.co.sauk.wi.us (Work)www.arionshome.com (Personal)www.freexenon.com
(Consulting)__Take Back the Web with Mozilla Fire Fox http://www.mozilla.org/products/firefox/Making a Commercial Case for Adopting Web Standards
http://www.maccaws.org/Web Standards Projecthttp://www.webstandards.org/Web Standards Group
http://www.webstandardsgroup.org/Guild of Accessible Web Designershttp://www.gawds.org/
Re: [WSG] Font Size Re-sizing
[EMAIL PROTECTED] wrote:
The following is my current set of rules for allowing visitors to zoom text:
body
{margin: 0;
padding: 0;
font-size: 76%;
background: #6A6A8F;}
#container
{width: 100%;
font: normal 1em/14pt verdana, arial, sans-serif;
text-align: justify;
background: #fff;}
Any advice regarding this important design and accessible feature is greatly
appreciated!Respectfully submitted,Mario S. Cisneros
As long as it will zoom up to 200% without breaking the layout or
overlapping itself (and not be unreadable when zoomed down) there are
may relative sizing methods that will work for you .
Typographers rarely, if ever, justify unserifed fonts with Linotype; and
for similar reasons(rivers and lakes) neither serif *nor* unserifed
fonts work well on the Web.
Some of us over the age of 40 prefer a setting something like this:
body, html {margin: 0; padding: 0; }
body { background-color: #6A6A8F; color: #000; font: 100.01%/1.3 geneva,
verdana, arial, sans-serif; }
#container { background-color: #fff; color: #000; text-align: left;
width: 100%; }
pDifferent stroke for different folks./p
Regards,
David Laakso
--
David Laakso
http://www.dlaakso.com/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Font Size Re-sizing
Janelle Clemens wrote: Oh, another quick question. Is it better to use % for line-height versus pixel?Like I said I am used to using set sizes (pt px) for everything. This css is such a learning/breaking bad habits adventure. Actually the best answer should be neither, but due to Gecko bug https://bugzilla.mozilla.org/show_bug.cgi?id=196270 , there is not always a clearly best answer. For line-height, pt px are among the clearly worst answers. Read here for what should be the best answer: http://members.ij.net/mrmazda/auth/line-height.html -- Who of you by worrying can add a single hour to his life? Matthew 6:27 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://members.ij.net/mrmazda/auth/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
