Hi All,

There was discussion at last nights meeting regarding the CSS "font-size" property and which units to use. E.g. px (pixels), % (percentage), pt (point), or em (a unit in the field of typography originally based on the width of an "M"), .

Note that there are more than just these four units, see here.

If you buy-off on the statements from w3schools.com, then this web-page provides a pixel to em converter, and to quote from their CSS page...

"Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em)."

"The em size unit is recommended by the W3C. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em."


Although admitting there is much debate over which is the better approach, Kyle Schaeffer, on his website, adds in an addendum from 2011...

"Generally, when I create a new design, I will use percent on the body element (body { font-size: 62.5%; }), and then use the em unit to size it from there."


Or, for some quotes from wikipedia...

"One em was traditionally defined as the width of the capital M in the current typeface and point size..."

"In Cascading Style Sheets, the em unit is the height of the font in nominal points or inches."


...And finally there is one "rem" to save us all...

"To make style rules that depend only on the default font size, another unit was developed: the rem. The rem, or root em, is the font size of the root element of the document. Unlike the em, which may be different for each element, the rem is constant throughout the document."

More on rem's here

cheers,
Ian.