font autoresize to fit screen

[dflor]

I've read about, but I don't have any larger monitor to test. So, I'm asking: how can I resize fonts to fit screen?
If I write font-size: 12px/18px, will font be resized according screen resolution?
Or it's better to express font-size in em?
Please give me an answer.

[ingeva]

I've read about, but I don't have any larger monitor to test. So, I'm asking: how can I resize fonts to fit screen?
If I write font-size: 12px/18px, will font be resized according screen resolution?
Or it's better to express font-size in em?

I use "px" only one place: As the font size in the "body" element.
Then when I specify everything else as "em" or "%" I can adjust the whole page with just a few JavaScript statements. When using "%" for objects, it usually means "percentage of the width of the nearest div. With fonts it's the percentage of the font size of the nearest div: 120% == 1.2em).

That way all my pages are auto-adjusted to fit the screen (or rather, the browser window) regardless.

Check my site http://upandforward.com for an example.

This is how I wish the browsers would take care of automatically.

[almostbob]

All screen measurements should only be in ems or %
the user sets the screen font to suit their vision on their computer.
change it to something stupid in px, they leave.(all px measurements for fonts are stupid, no offence intended)
Set fonts you want to be larger by 20% to font-size:120%; or font-size:1.2em; smaller to 85%, .85em
let the person viewing the page set the base font.
this screen I am composing on is 1920px high, and 16.8inches
18px text is an invisible grey smudge

[ingeva]

All screen measurements should only be in ems or %
the user sets the screen font to suit their vision on their computer.

You should also take a look at the site I suggested below.
Tell me how it looks on your computer.

Your idea is very close to mine, except I have chosen a solution that's incredibly simple for the user.

[almostbob]

went browsing through some old posts to find it

to see how your page looks in other screen sizes OS browsers, submit it to
http://www.browsershots.org
the response is screen images from users with every possible combination

[ccube921]

Ingeva on my laptop your site had scroll bars, is that supposed to happen?

Set everything in em and percentages (except images which you don't declare width and height with %, but, you position with %).

[ingeva]

Ingeva on my laptop your site had scroll bars, is that supposed to happen?

Set everything in em and percentages (except images which you don't declare width and height with %, but, you position with %).

The site also has scrollbars here. I think it's browser dependent, but you don't need to use the horizontal scrollbars since everything is within the window except if you make it very narrow, and nobody would keep it that way because the fonts get too small to be readable.

I use float for positioning horizontally, and absolute positioning in very rare cases.

[MidiMagic]

Don't use pixels to declare anything. Using pixels makes the display dependent on the screen resolution of the monitor.

Use points and percentages.

[ingeva]

Don't use pixels to declare anything. Using pixels makes the display dependent on the screen resolution of the monitor.

Use points and percentages.

You have evidently not read what I wrote .... :)

[MidiMagic]

You have evidently not read what I wrote .... :)

I read it.

The proper unit of measure for resolution-independent text is the point. It is defined as 1/72 inch on the monitor. The em depends on the font chosen, so it is not a constant.

[ingeva]

I read it.

The proper unit of measure for resolution-independent text is the point. It is defined as 1/72 inch on the monitor. The em depends on the font chosen, so it is not a constant.

That's my point. It shouldn't be a constant, but vary with the size of the window, not with the screen size. Most of us are using some kind of windows-based system these days. Note the "s" in Windows. There can be more than one window on the screen. It's meant to make it possible to adjust the size of windows to fit individual needs. Using points for font size would always render text in the same size. Using ems or percent allows the user to adjust this according to the size of his window.

"is" is one, "should be" is another. There was a fundamental flaw in the way our present windows systems were designed.

[almostbob]

I read it.

The proper unit of measure for resolution-independent text is the point. It is defined as 1/72 inch on the monitor. The em depends on the font chosen, so it is not a constant.

Screen fonts are not supposed to be fixed
Fixed text sizes do not conform to W3 standards for accessibility
for the partly blind, moles, voles, the kid with the coke bottle glasses and me,
If some **expletive deleted** sets a fixed text size the page is unreadable, the base font sent on my screen is 45point, relative dimensions ems or % scale around my base font.
fixed fonts in px or pt are jst a fuzzy grey blob.

If it doesnt look good with a different font size, recode the page and do it right.

The most popular page - Google, css xhtml compliant, Only relative font sizes
this site, better than most, has fixed fonts,
-but we coke-bottle glasses, can click a button and change the basefont, so its visible

If ya dont know, and I hope ya dont find out, it sux,
dont speak.
& please start using relative everythings

[MidiMagic]

I see what you mean.

I actually use relative font sizes when I can. The only times I use absolute sizes is when I need a font to match the size of an image. Usually it is a BIG font. (what do you do when you need a font size bigger than xx-large?)

I said to use points to make the text a certain size on the monitor, regardless of settings and resolution.

I don't know of anything other than percent that changes with the size of the window. And then, it works horizontally, but not vertically.

I learned something today. There is confusion among authors of CSS materials, because "em" has two different definitions:

- The typesetter's em is the WIDTH of the capital M. It varies with the style of the font. No relative measure was needed for typesetting. The em was used to figure how much text fits on a line.

- The real CSS em is the HEIGHT of the capital M. It is equal to the font size in points.

Unfortunately, the author of the book I learned CSS from looked up em in a dictionary, and used that definition in the book.

The typesetter's em is useless for sizing other items to fonts. It is smaller with a narrower font. Thus, I was misled into believing that the CSS em was useless.

The real CSS em looks very useful. I am going to start using it, now that I know it is not the typesetter's em.

So it seems we have four different things to refer sizes to:

px - the size of the pixel. This depends on the monitor resolution
in, pt - absolute size, assuming a normal size monitor
em - the actual displayed size of the font
% - the size of the container

I normally use percent for the sizes of box objects.

I use inches and points when I need to present a picture and size other objects to it. I do this for the purpose of making sure the detail of the picture is always large enough to be visible.

The only thing I use pixels for is to make sure a border is always visible, but is as small as possible.

I was using points for padding sizes (to separate text from borders), for lack of nothing better. The em is a better measure, now that I know it does not vary with font style.

[ingeva]

I see what you mean.

And you're right about most of what you write here, but percent can be used for font size as well, meaning the size in percent of the font size of the container. Thus, if you set the font size in the container to 1pt (or 1em), you can set
span { font-size:150% }
in the css file to make fonts inside "span" tags 150% bigger.
If you resize the underlining font, the "span" fonts will follow.

So as long as you need a constant relationship between font sizes, this is a simple and convenient way to do it.

[MidiMagic]

I tried that today in an h1 tag's style. Firefox would not accept % for a font size (I wanted a double sized font, so I put 200%). It also refused to set a font size in em. The only values that worked were px, pt, and the relative size styles (e.g. large).

[ingeva]

I tried that today in an h1 tag's style. Firefox would not accept % for a font size (I wanted a double sized font, so I put 200%). It also refused to set a font size in em. The only values that worked were px, pt, and the relative size styles (e.g. large).

If that happened you have definitely made a mistake somewhere. Check if it reads your CSS file at all. I bet you it doesn't! :)
Add something like a wild background color. If it can see that it reads the file, so you'll have to look for syntax errors etc.

Make sure that there's a default font size for the <body> element. THAT must be specified in px or pt, or else the browser doesn't know the size of neither em nor percent! :)

[MidiMagic]

If that happened you have definitely made a mistake somewhere. Check if it reads your CSS file at all. I bet you it doesn't! :)
Add something like a wild background color. If it can see that it reads the file, so you'll have to look for syntax errors etc.

The rest of the CSS is working. I added it to an existing file.

Make sure that there's a default font size for the <body> element. THAT must be specified in px or pt, or else the browser doesn't know the size of neither em nor percent! :)

That's it.

But I wanted it to use the user's own browser default setting as the value modified. How do I do that?

[ingeva]

But I wanted it to use the user's own browser default setting as the value modified. How do I do that?

By not specifying it in the body tag in the css file.
Everywhere else you can use "em" or "%" for font size, just not in the body tag.

Nothing specified == user's setting. Goes for most things! :)

[MidiMagic]

Make sure that there's a default font size for the <body> element. THAT must be specified in px or pt, or else the browser doesn't know the size of neither em nor percent! :)

By not specifying it in the body tag in the css file.
Everywhere else you can use "em" or "%" for font size, just not in the body tag.

One of you says I have to do this, the other says I shouldn't. But it doesn't work if I don't. But if I do, I don't get what I wanted.

[ingeva]

One of you says I have to do this, the other says I shouldn't. But it doesn't work if I don't. But if I do, I don't get what I wanted.

It might be good if you sent us an extract of what you're doing, because I do this with all my sites and it works all the time! :)

Example in css file:

body { font-size:16px; }
p { font-size:150%; }
h1 { font-size:2em; }

Paragraphs will be 24px in size, H1 tags 32px since 1em = 16px.
And so on.
If you change the size of the body font, the other fonts will self-adjust accordingly. Makes editing a whole lot easier.

[MidiMagic]

It might be good if you sent us an extract of what you're doing, because I do this with all my sites and it works all the time! :)

Example in css file:

body { font-size:16px; }
p { font-size:150%; }
h1 { font-size:2em; }

That's what I wanted to do, except NOT setting the pixel size of the font on the body tag. I wanted to use the user's setting.

[ingeva]

That's what I wanted to do, except NOT setting the pixel size of the font on the body tag. I wanted to use the user's setting.

Then just don't specify it.

[MidiMagic]

Then just don't specify it.

Then it doesn't work. It acts as though I made no setting at all.

[almostbob]

Gremlins
upload the script, and view it on a different pc
the gremlins could be hiding in the rendering on your browser
it *should* work

[ingeva]

Then it doesn't work. It acts as though I made no setting at all.

I see. What browser?
If you're using some strange kind of browser, see what happens if you use another.

If you can't make this work I can write a small script that allows the user to change the font size to his own liking. Or do as I do; change it according to the window size. I think that's a much nicer solution.

[ingeva]

Then it doesn't work. It acts as though I made no setting at all.

Look at this simple page:

http://intertrafico.com/font-test.html

See if it doesn't work for you. Look at the source.
Again, I'd like to know which browser you're using,
because it does not follow the W3C standard. :)

[MidiMagic]

I was using Firefiox 3.

That page works. So now I have to find out why mine does not.

One difference was that I was using a class, instead of modifying a generic tag type.

.double {font-size: 200%;}

.....

<h1 class="double">big type</h1>

Question: Are the percent values in those styles percentages of the default font size, or percent of the normally rendered font size of the tag?

[ingeva]

I was using Firefiox 3.

That page works. So now I have to find out why mine does not.

One difference was that I was using a class, instead of modifying a generic tag type.

.double {font-size: 200%;}

.....

<h1 class="double">big type</h1>

Shouldn't really matter. BTW, I'm using FF3 on Linux. I guess the basic coding and behavior should be the same.

Question: Are the percent values in those styles percentages of the default font size, or percent of the normally rendered font size of the tag?

The latter.
I suggest you strip down your page to an absolute minimum, because when my page works, you page must contain something that f***s up this functionality. I know it's not something that's done in a jiffy, but it usually works for me (I comment out most of the page, and re-enable the code gradually, until I find the section of code that produces the error. You might start with the CSS file. If you're like me you have a "basic" CSS file that sometimes causes unexpected results because you just don't remember everything in it, and you get double or conflicting definitions. The beauty is that if you disable part of the CSS file, the definitions revert to default and normally do not cause errors.

[MidiMagic]

I figured it out.

The relative size of the h1 font-size style is referenced to the base font size, not the large font size used for h1 by default. So I was actually asking for the font size h1 normally uses when I asked for a double size with 200%. The result was no visible change.

Putting in 400% gave me what I wanted.

[ingeva]

I figured it out.
Putting in 400% gave me what I wanted.

Yes of course. Sorry about not remembering or being clear about that.