Re: [WSG] Re: px em pt ???
Hi Miles, Owen Briggs of 'The Noodle Incident' has a very good article on CSS Typography. He has developed a sample style sheet that covers all the base elements using %'s and ems. check it out at: http://www.thenoodleincident.com/tutorials/typography/index.html Cheers Gino Miles Tillinger wrote: Peter, I know its a bit of a cop-out and less of a 'learning experience', but I'd love to get my hands on a generic CSS template that I can use as a starting point... Has anyone been nice enough to make one available anywhere? * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Re: px em pt ???
I definitely agree that relative sized fonts provide a more accessible design but I wonder about how sight-impaired users themselves use the web and their PC's in general? For instance, my grandfather has coke-bottle-thickness glasses and as such uses a 19 monitor in 800x600 resolution, which seems ridiculous to me with my 20/20 vision. However for him it is perfect and when he reads websites he doesn't have to adjust the font size because it is already fine for him based on the fact that his interface is already configured to be large in all respects. I doubt there would be site-impaired users who use 1280x1024 resolution for Windows and just increase the font-size in their browser. In fact I would guess that they would, like my grandfather, already have their interface appearance tweaked the way thay want and therefore their browser would inherit the same appearance. Just my $0.02... Miles. -Original Message- From: Cameron Adams [mailto:[EMAIL PROTECTED] Sent: Wednesday, December 10, 2003 1:49 PM To: [EMAIL PROTECTED] Subject: [WSG] Re: px em pt ??? That article gives the worst advice I've seen. Basically, they're saying that if someone wants to resize the text on your web page, you shouldn't allow them to because it will break your site, making it illegible. If a user wants to resize the text on your site, it is because it is illegible to them in the first place; increasing font size can only improve matters. Better that it breaks your design and they're able to see the content, rather than them not being able to see it at all. By using px units, you lock many users into exactly the font size specified (some browsers can resize px, but not IE). Using a relative unit, such as em or % (I use em), allows users to resize text so they can ACTUALLY SEE IT. If you ask any reasonably usability-oriented designer they will tell you to use relative units (www.stopdesign.com | www.zeldman.com), and to code your web page structure to allow for variable text sizes. Hope this helps (and it didn't seem like I was yelling at you), -- Cameron Adams W: www.themaninblue.com In reply to: (aayyy, my third post today?) I'd like to see what all of yours opinion is on what to use for sizes, I have always been a believer to stick to pixels, because that is the only size that to me sounds as something that is not platform/OS bound. Anyway, I also found the following article to back this up, who wants to break it down? Using CSS (cascading style sheets) makes it easy to specify font sizes, but before you set a font size you should be aware that it could change the layout of your site considerably. Different browsers interpret font sizes differently, so a font that appears readable in Microsoft Internet Explorer may be smaller when viewed in Netscape. In addition, font sizes on Windows systems are not always the same as they are on other platforms. Your site may look great to Windows users, but it may be illegible to those using a Mac. There is much controversy in relationship to font-size specifications. Our advice is the same as the majority of long-time designers. When you specify a font size, specify it in pixels (px) not points (pt) or em. Using a pt or em font-size property instead of px allows for your site text to be resized according to the viewer's system settings. If their system is set to view very large text, your web site's layout will become distorted and your web site may be illegible to them. Also, be very careful not to set your font-size pixels too small. Some folks may not be able to read tiny text and adjusting their system text size will have no effect on your site because your font-size is specified as px. There truly is a happy medium in any situation and the font-size (ie. 12px) will vary depending on the font-family (ie. Arial, Times New Roman, etc.) you use. __ Do you Yahoo!? New Yahoo! Photos - easier uploading and sharing. http://photos.yahoo.com/ * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Re: px em pt ???
touché Mark ;) It is a problem that Windows buries its accessibility options so deep. I think it would be better that he could walk into a net cafe and be able to easily changes the OS font-size. However since this isn't the case, the ability to change it in the browser IS the next best thing... Personally I am not going to use anything but relative font sizes in future site design, however I think it can be a steep learning curve for an amateur web designer when pixel sizes seem to be consistent in all browsers and so much simpler to use. -Original Message- From: Mark Stanton [mailto:[EMAIL PROTECTED] Sent: Wednesday, December 10, 2003 2:19 PM To: [EMAIL PROTECTED] Subject: RE: [WSG] Re: px em pt ??? I get your point Miles - but why should your grandfather NOT be able to walk into an internet cafe and use the 15 monitor at 1024x768 with IE 5 on it? Accessibility means removing as many obstacles as possible. Cheers Mark -- Mark Stanton Technical Director Gruden Pty Ltd Tel: 9956 6388 Mob: 0410 458 201 Fax: 9956 8433 http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Re: px em pt ???
Sorry for the length of this...
1. All government sites are supposed to follow WAI guideline - which
recommend the use of relative font sizes.
2. The aim is to give users the option. Saying that users can change their
screen resolution is throwing the responsibility back onto them - it is our
job to make it as easy as possible for all users to see our content.
3. There are many different users out there with a wide variety of vision
impairments from mildly reduced eyesight to totally blind. Each of these
groups has specific needs and we have to keep them all in mind.
We have done extensive testing with a wide range of these groups. I really
recommend all web designers and developers sit with both blind and near
blind users and watch them use your sites. It changes your perspective on
accessiblity.
One quick example to do with pixels: people with severe eye problems (close
to blind) would probably be using assistive technologies such as Zoom Text-
software based screen enlargers that can increase parts of the screen up to
400-600%. Pixel based fonts become a real issue for these people as there
are often not enough pixels to render a font properly. I sat with a woman
testing one of my sites were a footer was set to 12px and saw that the text
was unreadable for her. Fonts in nearby areas of the page that were
relatively positioned were able to be read easily.
4. Relative font sizing is very easy to manage as long as you understand two
things:
1. The document tree
2. inheritance
Relative font sizes will be inherited by items lower down the tree. EG.
Nested lists set with 80% will inherit and be reduced to 80% x 80% = 64%.
To solve this problem, place your relative font declarations at one level of
the document tree or pay attention to how they can cascade and affect your
content. It is easy to reverse the effect with rules like:
ul ul { font-size: 100%;}
Russ
thats a good one...
It makes sense what you are saying, to me anyway.
-Original Message-
From: Miles Tillinger [mailto:[EMAIL PROTECTED]
Sent: Wednesday, 10 December 2003 1:42 PM
To: [EMAIL PROTECTED]
Subject: RE: [WSG] Re: px em pt ???
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Re: px em pt ???
Makes sense too..
I guess in the end it all becomes a case of - is the client willing to pay for your
extra time required to apply all these hacks.
Having worked for several government bodies I am afraid to say I have NEVER worked
with %, simply because it looked like a paint to work with. And the only downfall I
see in using pixels is due to the fact IE (some versions) can't scale it.
(the only sites I developed for the gorvernment were Intranet, so don't come down to
hard on me ;-)
I'll give it a go though at some stage.
-Original Message-
From: russ weakley [mailto:[EMAIL PROTECTED]
Sent: Wednesday, 10 December 2003 2:19 PM
To: Web Standards Group
Subject: Re: [WSG] Re: px em pt ???
Sorry for the length of this...
1. All government sites are supposed to follow WAI guideline - which
recommend the use of relative font sizes.
2. The aim is to give users the option. Saying that users can change their
screen resolution is throwing the responsibility back onto them - it is our
job to make it as easy as possible for all users to see our content.
3. There are many different users out there with a wide variety of vision
impairments from mildly reduced eyesight to totally blind. Each of these
groups has specific needs and we have to keep them all in mind.
We have done extensive testing with a wide range of these groups. I really
recommend all web designers and developers sit with both blind and near
blind users and watch them use your sites. It changes your perspective on
accessiblity.
One quick example to do with pixels: people with severe eye problems (close
to blind) would probably be using assistive technologies such as Zoom Text-
software based screen enlargers that can increase parts of the screen up to
400-600%. Pixel based fonts become a real issue for these people as there
are often not enough pixels to render a font properly. I sat with a woman
testing one of my sites were a footer was set to 12px and saw that the text
was unreadable for her. Fonts in nearby areas of the page that were
relatively positioned were able to be read easily.
4. Relative font sizing is very easy to manage as long as you understand two
things:
1. The document tree
2. inheritance
Relative font sizes will be inherited by items lower down the tree. EG.
Nested lists set with 80% will inherit and be reduced to 80% x 80% = 64%.
To solve this problem, place your relative font declarations at one level of
the document tree or pay attention to how they can cascade and affect your
content. It is easy to reverse the effect with rules like:
ul ul { font-size: 100%;}
Russ
thats a good one...
It makes sense what you are saying, to me anyway.
-Original Message-
From: Miles Tillinger [mailto:[EMAIL PROTECTED]
Sent: Wednesday, 10 December 2003 1:42 PM
To: [EMAIL PROTECTED]
Subject: RE: [WSG] Re: px em pt ???
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Re: px em pt ???
Hi Taco, I guess in the end it all becomes a case of - is the client willing to pay for your extra time required to apply all these hacks. First thing to note is that it is soo much quicker to develop a site this way once you get the basics right. Once you have the basics, you start the next new site with a template based on these basics and you can churn out sites in half the time you used to. Secondly, these (relative fonts) are definitely NOT hacks. Using a table to lay out non-tabular content is a hack. Exploiting a bug in a browser (like the voice family hack mentioned a few days ago) is a hack (and this one should be considered dangerous.. At least fully explore the pros and cons before using it). Having worked for several government bodies I am afraid to say I have NEVER worked with %, simply because it looked like a paint to work with. And the only downfall I see in using pixels is due to the fact IE (some versions) can't scale it. (the only sites I developed for the gorvernment were Intranet, so don't come down to hard on me ;-) A behaviour in IE is the most important one to worry about as it has a 93% market share (like it or not, and I'm not saying it's better than any other browser, it's just reality). I suggest you look at the user_agents hitting your site(s) at some stage. If you don't have access to analyse your log files, then a generic breakdown is a good second bet. See lists like: http://www.thecounter.com/stats/2003/November/browser.php Also FWIW (a good generic audience) take a look at the AM Online stats breakdown of browsers and platforms for November 2003 http://www.amonline.net.au/website/reports/amonline/0311/index_08_b.htm Regards, Peter * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Re: px em pt ???
Taco,
If you code well, relative font sizes do not require a great deal to apply
across a site. You are simply making decisions on font-sizes as you develop
each section of the page - exactly as you would for pixels. There is really
very little excuse not to use one of the methods below.
Method 1 - environmental coding:
If you are building a full CSS site the first thing to do is to break your
page into divs and then styling each div using descendant selectors where
possible - this means there is little class and id clutter on the page. This
also means you can set relative font sizes for any element at any level of
the page - without running into inheritance problems. Mark Newhouse calls
this environmental coding - coding each div or environment as a unit.
An example would be:
#navigation {}
#navigation h1 {}
#navigation p {}
#navigation ul {}
#navigation a {}
#navigation li a {}
As you can see, they are all designed to target very specific instances of
type elements within one environment.
Method 2. the body
Another way (which can be used in conjunction with the first method) is to
simply set the relative size on the body and use that as a base - keeping in
mind that certain browsers need minor adjustments (may not inherit inside
tables etc). As long as you are aware of the few small bugs, this is a safe
option and runs into very little inheritance issues.
Method 3 - type selectors
Peter and I used to use this method a lot, but have moved on to the first
two methods. If you set relative font sizing on actual HTML elements you can
run into inheritance problems discussed in previous email and may need a few
small work-arounds (or hacks).
Method 4 - leave it up to the user!
There are many developers who believe that we should not be touching font
sizes at all - by reducing any font size we are taking the control away from
the user.
No excuses any more!
: )
Russ
Makes sense too..
I guess in the end it all becomes a case of - is the client willing to pay for
your extra time required to apply all these hacks.
Having worked for several government bodies I am afraid to say I have NEVER
worked with %, simply because it looked like a paint to work with. And the
only downfall I see in using pixels is due to the fact IE (some versions)
can't scale it.
(the only sites I developed for the gorvernment were Intranet, so don't come
down to hard on me ;-)
I'll give it a go though at some stage.
-Original Message-
From: russ weakley [mailto:[EMAIL PROTECTED]
Sent: Wednesday, 10 December 2003 2:19 PM
To: Web Standards Group
Subject: Re: [WSG] Re: px em pt ???
Sorry for the length of this...
1. All government sites are supposed to follow WAI guideline - which
recommend the use of relative font sizes.
2. The aim is to give users the option. Saying that users can change their
screen resolution is throwing the responsibility back onto them - it is our
job to make it as easy as possible for all users to see our content.
3. There are many different users out there with a wide variety of vision
impairments from mildly reduced eyesight to totally blind. Each of these
groups has specific needs and we have to keep them all in mind.
We have done extensive testing with a wide range of these groups. I really
recommend all web designers and developers sit with both blind and near
blind users and watch them use your sites. It changes your perspective on
accessiblity.
One quick example to do with pixels: people with severe eye problems (close
to blind) would probably be using assistive technologies such as Zoom Text-
software based screen enlargers that can increase parts of the screen up to
400-600%. Pixel based fonts become a real issue for these people as there
are often not enough pixels to render a font properly. I sat with a woman
testing one of my sites were a footer was set to 12px and saw that the text
was unreadable for her. Fonts in nearby areas of the page that were
relatively positioned were able to be read easily.
4. Relative font sizing is very easy to manage as long as you understand two
things:
1. The document tree
2. inheritance
Relative font sizes will be inherited by items lower down the tree. EG.
Nested lists set with 80% will inherit and be reduced to 80% x 80% = 64%.
To solve this problem, place your relative font declarations at one level of
the document tree or pay attention to how they can cascade and affect your
content. It is easy to reverse the effect with rules like:
ul ul { font-size: 100%;}
Russ
thats a good one...
It makes sense what you are saying, to me anyway.
-Original Message-
From: Miles Tillinger [mailto:[EMAIL PROTECTED]
Sent: Wednesday, 10 December 2003 1:42 PM
To: [EMAIL PROTECTED]
Subject: RE: [WSG] Re: px em pt ???
*
The discussion list for http://webstandardsgroup.org
Re: [WSG] Re: px em pt ???
http://westciv.com/style_master/academy/browser_support/selectors.html
Try this - keep in mind you can hide content from NN4 if needed using
@import
Russ
Any links to information about descendant selectors and backwards
compatibility? In particular Netscape 4...
-Original Message-
From: russ weakley [mailto:[EMAIL PROTECTED]
Sent: Wednesday, December 10, 2003 3:41 PM
To: Web Standards Group
Subject: Re: [WSG] Re: px em pt ???
Taco,
If you code well, relative font sizes do not require a great deal to apply
across a site. You are simply making decisions on font-sizes as you develop
each section of the page - exactly as you would for pixels. There is really
very little excuse not to use one of the methods below.
Method 1 - environmental coding:
If you are building a full CSS site the first thing to do is to break your
page into divs and then styling each div using descendant selectors where
possible - this means there is little class and id clutter on the page. This
also means you can set relative font sizes for any element at any level of
the page - without running into inheritance problems. Mark Newhouse calls
this environmental coding - coding each div or environment as a unit.
An example would be:
#navigation {}
#navigation h1 {}
#navigation p {}
#navigation ul {}
#navigation a {}
#navigation li a {}
As you can see, they are all designed to target very specific instances of
type elements within one environment.
Method 2. the body
Another way (which can be used in conjunction with the first method) is to
simply set the relative size on the body and use that as a base - keeping in
mind that certain browsers need minor adjustments (may not inherit inside
tables etc). As long as you are aware of the few small bugs, this is a safe
option and runs into very little inheritance issues.
Method 3 - type selectors
Peter and I used to use this method a lot, but have moved on to the first
two methods. If you set relative font sizing on actual HTML elements you can
run into inheritance problems discussed in previous email and may need a few
small work-arounds (or hacks).
Method 4 - leave it up to the user!
There are many developers who believe that we should not be touching font
sizes at all - by reducing any font size we are taking the control away from
the user.
No excuses any more!
: )
Russ
Makes sense too..
I guess in the end it all becomes a case of - is the client willing to pay
for
your extra time required to apply all these hacks.
Having worked for several government bodies I am afraid to say I have NEVER
worked with %, simply because it looked like a paint to work with. And the
only downfall I see in using pixels is due to the fact IE (some versions)
can't scale it.
(the only sites I developed for the gorvernment were Intranet, so don't come
down to hard on me ;-)
I'll give it a go though at some stage.
-Original Message-
From: russ weakley [mailto:[EMAIL PROTECTED]
Sent: Wednesday, 10 December 2003 2:19 PM
To: Web Standards Group
Subject: Re: [WSG] Re: px em pt ???
Sorry for the length of this...
1. All government sites are supposed to follow WAI guideline - which
recommend the use of relative font sizes.
2. The aim is to give users the option. Saying that users can change their
screen resolution is throwing the responsibility back onto them - it is our
job to make it as easy as possible for all users to see our content.
3. There are many different users out there with a wide variety of vision
impairments from mildly reduced eyesight to totally blind. Each of these
groups has specific needs and we have to keep them all in mind.
We have done extensive testing with a wide range of these groups. I really
recommend all web designers and developers sit with both blind and near
blind users and watch them use your sites. It changes your perspective on
accessiblity.
*
The discussion list for http://webstandardsgroup.org/
*
