|
| |
|
|
BobbyDouglas
Posts: 5452
Joined: 5/15/2003
From: Arizona
Status: offline
 |
em font sizes and why they can hurt your site! - 6/3/2005 2:59:30
The entire idea of using .em font sizes is to allow people to use their default browser setting as an offset for the font size. So if I have .6em, it will be a certain size depending on the browser's font size in the View > Font/Text Sizes
However, as more and more computers are coming with widescreen monitors, this default value is set to Largest. Meaning your website will actually look horrible, and sometimes be so bad potential clients will leave. Sometimes this isn't quite as bad, but it all depends on the sizes you are using.
Why dont widescreen users change this setting?
- Goodluck with that 
Well what's the point of em sizes?
- Basically to provide a dynamic solution for people who have modified their font size setting using their browser. These are usually people who have trouble seeing small text, and have their browser set to larger or largest.
So what do we do?
- IMO I wouldn't use em sizes at all. I see the number of widescreen laptops increasing. Why take the risk?
Well what about those who have trouble viewing the small text sizes?
- Provide an alternative CSS with a larger text size.
How do I provide another CSS file?
- There are a few ways. One requires JavaScript and allows you to switch your CSS file using a link. Simply add a "View Larger Font" link for those who need it.
What if I don't want to use JavaScript?
- There is a really nice PHP based solution that will allow the user to select a certain CSS and store that value as a cookie. If the user comes to the site, and there isn't a cookie, a default CSS will be applied.
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
|
|
|
|
d a v e
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/3/2005 6:43:46
er, but the whole point is that it is based on users font size - if that is set at largest then it will be like that for whatever relative font sizing you use (ems, %s ...) so it's at the size of what the user wants already : if it's too large then let the user change their default font size to medium or their preference.
making the font size smaller for users of widescreens will only make it too small for those with 'traditionally' sized monitors.
offering alternative stylesheets is an elegant idea but is essentially the same push of the button for the user only they get to do it via the web page rather than their browser.
i asssume we are only talking about IE on windows? or would i expect large fonts on a widescreen with opera/firefox/whatever?
_____________________________
David Prescott
Gekko web design
| |
|
|
|
caz
Posts: 3510
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/3/2005 6:50:38
You can make a nice ems stylesheet with P text at 1.0 em, and then downsize the whole thing by selecting size in BODY with %, like 76%. It's simple, easy to change, and works for everything. I have been using this method for over a year now - it also worked with a 42" plasma screen, with no user intervention needed.
Good for situations where javascript is not available.
Read this
and this
What are ems?
Carol
PS. It also adjusts the text sizing for Macs, where I believe there is a pixel difference.
< Message edited by caz -- 6/3/2005 7:22:30 >
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
d a v e
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/3/2005 6:53:10
yeah i've bene using that as well - pesky 76% just for IE :( to avoid the micro text when resizing.
_____________________________
David Prescott
Gekko web design
| |
|
|
|
BobbyDouglas
Posts: 5452
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/3/2005 13:10:39
quote:
You can make a nice ems stylesheet with P text at 1.0 em, and then downsize the whole thing by selecting size in BODY with %, like 76%. It's simple, easy to change, and works for everything. I have been using this method for over a year now - it also worked with a 42" plasma screen, with no user intervention needed.
- What difference does this make? It will still error because of the people on the widescreen displays.
quote:
if it's too large then let the user change their default font size to medium or their preference.
- I've seen about 8 people now with widescreen laptops that did not know about the View > Size > Change to Medium. I can only imagine most people would not know about it. Even I didn't think of it at first.
quote:
making the font size smaller for users of widescreens will only make it too small for those with 'traditionally' sized monitors.
- Exactly, that's why it would be wise to have a 2nd CSS for a larger size.
quote:
offering alternative stylesheets is an elegant idea but is essentially the same push of the button for the user only they get to do it via the web page rather than their browser.
- I think more people would understand a link that says Larger Font, than they would to change their default text size.
quote:
i asssume we are only talking about IE on windows? or would i expect large fonts on a widescreen with opera/firefox/whatever?
- Just IE, and on widescreen displays. FF has a built in font changer, so your text size can always be easily changed.
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
d a v e
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/3/2005 13:40:58
i'm inclined to say stuff the people with their font size set to largest.
oops forgot my smiley
:)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
BobbyDouglas
Posts: 5452
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/3/2005 14:11:32
lol, was that the first thing you thought of... to change the size from Largest to Medium? It wasn't for me and I am usually pretty good at fixing odd issues.
But why settle for poor designs? As a designer I would want my pages to look great. I am suprised more people haven't raised this issue, but I guess we are just at the start of computers with widescreens. If I was to buy a laptop, I would get the widescreen or 17", widescreens are actually pretty low now too. The other day I picked up a laptop with 512mb ram, 1.6 Pentium M, 24xcd burner/dvd player, 40gb hard drive, 2 year warranty, 9 cell battery w/ 6 cell backup, 64mb usb flash drive, x300 vid card, for $950 shipped.
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
Nicole
Posts: 2830
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/4/2005 5:09:17
I'll probably be shot for these comments but compared to television or magazines......
Television developes wide screens and all the producers have to worry about is that the edges of the filming area are neat and tidy and in keeping with the picture in the middle.
Sports events don't have to even worry about this!
Newspapers, magazines, they change their actual size and they just fit more on a page or lay it out more spaciously.
Websites, no, it's nothing like that, it all depends on the end user, what monitor they have, what screen resolution that monitor has, what their text size is set to, whether they have images/javascript/frames etc. turned on or off.....blah blah blah.......
What other information medium is like this?
It's stupid, why do we do it?
Nicole
_____________________________
| |
|
|
|
d a v e
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/4/2005 6:34:38
the extra stylesheet would be there for users to *choose* if they are using a widescreen display where the text size was uncomfortably large.
those with visual difficulties would be free to leave it set at their default and/or resize their text to what they want
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/4/2005 7:33:07
well i agree - i was just explaining what the 'button' did :)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/4/2005 8:22:40
sure thing ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
caz
Posts: 3510
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/4/2005 9:03:17
quote:
You can make a nice ems stylesheet with P text at 1.0 em, and then downsize the whole thing by selecting size in BODY with %, like 76%. It's simple, easy to change, and works for everything. I have been using this method for over a year now - it also worked with a 42" plasma screen, with no user intervention needed.
- What difference does this make? It will still error because of the people on the widescreen displays.
The difference is that this was a presentation constructed in FP on a 1024 monitor, burnt to disk then displayed via an 800x laptop onto a 42" plasma screen and no-one had any difficulty at any stage ie. no font resizing via the browser or alternate stylesheet was necessary. I got the job, which is all the proof I needed that this works and that no-one in that boardroom had any difficulty viewing it.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
caz
Posts: 3510
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/4/2005 11:01:38
Donkey, if you follow the first link i gave above you eventually get to an explanation http://www.thenoodleincident.com/tutorials/typography/index.html of the theory behind this idea. Granted, I expect my users to be able to use their browser font resize methods - maybe I am being a bit strict here, but I expect users who have sight difficulties to be more aware of browser help than others may be. The method given ensures that text isn't miniscule for IE/PC, yet not huge for IE/Mac; it's something to do with the different ppi rendering of PC v Mac. If I can find the reference I will post it.
If pushed, I would do as Jaybee does for accessibility points. ( Not the best attitude, I know  )
edit: The MS inch is bigger than the Mac inch.
The windows of the operating system, the interface, our applications and images, all have a fixed resolution: 72 ppi for the Macintosh and 96 ppi for Windows, holding true even as the OSes have transitioned to OS X and XP, respectively.
As the resolution of the display increases and the pixels get smaller, all the elements on the screen also get proportionally smaller. The rulers get smaller along with the images. An inch is no longer an inch. We understand this and live with it, and work around the relative shrinkage.Still, it's really not how things should be.
Pixel density
More background, if you want it...
http://www.chromadesign.com/classes/css/lesson4/font_size.shtml
http://www.macworld.com/2000/09/bc/how-toreconcilable/
http://www.richinstyle.com/masterclass/lengths.html
< Message edited by caz -- 6/5/2005 8:20:40 >
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
BobbyDouglas
Posts: 5452
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/4/2005 22:24:45
quote:
Surely this is limiting accessibility and should be discouraged?
- Very true, it means the user cannot decrease the size manually, and that he/she must use the regular, or larger CSS file. Does this mean it will present a problem? It could, some users might set their certain size to something that works well for the, and they will not want to use the size YOU make them use.
quote:
OK, so you have a button for people who are too dumb to resize in the browser, so what wording do you put on the button that makes them understand what it's for without insulting them?
- Either use "larger" or "smaller/normal" for the text.
quote:
The difference is that this was a presentation constructed in FP on a 1024 monitor, burnt to disk then displayed via an 800x laptop onto a 42" plasma screen and no-one had any difficulty at any stage ie. no font resizing via the browser or alternate stylesheet was necessary. I got the job, which is all the proof I needed that this works and that no-one in that boardroom had any difficulty viewing it.
- And then imaging how bad it would have looked if someone had a widescreen laptop.
quote:
maybe I am being a bit strict here, but I expect users who have sight difficulties to be more aware of browser help than others may be.
- But don't forget that users who do not have sight difficulties will need to be aware of the items that users who do have sight difficulties. Meaning, if Joe has 20/20 vision, he visits the site using EMs on his widescreen laptop, he will have to know that the font size needs to be changed- but Joe doesn't have sight difficulties.
Any other premises?
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
caz
Posts: 3510
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/5/2005 8:30:37
I don't understand, what is the difference between a lap top with a 1024 screen and a desktop with the same resolution?
Even people who have an immediate need to create a this needs-to-work-for-my-boss-this-week page should nevertheless keep an eye open to the standard that certainly will spread, which is em's and percentages. They will make everything much easier: easier for authors doing markup, easier for site managers, easier for designers, and certainly easier for users of all browsers, from widescreen true color to palm pilots to speech synthesizers to auditorium projectors. (The web should certainly replace PowerPoint presentations.) The user only has to specify one thing: the preferred "medium" font size (1 em). Everything else scales automatically from that...Relative values allow the page to fill the screen rather than having say an 900px portion overlapping on an 800 wide screen or having gaps either side on a 1200 screen.
If you want more detail on this method, have a look at this chart showing incremental differences: HTML with P at 1.0em and then BODY at %, for each % from 50% through 99%-
http://www.thenoodleincident.com/tutorials/typography/incremental_differences.html
But you pays your money and takes your chance, each to their own way of working, I just offer this as an alternatve way of accommodating varying resolutions using css and fluid design, leaving the choice of sizing to the user. The references that I have given in this thread make good reading.
Cheers,
Carol
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
BobbyDouglas
Posts: 5452
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/5/2005 14:56:10
quote:
I don't understand, what is the difference between a lap top with a 1024 screen and a desktop with the same resolution?
- Because widescreen computers apparently come with IE set to Largest for the font size.
quote:
from widescreen true color to palm pilots to speech synthesizers to auditorium projectors.
- And what do we do until then? Continue to use ems while we wait for them to render the same? Because widescreen computers initially are not setup to handle ems correctly.
quote:
But you pays your money and takes your chance, each to their own way of working, I just offer this as an alternatve way of accommodating varying resolutions using css and fluid design, leaving the choice of sizing to the user.
- If you want your site to be 100% flexible in terms of ALL users, you will have a design that does not use pictures. So at what point do you call it quits and decide enough is enough?
Btw that link is great!! It really helps for those people who want to know what it will look like. Too bad they don't provide the code for the table, I would have liked to test it out in IE/FF.
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
caz
Posts: 3510
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/6/2005 9:40:08
In the discussion attached to this article, I think that this is what you are referrring to in your orginal post, when you talked about widescreen display:-
"I just got my new laptop with a screen resolution of 1920x1200 pixels, one of those wiiiide screen things, websites with a table width of 100% are unreadable, i almost have to move my laptop from right to left over the table to read text (if i want to keep my head still), but i also can flip the screen (in windows xp you can for these tablet pc's) than you get a really long and small website, I'm still figuring out what the is the best solution to make a website readable on both screens.."
From somewhere else:-
"I also have a widescreen laptop and it makes even [website url] harder to read when the browser is maximized, because it stretches to the whole screen. [Anon] should use a max-width. It's rarely a problem though. I love being able to have two applications side by side. Someone earlier brought up a good point. If I have two windows open to half of my screen width, then my browser is only 640px wide."
www.webmasterworld.com/forum21/9839.htm
Design for portrait, instead of landscape proportions, like ALA?
Elastic Design
by Patrick Griffiths
www.alistapart.com/articles/elastic/
How to make IE emulate the behavior of max-width,( because, of course IE can't implement all standards. This uses javascript.)
www.svendtofte.com/code/max_width_in_ie/
But the theory still stands, using ems with a base percentage setting allows pages to resize proportionally to text - unless over-ridden later in the stylesheet or inheritance effects being ignored. Those widescreen users will need to use their browser/system options to reduce the factory presets - see the Dell users forum. forums.us.dell.com/supportforums
To be honest, I'd rather spend time helping out the genuinely disabled to use my sites than waste time on an MS/OEM glitch.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
BobbyDouglas
Posts: 5452
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/6/2005 16:24:09
Finally found some good info from others on the problem!
quote:
hose widescreen users will need to use their browser/system options to reduce the factory presets
- I guess it depends on who makes up more users. Those who need %/ems, or those who use widescreens. Designs that are %/ems will also fail when you use images as well. Since images are fixed, the image will stay small while the text/widths change.
The max width hack is great! One issue with the code is that it doesn't run on the initial onload, so you have to add an onload inside the JS code.
quote:
I'd rather spend time helping out the genuinely disabled to use my sites than waste time on an MS/OEM glitch.
- Right, because it is better to help disabled than those with a font problem who are not disabled? I would rather spend time on making the site better for the most amount of users than have it suffer by trying to include everyone.
Btw, how come adding a larger css file, and have a normal one with fixed size, not fix the problem?
< Message edited by BobbyDouglas -- 6/6/2005 16:40:35 >
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
d a v e
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/6/2005 17:06:00
the issue seems to me that the font size in IE on widescreen is preset at large and so the 'blame' lies squarely at the door of the OEM. so what if it's a bit on the big side?! users need to learn how to resize their fonts if it's too big. i'm not going to fix someones else's mistake when the answer lies in the browser settings and are easily reachable. sure if you want put another stylesheet on there or a note to users on how to resize their fonts via IE. but they are getting what it says: largest ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
BobbyDouglas
Posts: 5452
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/6/2005 17:38:38
But they don't know that is the problem. How would you go about and explain that to them on a site that uses em/% if there is an easy way, then ems/%s wouldnt be bad to use.
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
BobbyDouglas
Posts: 5452
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/7/2005 13:33:02
So you design for people to view your siteon an entertainment center, even though doing so makes it look very ugly for widescreen users. That just doesn't sound right....
quote:
If the fancy took you and you could add a note for widescreen users that they can switch styles to "widescreen ratio".
- But it would look so large that sometimes you could not even read it initially.
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
ajdevies
Posts: 113
Joined: 6/19/2002
From: Holly Hill, FL
Status: offline
|
RE: em font sizes and why they can hurt your site! - 6/16/2005 15:27:38
As an advocate for, and a person with a disability, I happen to know people with varying degrees of visual impairment. Of these visually impaired friends, the majority who can still see well enough to use a standard web browser (visual version) know how to adjust their font size. They have learned how through an occupational therapy program, programs for people adjusting to loss of sight, websites to support the visually impaired, or word of mouth.
Those who can no longer use a standard web browser use a web "reader" - a program that speaks the words on the screen.
I have a friend who is totally blind. He uses a web "reader" for short pages. For large documents (lengthy web pages, PDF files, etc.) he prints the page and uses an off-line page reader, a device that reads out loud from a printed page.
There is another "trick" for knowledgable IE users. I believe this worked in IE5. I know it works in IE6. Click Tools>Internet Options>Accessibility. There are several choices, including "ignore font styles" and "ignore font sizes". There is another interesting choice: "Format documents using my style sheet", followed by a way to specify the location of a preferred style sheet.
The AFB website goes many steps beyond the styling discussed here.
I think we, as web designers, must design for the largest possible audience/customer base. Some people will "get it" and some never will. There is no way to cover every possible (dis)ability. If you create the most accessible website you know how to create, you will serve the greatest number of people.
The screen size issue can often be resolved simply by resizing the window. If you design using the K.I.S.S. philosophy, then screen size becomes less of a problem, too.
Don't get lost in the details. Look at the big picture.
_____________________________
AJ
| |
|
 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
|
|
|
Printable Version 
(That is a purgatory I think you luckily missed experiencing Nicole)
