Font size's unit of measure

message from A.M on 19 Jul 2004
Hi,

Pixels
Points
In
Cm
mm
Picas
ems
exs

I currently use only Pixels. I also can guess what is Cm or Im. However I
don't know what is the usage of Points, Picas, ems, exs.

Could anuone refer me to a link that explains what exactly are Points,
Picas, ems, exs.?

Thanks,
Alan
 
gareth replied to A.M on 19 Jul 2004
This gives some info on font sizes etc

http://www.bigbaer.com/css_tutorials/css_font_size.htm
 
James Shook replied to A.M on 19 Jul 2004
Cm = centimeters, Mm = millimeters, In = inches

Points are used when specifying type for print. A typeface in 72 points
will always be the same size no matter what you print it on (although
different typefaces at 72 points may not look the same size because of
the design of the typeface itself.) Points are probably the least
appropriate metric to use when specifying type size for web pages
because differing OSs and monitors use different calculations for how to
convert points to pixels. On the first generation of Macintoshes, a
point was exactly equal to one pixel. Then it got complicated. So far as
I can see, there is nothing to recommend using points in a web page.

Pixels are pixels (at least until the W3C boys get their hands on
them....) If you say a font should be 72 pixels it will be. (Remember,
different typefaces may look larger or smaller than others because of
the design of the typeface itself. And the size of the font includes the
descenders in letters like g and y.) This metric is the easiest to
understand but has one drawback. All reasonably modern browsers will
allow viewers to resize text using simple browser controls. All except
the most widely-used: IE6/Windows. You *can* change text sized in pixels
in that browser, but it's a bit more complicated. So pages using pixels
as the font metric may be less-than-optimally accessible to IE6 users,
since they may not be aware of how they can change the type size, or
find it bothersome to do so.

(In general, you should be designing such that your pages don't fall
apart when the size of the type changes. Some people may not be able to
read the text in the size you have chosen. So make sure that if the
viewer resizes the type, the integrity of your design is preserved.)

I've never used inches, millimeters or centimeters but I imagine they
work as you would expect. However, there may be some inconsistencies
between browsers about how to translate these metrics to the actual
pixels on the screen. I don't know.

Picas are another metric used in print. I don't know anything about how
to use them in a web page. My online dictionary rather unhelpfully
informs me:

4. (Print.) A size of type next larger than small pica, and smaller
than English.

Note: Pica is twice the size of nonpareil, and is used as a
standard of measurement in casting leads, cutting rules, etc., and
also as a standard by which to designate several larger kinds of
type, as double pica, two-line pica, four-line pica, and the like.

OK. Sounds like all the problems of points and then some....

"Pica" is also a name for a disease that cause pregnant women to eat
dirt. But I digress.

An "em" is the width of the letter M in a given typeface. If you use
this you are necessarily referring to the default size of text in a
given browser as set in its preferences. In other words, you don't
really know how large the text will be. However, if your design can
stand up to it, using ems is a good way to size your text relative to a
viewer's default. So 0.8 em would display at 80% of the viewer's
preferred text size, whatever that is. So you can set text in sizes
relative to the default browser size, but you don't know what that size
happens to be. Using ems (and, similarly, %) confers the most control
over text to your viewer and so presents the possibility of making the
page most accessible to them, since they have presumably established a
base font size they can read easily. However, lots of sizes like 0.3 em,
0.5 em and so on used for the bulk of material on a page will subvert
the viewer's preferences and probably force them to use browser controls
to make the text bigger. And older browsers, like NN4/Mac at least, do
not deal with ems well at all, so if you need to support that browser
(and any others that can't handle ems) use a special CSS file to feed
them type sized in some other metric.

An "ex" is the height of the lower-case "x" in a font. This is
unreliable since some browsers do not use the actual value for a given
typeface but just approximate it from the size of the font (by dividing
the height by two, for example.) I can't quite see why this is even
available to use to size text in a web page.

So which should you use?

Pixels:
It's what I use the most often and hope that I have made good choices
about type size, but I always test the page by changing the text size in
a browser up and down a few notches to make sure nothing in the design
breaks. IE6 users get what they deserve.

At the other end of the spectrum you have ems and %:
Here you are throwing yourself on the mercy of how a viewer has set
their base type size. This gives you the designer the least control but
gives most control to the viewer. A web site where accessibility is
important--most of them I would imagine, even if not legally required to
be so--should probably use these relative sizes for the most part,
saving more fixed metrics for minor page elements like copyright notices
and the like.

This is all just my opinion. I don't know off-hand of any web sites that
discuss this, but a google session can work wonders.
 
darrel replied to James Shook on 19 Jul 2004
This is where it gets confusing. Pixels, according to the W3C, are not
physically mapped to pixels on the screen/rendering. So, technically, the
browser can map '72 pixels' to any number of pixels it wants to.

In addition, there's the font resizing issue that you mention that expands
upon that concept.

There are 12 points in a pica. Even print designers rarely use Picas these
days...I have no idea what the W3C was thinking in making that a part of
CSS. ;o)

Technically, it's the width of the block of wood/metal that the M was cut
out of. It was typically a square block.

Yep. Exactly like percentages.

The one advantage of ems is that you can can use it for other elements. You
can have a div set to 40ems, and then, if the person resizes their type, the
div will change size in proportion to the type.

I use pixels too, but have been using on-screen font-resizing widgets more
and more. While IE6 users sometimes deserve what they get, often they are at
the mercy of the evil IT department. ;o)

-Darrel
 
James Shook replied to darrel on 19 Jul 2004
This is one of the areas where I think the W3C is going of the rails.
They seem to want to define a virtual imaging model, but are doing it in
small pieces--I don't see any trace of a big picture, as it were.

Why not just define a new metric: rods and cones? After all, that's what
they all boil down to, right?
 
James Shook replied to James Shook on 19 Jul 2004
Haven't you heard about the new standards?
 
Mad Dog replied to James Shook on 19 Jul 2004
"The nice thing about standards is that you have so many to choose from.
Furthermore, if you do not like any of them, you can just wait for next
year's model."

James Shook wrote:
 
Mad Dog replied to darrel on 19 Jul 2004
To clarify, print designers very definitely do still use picas as a
measurement, but as far as I know they never used it as a type measurement.
Type was always in points, distance was in picas.

And no, I don't know why this is in CSS either. (:})

darrel wrote:
 
darrel replied to Mad Dog on 19 Jul 2004
Just the ones over 40.

;o)

-Darrel
 
Murray *TMM* replied to Mad Dog on 19 Jul 2004
I once had a pica surgically removed.

It hurt.
 

Archived message: Font size's unit of measure (Macromedia Dreamweaver)