em font sizes and why they can hurt your site! (Full Version)

All Forums >> [Web Development] >> Search Engine Optimization and Web Business



Message

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



d a v e -> 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?




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



d a v e -> 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.



caz -> RE: em font sizes and why they can hurt your site! (6/3/2005 6:58:19)

Pesky 76% - just to stop mac users groaning at the h u g e w i n d o w s text[;)]



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



d a v e -> 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
:)



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



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



Kitka -> RE: em font sizes and why they can hurt your site! (6/4/2005 5:35:10)

quote:

It's stupid, why do we do it?


In four words: "We have no choice!"

As long as all the many variables are out there, we risk losing a portion of our market/audience, if our designs do not reasonably fit their browser / resolution / screen / font size etc etc.

Yes, madness trying to pander to it, but much more foolhardy to ignore it.

At least now I am no longer worrying about coding for Netscape 4.x [8D] (That is a purgatory I think you luckily missed experiencing Nicole)



Donkey -> RE: em font sizes and why they can hurt your site! (6/4/2005 6:31:52)

Perhaps I don't understand something basic here, if so please correct me if I'm wrong, but I thought the purpose of the browser's ability to change to larger font sizes was primarily for people with visual difficulties. So if you have an extra style sheet which reduces the largest font sizes back to what you (the designer) want to see you are subverting the visually handicapped user's ability to adjust the font size to suit their comfort. Surely this is limiting accessibility and should be discouraged?



d a v e -> 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



Donkey -> RE: em font sizes and why they can hurt your site! (6/4/2005 7:26:14)

quote:

the extra stylesheet would be there for users to *choose*
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? And where do you put the button - on every page? That is going to look a bit cluttered on some pages. Surely it is better to leave them to find out for themselves how to resize in the browser.



d a v e -> 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 :)



Donkey -> RE: em font sizes and why they can hurt your site! (6/4/2005 7:45:44)

Sorry Dave, I just re-read your previous posts. Please treat my comments as support for your argument.



d a v e -> RE: em font sizes and why they can hurt your site! (6/4/2005 8:22:40)

sure thing ;)



caz -> 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.
[:D]



Donkey -> RE: em font sizes and why they can hurt your site! (6/4/2005 9:14:59)

Caz,
Do you mean you have just the one style sheet with body font size set to 76%? If so won't that make the font size too small for people who normally select medium or normal font size? If you have two sheets how does the second sheet get selected without user intervention?

Sorry if the questions are a bit naive, but I am trying to understand why you feel this is necessary, and how it works.



jaybee -> RE: em font sizes and why they can hurt your site! (6/4/2005 10:13:20)

quote:

so what wording do you put on the button that makes them understand what it's for without insulting them?


How about this? Top right in big letters. Click on it.



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



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



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




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



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

[sm=devil.gif]



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



d a v e -> 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 ;)



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



caz -> RE: em font sizes and why they can hurt your site! (6/7/2005 7:08:03)

quote:

Btw, how come adding a larger css file, and have a normal one with fixed size, not fix the problem?


If the fancy took you and you could add a note for widescreen users that they can switch styles to "widescreen ratio".

I'm with Dave on this one and it is fast becoming "How many angels can dance on the head of pin?" - it is my understanding that as more and more people are buying home entertainment centres/dvd viewing machines, the more the problem may arise for them.[;)]



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



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



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.140625