View Single Post
Old 9th September 2008
drhowarddrfine drhowarddrfine is offline
VPN Cryptographer
 
Join Date: May 2008
Posts: 377
Default

Quote:
Originally Posted by DrJ View Post
What does differ is the screen size; the dpi counts seem to be pretty similar.
Nowadays you have widescreens and standard screens and someone may be viewing your page on a 800px wide screen or one at 1920 and everywhere in between and there is no connect between the web site and the user's system to tell that. If I make a character 10pt, it might look fine on the 800px screen but unreadable on the larger. But if I adjust for the larger, it would be huge on the smaller.

This is where ems come in. Ems, on the web, are not the same as in typography. 1em is equal to the current size of the current font, whatever that may be. So, in the body of a html document, if I set 'font-size:16px' then 1em=16px elsewhere. Now all my font sizes can be made relative to that. If I want a 12px paragraph, I would say 'font-size:.75em'. Setting 'font-size:1.5em' gives me...well...I'll leave that as an exercise for the reader.

Some developers will do things like set 'font-size:62.5%' in the body. This makes the reference 10px (16x.625=10). But now all em settings now equal pixel sizes. That is, 1.0em=10px; 1.5em=15px, etc.

In some cases, people like to use percentages. Percent works well when you want the page to be "liquid" and resize according to screen size. So if someone shrinks a window, the containing elements will adjust accordingly and you can even make the font sizes adjust but you can imagine what reading problems there may be.
Reply With Quote