Another reason why you should use EM or Percentages (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

gorilla -> 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



ajdevies -> 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.



davids -> 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.



Peppergal -> 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.



tinaalice -> 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



Peppergal -> 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.



fiachra -> 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 [;)]



Peppergal -> 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?



c1sissy -> 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,[&o][:(] greatly missed.



Mike54 -> 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.[&o]



Peppergal -> 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.



c1sissy -> 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.[:(][:(][:(]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125