Different computer, different Font size

[aimskee]

The company I'm working for asked me to normalize the font size on their website so that no matter which browswer, or which computer, the font size will look about the same size. I said "okay." Now I realize that I shouldn't have said that. They use a css file that causes the body text on their pages to be 10x. On some browsers or computers using a different resolution, you now need a microscope to read the page. Do you have any ideas as to what to suggest to them to so their font sizes look more similar across the breadth and depth of all computers and browsers? Or should I just tell them it's not possible?
help,
Aimskee

 

[BillyRayPreachersSon]

Certainly when comparing Safari/Mac and most PC browsers, you'll find a big discrepancy in the default font sizes. This can be overcome with this nifty CSS I found at

http://www.clagnut.com/blog/348/#c794

/* Set default font size to 16px for Safari.  */
body {
	font-size: 100%; /* For IE */
}

html>body {
	font-size: 16px; /* IE can't read this */
}

after applying that, you'll have a good default font size across most browsers that you can then go on to tweak further.

Of course, your company need to understand that some people do change their default font size, and so your design should allow for some fluidity.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jdemmi]

I think this is what BillyRay is referring to, if so, sorry.

If not then...

This is, at LEAST to some extent, a client side setting.

In IE:

View --> Text Size --> (Largest, Larger, Medium, Smaller, Smallest)

So check this out....

http://www.robertnyman.com/2005/07/...t-the-text-size-setting-in-an-ie-web-browser/

Here's a link to his script....

http://robertnyman.com/roblab/javascript-text-size-in-ie.htm

And here's his script...

The offsetHeight might depend on the general text size for the page. In this page, this is the CSS used:

*{
margin:0;
padding:0;
font-size:100%;
}

body{
font:normal 0.74em/1.7em Arial, Helvetica, sans-serif;
}

div#font-size-test{
position:absolute;
visibility:hidden;
line-height:0.5em;
}
Then I have an element with the id "font-size-test":

<div id="font-size-test">abc</div>

Enter the script that calculates the height of the div element:

function checkFontSizeInIE(){
if(document.getElementById && document.getElementById("font-size-test")){
// 4 - smallest, 5-smaller, 6 - medium, 7 - larger, 8 - largest
var intOffsetHeight = document.getElementById("font-size-test").offsetHeight;
var strTextSizeSetting;
if (intOffsetHeight == 4){
strTextSizeSetting = "Smallest";
}
else if (intOffsetHeight == 5){
strTextSizeSetting = "Smaller";
}
else if (intOffsetHeight == 6){
strTextSizeSetting = "Medium";
}
else if (intOffsetHeight == 7){
strTextSizeSetting = "Larger";
}
else if (intOffsetHeight == 8){
strTextSizeSetting = "Largest";
}

var strAlertText = "Your text setting is " + strTextSizeSetting;
if(!document.all && navigator.userAgent.search(/MSIE/i) == -1){
strAlertText = "You don't seem to be using IE. \n
However, the current test element's offsetHeight is "
+ intOffsetHeight;
}
alert(strAlertText);
}
}
window.onload = function (){
if(document.getElementById && document.getElementById("check-text-size")){
document.getElementById("check-text-size").onclick = checkFontSizeInIE;
}
}

-- Jason
"It's Just Ones and Zeros

 

[aimskee]

thanks BillyRayPreachersSon and JDemmi, these code bits work and are a great help. I printed this out and showed my colleagues, thanks again -
Aimskee