Fluid font size?

[waMP]

I am creating a fluid layout. The images width and height are set at a % and expand and shrink depnding on the size of the screen. I would like the same thing to happen with the font size. When the screen is larger, the font is larger and when the screen is smaller, the font shrinks.

I've tried using % for font size, but the font size stays the same no matter what size the screen is.

Is there a way to make the font fluid with CSS?

Thank you

[Webnerd]

Fonts don't change with resolution. You can use some other fun properties in CSS to do what you want though:

MozTransform
WebkitTransform

and for IE
progid:DXImageTransform.Microsoft.Matrix

[waMP]

Well this is what I am asking. What do I use in CSS to accomplish this?

For example, this client has 2 - 40inch screens at his business and then wants to make the site equally viewable for laptops to everyday user size screens. He wants all the content to fit on the screen without scrolling at all. So if it is a 17inch screen the font will be very small versus a 40 inch screen will be large, but on all computers screens, the site will look the same without scroll bars.

I can accomplish this with a fluid layout using % for image sizes, its just font is not flucuating with the different screen sizes.

Can you tell me what I need to do in css to accomplish this please?

[tracknut]

I don't have the answer for you, but I can say this is one of the more bizarre user requests I have heard of. So you're saying the web site might display on a 40" wide screen, then also have the very same layout to fit on a 17" screen, with smaller images and teeny text? What if someone has his browser set to only 8" wide, should the text be microscopic?

This certainly isn't the definition of a "fluid" web site, and wouldn't correspond to the user interface of any other web sites those folks might be viewing.

I would double-check that requirement carefully with the customer...

Dave

[Webnerd]

Can you tell me what I need to do in css to accomplish this please?


The information I provided above will give you want you want. But not without some scripting.

[waMP]

This is a valid request and I look forward to developing it. If you look at this website, it is done in flash. However, the client wants a similar type of site but without using flash.

http://www.ontariosgateway.com/us/ns/gp/main.html

If you widen and shorten the window, the text and images shrink and grow. This allows it to fit on a variety of monitor sizes.

Can you point in some direction of the script that would accomplish this?

Here is a portion of my css:


@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.twoColLiqRt #container {
width: 95%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.twoColLiqRt #mainContent {
margin: 0 26% 0 20px;
font-size: inherit;
}

.twoColLiqRt #mainContentArea {
width: 30%;
background:#630;
float: right;
font-size: ????????? How do I make this font adjust here?

}



Thank you

[Fang]

Requires JavaScript<script type="text/javascript">
window.onload =
window.onresize = fontResize;
function fontResize() {
document.body.style.fontSize = parseInt(document.documentElement.clientWidth/100) + 'px';
}
</script>
This has accessibility issues! Note that users can set the minimum font-size.

[Webnerd]

Ok dude, I can't keep repeating myself numerous times. Look at my first post. Firefox, Safari (Webkit), and IE have some special resize filters in CSS. You can modify them using Javascript. I use them in my project here:

http://code.google.com/p/jquery-panel-magic/source/browse/#svn/trunk

It allows you to create a "true" resize of content but you need to script the width/height for the resize. It allows you to actually scale a container as you need without having to create custom CSS for fonts and such.

[waMP]

Fang,

Thank you so much for your help! Your script works perfectly and is exactly what I was looking for! I appreciate it so much! Thank you!!!!!!!!! You are the best!

Webnerd, can't see where you repeated anything!!! Still don't understand what you are trying to say. But thanks for the attempt.

[Webnerd]

Ok, I guess my responses should be followed up with a simple "go fly a kite". Sorry to have wasted my time.

[cfajohnson]

I am creating a fluid layout. The images width and height are set at a % and expand and shrink depnding on the size of the screen. I would like the same thing to happen with the font size. When the screen is larger, the font is larger and when the screen is smaller, the font shrinks.

I've tried using % for font size, but the font size stays the same no matter what size the screen is.

Is there a way to make the font fluid with CSS?


Luckily, no.

You should not change the font size from the viewer's preferred size. There is not necessarily any relationship between window size and ideal font size.

(It can probably be done with JavaScript, but it's a very bad idea.)

[rnd me]

Requires JavaScript<script type="text/javascript">
window.onload =
window.onresize = fontResize;
function fontResize() {
document.body.style.fontSize = parseInt(document.documentElement.clientWidth/100) + 'px';
}
</script>
This has accessibility issues! Note that users can set the minimum font-size.


what accessibility issues does this have?

[rnd me]

Is there a way to make the font fluid with CSS?
Thank you

yes. you can use css3 media queries to create sized adjustment profiles (html>body rules) that alter the page's base font size.

it won't work in a lot of browsers at the moment, but it's something to be aware of.