homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

    
how to unfix my fonts
need a quick lesson in ems
annej




msg:1583188
 3:15 pm on Mar 1, 2006 (gmt 0)

I have my text set at 12px to 14px depending if it's in the side column or in an article.

I understand I need to convert to ems for usability and accessibility.

How do I convert? What is an em equal to in px? I understand it's like a percentage but percentage of what?

 

BlobFisk




msg:1583189
 4:50 pm on Mar 1, 2006 (gmt 0)

Hi annej,

Have a look at this CSS Forum thread [webmasterworld.com] which should hopefully answer your question.

annej




msg:1583190
 9:23 pm on Mar 1, 2006 (gmt 0)

Wow, reading that thread it looks mindboggeling.

If I set my article text at

font-family: Verdana;
font-size: 14px;

wouldn't it be big enough for most folks?

encyclo




msg:1583191
 10:06 am on Mar 2, 2006 (gmt 0)

The above linked article dates from 2002, and the browser lanndscape has changed a great deal since then. OK we still have to deal with IE6, but depending on your audience IE5.x is pretty much dead and 4.x browsers are no longer an issue.

I use two approaches, each with their merits. The first is to use font size keywords:

h1 {font-size:large;}
h2 {font-size:medium;}
p {font-size:small;}
#footer {font-size:x-small;}

Sizes run from xx-small to xx-large. There are two disadvantages to the keywords approach, the first is that you are limited to seven levels and the second is that IE5 (or IE6 in quirks mode) will make the fonts one size larger unless you use a box model hack. I don't bother these days as I have very few IE5 users and it is not a problem that the text is larger for them anyway.

The second approach is with percentages and ems:

body {font-size:100%;}
h1 {font-size:1.5em;}
h2 {font-size:1.1em;}
p {font-size:0.9em;}
#footer {font-size:0.7em;}

The disadvantage is that if you get to 0.5em or lower then IE tends to act a bit strangely.

Assuming your documents are always in standards-compliance mode (with a full doctype on the very first line) then font size without pixels works very well.

annej




msg:1583192
 3:39 am on Mar 3, 2006 (gmt 0)

Assuming your documents are always in standards-compliance mode (with a full doctype on the very first line) then font size without pixels works very well.

Oh, lordy. You are talking to someone who hand codes her HTML and CSS. I've always gone with the idea that if it works use it.

I just asked about doctypes on the HTML forum. Maybe I can sort it out. I've tried to validate my pages before but they always want a doctype. I don't think they had those back when I learned HTML.

I'll try your suggestions on a small subsection. I have a couple that are on their own stylesheet. Then it will be easier to see if it works.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved