943,793 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > font autoresize to fit screen
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Feb 7th, 2009
0

font autoresize to fit screen

Expand Post »
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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dflor is offline Offline
17 posts
since Oct 2008
Permalink
Feb 7th, 2009
0

Re: font autoresize to fit screen

Click to Expand / Collapse  Quote originally posted by 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?
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.
Reputation Points: 16
Solved Threads: 9
Junior Poster
ingeva is offline Offline
106 posts
since Jul 2008
Permalink
Feb 7th, 2009
0

Re: font autoresize to fit screen

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
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Feb 8th, 2009
0

Re: font autoresize to fit screen

Click to Expand / Collapse  Quote originally posted by almostbob ...
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.
Reputation Points: 16
Solved Threads: 9
Junior Poster
ingeva is offline Offline
106 posts
since Jul 2008
Permalink
Feb 8th, 2009
0

Re: font autoresize to fit screen

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
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Feb 8th, 2009
0

Re: font autoresize to fit screen

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 %).
Last edited by ccube921; Feb 8th, 2009 at 7:56 pm.
Reputation Points: 13
Solved Threads: 6
Junior Poster in Training
ccube921 is offline Offline
93 posts
since Oct 2008
Permalink
Feb 10th, 2009
0

Re: font autoresize to fit screen

Click to Expand / Collapse  Quote originally posted by 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 %).
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.
Reputation Points: 16
Solved Threads: 9
Junior Poster
ingeva is offline Offline
106 posts
since Jul 2008
Permalink
Feb 10th, 2009
0

Re: font autoresize to fit screen

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

Use points and percentages.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Feb 12th, 2009
0

Re: font autoresize to fit screen

Click to Expand / Collapse  Quote originally posted by 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.
You have evidently not read what I wrote ....
Reputation Points: 16
Solved Threads: 9
Junior Poster
ingeva is offline Offline
106 posts
since Jul 2008
Permalink
Feb 17th, 2009
0

Re: font autoresize to fit screen

Click to Expand / Collapse  Quote originally posted by ingeva ...
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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: website tab reads untitled document
Next Thread in HTML and CSS Forum Timeline: Reduce Size of Embeded Web Page





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC