Clarification Please em, % body font CSS Stylesheet etc . . .

[R Schreiber]

the body call . . .

font:normal 86%/160% verdana,geneva,helvetica,sans-serif;

There is no font size in px set in the body{ for which this call then sets to 86% with a line heigth of 160% (?)

Isn't the original body font size set as px (ie., 12px) and then the 86%/160% takes over from there on?

All the rest of my font measurements in my CSS stylesheet are in px. Should they be in em's?

Below - both of these are width declarations however one is in px the other in em's.
Is it because the min-px measurement sets an absoloute minimum for a viewport and the max allows for larger viewports?

min-width:752px;
max-width:96em;

How does viewport diaganal size and screen resolution settings effect all of this?

I researched here. :http://kyleschaeffer.com/best-practi...s-px-vs-pt-vs/


Thanks much . . . Rick

[R Schreiber]

the body call . . .

font:normal 86%/160% verdana,geneva,helvetica,sans-serif;

There is no font size in px set in the body{ for which this call then sets to 86% with a line heigth of 160% (?)

Isn't the original body font size set as px (ie., 12px) and then the 86%/160% takes over from there on?

All the rest of my font measurements in my CSS stylesheet are in px. Should they be in em's?

Below - both of these are width declarations however one is in px the other in em's.
Is it because the min-px measurement sets an absoloute minimum for a viewport and the max allows for larger viewports?

min-width:752px;
max-width:96em;

How does viewport diaganal size and screen resolution settings effect all of this?

I researched here. :http://kyleschaeffer.com/best-practi...s-px-vs-pt-vs/


Thanks much . . . Rick

Also how do I write the HTML code based on this css?

#content a.email span { etc . . .

I wish to use this in place of what I have now which is . . .
<a href="mailto:propertieswithstyle@gmail.com" class="email"><em>Properties With Style.</em></a>

Thanks again . . . Rick
[/quote]

[Paul O'B]

the body call . . .

font:normal 86%/160% verdana,geneva,helvetica,sans-serif;

There is no font size in px set in the body{ for which this call then sets to 86% with a line heigth of 160% (?)

Isn't the original body font size set as px (ie., 12px) and then the 86%/160% takes over from there on?

The original body size will be whatever the User Agent (browser) determines is a suitable size (usually its 16px but doesn't have to be). However, that may also be different depending on what the user has set via browser preferences as the default size, or what the user has set in a default stylesheet. Lastly the user may be using 120dpi which may equate to a 20px default.

The beauty of ems/percent is that you don't need to know what this size is or may be. You just create a relationship between the sizes in your layout and whatever the uses has chosen then your layout will scale accordingly. Setting the font in px in your page will break this relationship and upset the user. It's less of a problem these days as most browsers have zoom and can enlarge or shrink but it does still annoy some users if you fiddle with their font-size. Remember its the visitors screen you are playing with not your own.

Read these old threads on the subject.
http://www.sitepoint.com/forums/show...fonts-em-px-pt
http://www.sitepoint.com/forums/css-...ey-746728.html

Below - both of these are width declarations however one is in px the other in em's.
Is it because the min-px measurement sets an absoloute minimum for a viewport and the max allows for larger viewports?

Yes its usually better to set a minimum width in px but not imperative. The max width can either be in ems or px depending on whether you have set the width in ems or px. If you have a fixed width in em then you may want to stop the page getting to be miles wide if the user keeps increasing the font-size so you could set a max-width in px just to make sure it doesn't look silly.

How does viewport diaganal size and screen resolution settings effect all of this?

Text may look smaller or bigger depending on resolution.

[Paul O'B]

Also how do I write the HTML code based on this css?

#content a.email span { etc . . .

I wish to use this in place of what I have now which is . . .
<a href="mailtoropertieswithstyle@gmail.com" class="email"><em>Properties With Style.</em></a>

Thanks again . . . Rick

You'll have to explain that again as you lost me on the way

You don't have a span in the above html code you have an em which you could target with .email em{etc..} unless you have already targeted it using more weight and then use the same weight as before (#content .email em{})

[Stevie D]

All the rest of my font measurements in my CSS stylesheet are in px. Should they be in em's?

If you've set font sizes on everything else in px then there isn't a lot of point in setting ems on <body>, because it won't count for anything. On the other hand, if there are some elements that you haven't set explicit font sizes on then it's sensible to keep the declaration on <body>.

As a general rule, I prefer to use ems (or %) for font sizes than px, although there are cases for using px for specific design elements where you need the text to be an exact size. However, as this rides roughshod over a user's set preferences in their browser, it is not so good to use this throughout body content.

Below - both of these are width declarations however one is in px the other in em's.
Is it because the min-px measurement sets an absoloute minimum for a viewport and the max allows for larger viewports?

min-width:752px;
max-width:96em;

The min-width means that the site won't shrink below 752px wide – setting a minimum width in pixels is a sensible way to try to preserve the design layout.

The max-width means that, at the upper end, the maximum width allowed will scale with font size, so people with larger fonts can see the site stretch larger than those with smaller default fonts. Again, this is sensible because one of the key determinants of how easy it is to read a passage is the line length (in terms of words/characters). The people this is most likely to affect are those with super-high resolution monitors, who may bump the text up to a more readable size (20px on a very high resolution monitor might still be physically smaller than 16px on another monitor), who will benefit from the site stretching further.

How does viewport diaganal size and screen resolution settings effect all of this?

It doesn't. CSS doesn't take account of the diagonal size of the monitor, it only looks at the width (or very occasionally the height). Screen resolution means that for some people it will be scrunched up small and for others it will be bigger – this is why respecting the user's font settings is important, because it ensures the text will be readable for them, whatever their resolution.