OutFront Forums
     Home    Register     Search      Help      Login    

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

 

Another reason why you should use EM or Percentages

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Another reason why you should use EM or Percentages
Page: [1]
 
 
gorilla

 

Posts: 2974
From: Denmark
Status: offline

 
Another reason why you should use EM or Percentages - 11/14/2003 18:58:32   
Regular visitors to this forum will know that I advocate the use of font relative metrics i.e. EM or percentages (the two are mostly effectively the same) when specifying text sizes.

Apart from all the other good reasons :-) There is another one. Particularly if you are in "the western world" a growing proportion of your visitors are likely to suffer from LOD (late onset diabetes.)

With diabetes eyesight varies dramatically depending on blood glucose levels...sometimes a diabetic will need massive text, sometimes they have "normal" eyesight.

Also of course we "baby boomers" are not getting any younger and our eyesight is deteriorating - so "normal eyesight" may not necessarily be 20/20 vision.

If you you use relative values wherever possible. For example:

font-size:100%;

or

font-size:2em;

You cater for how your visitors prefer to see your site.

Caveats and notes:

Make sure you test your design in several browser when using “em” relative units, check it a different text size settings also - ie see what it will look like if someone is using their browser set to small fonts.

Handy rules of thumb:



  • 'Em's are good, but to get the best out them combine them with a '%' font-size on the body element.

  • Avoid 'px's where possible , but where you have stretches of text that need to be aligned with graphics they can be ideal.

  • pt's should be avoided like the plague except in pages intended for printing.


I have made a related posting here:

http://www.frontpagewebmaster.com/m-167161/tm.htm

< Message edited by gorilla -- 11/14/2003 8:29:37 PM >


_____________________________

Mháircaish

Signature self-censored to protect the sensibilities of the thin-skinned :).

May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower


ajdevies

 

Posts: 117
Joined: 6/19/2002
From: Holly Hill, FL
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/3/2003 13:13:53   
Another regrettable consequence of LOD is macular degeneration, where central vision deteriorates, leaving only peripheral vision. Reading anything becomes an extreme difficulty. The more we, as web designers/programmers, can do to help these unfortunate people, the better we become as designers and as human beings (add better gorillas to that, too.)

I can no longer spend hours upon hours in front of a computer screen like I did when programming in the 19xx's. I have incipient cataracts already. I also don't have arms long enough to read the newspaper although I wear trifocals. And the print on the prescription bottles always seems blurry for some reason.

My pet peeve is a website with pt or px fonts that can't be changed by adjusting my browser settings or using my own style sheet (browsers let you designate your own previously coded style sheet, in case you didn't know.) If I can't adjust the font size on a website, I vote with my feet - actually fingers in this case. Anyway, I move on to a similar site where I can change fonts and/or colors.

All of this goes hand-in-hand with accessibility.

_____________________________

AJ

(in reply to gorilla)
davids

 

Posts: 211
Joined: 1/26/2003
From: Belgium (American)
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/3/2003 15:37:24   
Hmm...thanks to both of you for this. It's really food for thought. I need to break some old habits, but once I do a site or two this way, I guess I'll find it just as easy. I wish that people who visit sites would understand how to take advantage of these possibilities as well, but I suspect that most don't.

_____________________________

Davids
International Relocation Technology

(in reply to ajdevies)
Peppergal

 

Posts: 2207
Joined: 9/20/2002
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/3/2003 16:59:19   
You could put a link on there, something like "View this page differently" and then take it to a very "friendly" page explaining what their options are and how to change the settings on their browser to make the page easier to see....

It needs more clever wording than "View this page differently" but you get the idea.

_____________________________

Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog

(in reply to davids)
tinaalice

 

Posts: 98
From: Stockport, Cheshire. UK
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/3/2003 18:42:34   
That's all very well .. but I can't understand ems and percentages ...

I can't relate it to 10 or 12 points that being the size (12) I'm comformatble reading .. I don't know what corresponds to that in ems or percentage??? ... Or where to find out if i use a certain size eg font-size:2em; (what size is that?) what browsers and versions will do to them .. I only have ie6 .. I used to have netcrap 4.71 from an old disk .. and if it looked ok and worked there I used whatever feature it was, as anything below that I'm not catering for .. a change of hd .. and I've not put it back on yet... what I'm saying is .. .you stopped too soon either give us a link to that info .. or carry on and write the rest of the article <grin> the colour stuff was interesting too and I'd like more info on that ... in fact forget writing it here .. write the article and offer it to outfront to run ... don't forget the link in here when it's done.... gals like me need more help with this I'm afraid ... I want to use it ..I just can't understand the measurements ... and I use px rather than pts at the moment because I can understand that.. .many times understanding of something dicates it's wide spread use.... it's taken me a year to get to grips with what little css I know ....

Tina

_____________________________

Expression Web Help
Expression Web Blog
FrontPage Help - FrontPage Tutorials
Any Expression List
Migrating from FrontPage to Expression Web

(in reply to Peppergal)
Peppergal

 

Posts: 2207
Joined: 9/20/2002
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/3/2003 22:52:18   
You just have to mess with it and test it to see how it changes. I usually have my regular text at 90%, BIG headers at 120%, super small text that nobody really is going to read at 70%, and everywhere in between....

I like using percentages better than ems, because my mind can process it better. But it just takes some practice...just like it took you some practice to learn what 10 and 12 and 14 px looks like.

_____________________________

Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog

(in reply to tinaalice)
fiachra

 

Posts: 338
Joined: 5/12/2002
From:
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/4/2003 11:32:56   
As the gorillas are not going to be around for a hell of a long time, if at all, I'll give a "brief" reply to tinaalice.

The advantage to using ems and percentages (they are effectively the same thing) is that a site will scale according to the users preferences automatically.

Px refers to pixelsize which means you've already made things pretty near illegible for those who use macs.

Pt is a printing measure - and how on god's green earth it ever snuck into web measurements is something I'll never understand.

IOW

Em's and percentages make everything much easier: easier for site authors doing markup, easier for site managers or those who have to alter original code, easier for designers, and much much more importantly easier for users of all browsers, ranging from pc screens to palm pilots to speech synthesizers to projectors.

The user only has to specify one thing: the font size (1 em) in their browser and everything else scales automatically from that according to specifications in the css.

Fine print can be 0.8em, or 0.6em, or 1em italic, or whatever you like ditto headings, indents, leading, etc.

quote:

can't relate it to 10 or 12 points that being the size (12) I'm comformatble reading ..


Don't think I'm getting at you when I say this but what you're comfortable reading isn't really the issue - it's what your visitors are comfortable reading that's more important.

Incidentally more than 10% of the male poplulation in the western world suffer from some form of severe visual deficiency. Sit down and think about that number - it's an awful lot of people to not cater for. As for nn4.7x it has even worse css support than ie4.0 does. Unless a very large percentage of your visitors are scientific, technical, military, or government then you can probably safely ignore it. If you can'y simply ignore it then use @import as specified and written about elswhere on this forum by one of my colleagues in the gorilla group to serve something that nn4.x will understand and force it to ignore everything else.

http://style.cleverchimp.com/font_size/scale/ for an example

Here's some sample code to mess with

p { font-size:0.9em; }
td, th { font-size:0.7em; }
h1 { font-size:200%; }
h2 { font-size:170%; }
h3 { font-size:140%; }
h4 { font-size:120%; }


Just remember that the cascade involves inheritance and that .9 of .9 is .81 to avoid problems you'll also have probles is you specify 50% of 50% for the same reason.

http://www.w3.org/WAI/GL/css2em.htm

http://www.w3schools.com/css/

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-size


of course there's always www.google.com as well :)

< Message edited by fiachra -- 12/4/2003 11:55:02 AM >


_____________________________

www.peopleeatingtastyaliens.com

(in reply to Peppergal)
Peppergal

 

Posts: 2207
Joined: 9/20/2002
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/4/2003 12:33:14   
quote:

As the gorillas are not going to be around for a hell of a long time, if at all


What? No gorillas?

_____________________________

Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog

(in reply to fiachra)
c1sissy

 

Posts: 5094
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/4/2003 13:16:47   
quote:

ORIGINAL: Peppergal

quote:

As the gorillas are not going to be around for a hell of a long time, if at all


What? No gorillas?


Peppergal
if you look here you will see that they are leaving. The QRX is their way of telling us goodbye.
:):)
To my good friends in the gorilla group, you will be greatly missed,:):) greatly missed.

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://cssinfo.debsplace.org
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Peppergal)
Mike54

 

Posts: 4870
Joined: 3/26/2001
From: Way Up Over
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/4/2003 15:10:48   
quote:

QRX


In radiospeak it means something to the effect of "when will you call me again / I'll call you at _______".

Of course they may have their own code...

I hope it wasn't something we said.:)

_____________________________

Who was the first guy that looked at a cow and said, "I think that I'll drink whatever comes out of those things when I squeeze them"?

New photogalleries, stop by sometime.
Or you could just view the old stuff.
Old photogalleries

(in reply to c1sissy)
Peppergal

 

Posts: 2207
Joined: 9/20/2002
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/4/2003 19:05:34   
I'm still just as confused. All that post did was list everyone.... I totally echo DOnkey's post on that thread....

Gorillas are important to the this ecosystem here.

_____________________________

Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog

(in reply to Mike54)
c1sissy

 

Posts: 5094
Joined: 7/20/2002
From: NJ
Status: offline

 
RE: Another reason why you should use EM or Percentages - 12/5/2003 7:54:55   
quote:

Gorillas are important to the this ecosystem here.

I agree with you, and I know that I shall miss them greatly.:):):)

_____________________________

Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://cssinfo.debsplace.org
http://positioniseverything.net/
http://www.tanfa.co.uk/

(in reply to Peppergal)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Another reason why you should use EM or Percentages
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts