Line-heights and DPI

[Chris77]

SitePoint Members,

Someone was telling me about my site,
"Probably the biggest issue, and likely explaining why it's a bit screwy looking on my large font/120dpi system, is your lack of declaring line-heights when you change font-size."

Line-heights are best used (according to what I found online) on block level elements. Well like most everyone else, I have nested divs on my site. Do I really put a line-height on each div? I thought maybe I'd find a tool that would show what my site looks like at different dpi, like 120. Do you know of an online tool that would do this, or is that something you rig by changeing the screen resolution on the computer.

According to what I found online, div{line-height:3}, is an example of how I handle the css for line-heights.


Thanks,

Chris

[webcosmo]

if you would use pixel for the size it should work fine on all resolutions.
for example: line-height:18px; font-size:14px;

i would probably declare a font style for the body to be used as default. then i would override as needed.
for example
body {color:#3c3c3c;line-height:18px; font-size:14px; font-family:Arial,Verdana;}

[webdev1958]

if you would use pixel for the size it should work fine on all resolutions.
for example: line-height:18px; font-size:14px;

But if you use px for font-size, wouldn't the text be relatively huge on a small 640px device and relatively tiny on a large 1280px device?

I just use em's for font and line height sizing. After all, the user has the final say in the font size they want because you can't stop the user over-riding your css settings in their browser.

[Chris77]

Sounds reasonable, but this guy
http://www.richinstyle.com/masterclass/fonts.html
says use "<number>" because using just a number causes less problems with nested block elements.


Thanks,

Chris

[felgall]

if you would use pixel for the size it should work fine on all resolutions.
for example: line-height:18px; font-size:14px;

That would make the text microscopic for some visitors and gigantic for some others since a pixel has no fixed size and there could be a million pixels in a metre or a million metres in a pixel depending on screen resolution.

That is the one measure to always avoid as much as possible when working with the web.

You can add a line-height to any font size declaration by adding a slash followed by the line height multiplier (assuming you don't want the line height to simply scale with the text).

Line heights are just a number - 1 = single spaced, 2 = double spaced etc.

So for standard sized text you want double spaced you'd specify 1em/2

[Chris77]

Felgall,
Not to get off the subject, but does avoiding pixel units also apply to image dimensions too? If so, what other uints are available for images?

Thanks,

Chris

[felgall]

Felgall,
Not to get off the subject, but does avoiding pixel units also apply to image dimensions too? If so, what other uints are available for images?

Thanks,

Chris

Since images have their own size built in there is no need to reference their size in CSS at all.

[Chris77]

Felgall,
What about html? Can graphics referenced use only px: <img width="139" height="132" src="/xyz.jpg" >? Wait a second there's no units needed for graphics in html. Well I guess that answers that question.

Thanks,

Chris

[felgall]

Wait a second there's no units needed for graphics in html. Well I guess that answers that question.

In fact you are not allowed to specify units when reserving space for the image in the HTML. Also you only really need to specify the image size in the HTML if it is a large image that is going to take a long time to load or where you need to make sure that when the image doesn't load that the alternate text only uses the same space as the image would have.

[Chris77]

Felgall,
I lost my way on that image size units question because I was hoping there was a way to keep image size normal on high resolution (1280px) screens.

Thanks,

Chris