 |  |  |  |  |  |  |  |
font autoresize to fit screen
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
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.
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.
•
•
•
•
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?
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.
•
•
Join Date: Jan 2009
Posts: 1,326
Reputation: 
Solved Threads: 162
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
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
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
•
•
•
•
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.
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.
Yes, I'm running Ubuntu. Of course.
•
•
Join Date: Jan 2009
Posts: 1,326
Reputation:
Solved Threads: 162
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
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
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
•
•
Join Date: Oct 2008
Posts: 76
Reputation:
Solved Threads: 6
Junior Poster in Training
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 %).
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.
If I have been helpful add to my reputation!
•
•
•
•
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 %).
I use float for positioning horizontally, and absolute positioning in very rare cases.
Yes, I'm running Ubuntu. Of course.
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation:
Solved Threads: 164
Don't use pixels to declare anything. Using pixels makes the display dependent on the screen resolution of the monitor.
Use points and percentages.
Use points and percentages.
Daylight-saving time uses more gasoline
•
•
•
•
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.
Yes, I'm running Ubuntu. Of course.
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation:
Solved Threads: 164
•
•
•
•
Originally Posted by ingeva
You have evidently not read what I wrote ....
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.
Daylight-saving time uses more gasoline
|
Other Threads in the HTML and CSS Forum
- Previous Thread: Page size?
- Next Thread: webpage does not look right in IE
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
