True font sizes

[Roedy Green]

I decided to measure just how big various fonts really are in pixels.
The variance is quite astounding.

Here is my code to do it.

/**
* get actual height of font
*
* @param FontName name of font
*
* @return true height of a 10 point font in pixels.
*/
float getTrueFontHeight( String FontName )
{
final Font f = new Font( FontName, Font.PLAIN, 10 );
final BufferedImage dummybi = new BufferedImage( 200
/* dummy */,
200
/* dummy */,
BufferedImage.TYPE_4BYTE_ABGR_PRE );
final Graphics2D dummyg2d = dummybi.createGraphics();
final FontRenderContext fr = dummyg2d.getFontRenderContext();
final LineMetrics lm = f.getLineMetrics(
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnoprstuvwxyz01234567809()[]{}",
fr );
return lm.getDescent() + lm.getAscent();
}

You can run the code on your own fonts by running the FontShower
applet at http://mindprod.com/applet/fontshower.html
Select the "all fonts summary" option.

Fonts Available to Java under Windows Vista
Font Name True height of a 10 point font
Aharoni 10.9
Andalus 15.9
Angsana New 12.9
AngsanaUPC 12.9
Arabic Typesetting 11.9
Arial 11.9
Arial Black 14.9
Balloon Bd BT 12.9
Balloon Lt BT 11.9
Batang 10.9
BatangChe 10.9
Bitstream Vera Sans 12.9
Bitstream Vera Sans Mono 12.9
Bitstream Vera Serif 12.9
Book Antiqua 12.9
Bookman Old Style 12.9
Bookshelf Symbol 7 10.9
Bradley Hand ITC 12.9
Browallia New 11.9
BrowalliaUPC 11.9
Calibri 10.9
Cambria 12.9
Cambria Math 12.9
Candara 10.9
Comic Sans MS 14.9
Consolas 10.9
Constantia 10.9
Corbel 10.9
Cordia New 11.9
CordiaUPC 11.9
Courier New 11.9
DaunPenh 13.9
David 10.9
DejaVu Sans 12.9
DejaVu Sans Condensed 12.9
DejaVu Sans Light 12.9
DejaVu Sans Mono 12.9
DejaVu Serif 12.9
DejaVu Serif Condensed 12.9
DFKai-SB 10.9
Dialog 12.9
DialogInput 13.9
DilleniaUPC 6.9
DokChampa 12.9
Dotum 10.9
DotumChe 10.9
Estrangelo Edessa 11.9
EucrosiaUPC 6.9
Euphemia 13.9
FangSong 10.9
Franklin Gothic Medium 11.9
FrankRuehl 10.9
FreesiaUPC 6.9
Gautami 17.9
Georgia 11.9
Gisha 12.9
Gulim 10.9
GulimChe 10.9
Gungsuh 10.9
GungsuhChe 10.9
Helsinki 20.9
Helsinki Metronome 20.9
Helsinki Special 29.9
Helsinki Text 13.9
Impact 12.9
Inkpen2 20.9
Inkpen2 Chords 16.9
Inkpen2 Metronome 20.9
Inkpen2 Script 11.9
Inkpen2 Special 29.9
Inkpen2 Text 18.9
IrisUPC 6.9
Iskoola Pota 11.9
JasmineUPC 6.9
KaiTi 10.9
Kalinga 15.9
Kartika 14.9
KodchiangUPC 6.9
Latha 17.9
Leelawadee 12.9
Letter Gothic Line 8.9
Levenim MT 14.9
LilyUPC 10.9
Lucida Bright 12.9
Lucida Console 10.9
Lucida Handwriting 14.9
Lucida Sans 12.9
Lucida Sans Typewriter 12.9
Lucida Sans Unicode 15.9
Malgun Gothic 13.9
Mangal 17.9
Marker Felt Thin Plain 11.9
Marlett 9.9
Meiryo 15.9
Microsoft Himalaya 10.9
Microsoft JhengHei 13.9
Microsoft Sans Serif 11.9
Microsoft Uighur 10.9
Microsoft YaHei 13.9
Microsoft Yi Baiti 10.9
MingLiU 10.9
MingLiU-ExtB 10.9
MingLiU_HKSCS 10.9
MingLiU_HKSCS-ExtB 10.9
Miriam 10.9
Miriam Fixed 10.9
Mongolian Baiti 11.9
Monospaced 13.9
MoolBoran 13.9
MS Gothic 10.9
MS Mincho 10.9
MS PGothic 10.9
MS PMincho 10.9
MS UI Gothic 10.9
MV Boli 16.9
Narkisim 10.9
NSimSun 10.9
Nyala 9.9
OCR A Extended 10.9
OpenSymbol 12.9
Opus 20.9
Opus Chords 13.9
Opus Chords Sans 13.9
Opus Chords Sans Condensed 13.9
Opus Figured Bass 13.9
Opus Figured Bass Extras 13.9
Opus Function Symbols 18.9
Opus Metronome 20.9
Opus Note Names 20.9
Opus Ornaments 20.9
Opus Percussion 11.9
Opus PlainChords 14.9
Opus Roman Chords 9.9
Opus Special 29.9
Opus Special Extra 20.9
Opus Text 13.9
Palatino Linotype 10.9
Plantagenet Cherokee 13.9
PMingLiU 10.9
PMingLiU-ExtB 10.9
Raavi 17.9
Reprise 10.9
Reprise Chords 16.9
Reprise Metronome 18.9
Reprise Rehearsal 10.9
Reprise Script 10.9
Reprise Special 28.9
Reprise Stamp 10.9
Reprise Text 18.9
Reprise Title 7.9
Rod 10.9
SansSerif 12.9
Segoe Print 17.9
Segoe Script 16.9
Segoe UI 13.9
Serif 12.9
Shruti 17.9
SimHei 10.9
Simplified Arabic 17.9
Simplified Arabic Fixed 11.9
SimSun 10.9
SimSun-ExtB 10.9
Sylfaen 10.9
Symbol 12.9
Tahoma 12.9
Tiger Rag LET 12.9
Times New Roman 11.9
Tiresias Infofont 10.9
Tiresias Infofont Z 10.9
Tiresias Keyfont V2 10.9
Tiresias LPfont 10.9
Tiresias PCfont Z 12.9
TiresiasScreenfont 13.9
Traditional Arabic 15.9
Trebuchet MS 12.9
Tunga 17.9
Verdana 12.9
Vrinda 14.9
Webdings 10.9
Wingdings 11.9

I have implemented a offsetting correction in the JDisplay listings
coloriser system so that fonts are a standard size, despite the font
designer's artistic licence to make them big or small. I have not yet
figured out how to pull this off in CSS.

--
Roedy Green Canadian Mind Products
http://mindprod.com

There is one brain organ that is optimised for understanding and articulating logical processes, and that is the outer layer of the brain, called the cerebral cortex. Unlike the rest of the brain, this relatively recent evolutionary development is rather flat, only about 0.32 cm (0.12 in) thick, and includes a mere 6 million neurons. This elaborately folded organ provides us with what little competence we do possess for understanding what we do and who we do it.
~ Ray Kurzweil (born: 1948-02-12 age: 61)

 

[Jeffrey H. Coffield]

I decided to measure just how big various fonts really are in pixels.
The variance is quite astounding.

In typesetting, a 10 point font doesn't mean the characters are 10
points high, the 10 points (or 10/72 inches) is the vertical distance
from the baseline of one row of characters to the next baseline. Not all
the new fonts work this way but for most normal fonts an upper case A is
around 70 to 75 percent of the point size set for a font.

The Java font model does not follow traditional typesetting in this and
several other areas. The biggest irritant for me is the assumption that
a font can only be plain, bold, italic or bold+italic. I have 14
variations of Bodoni, 12 for FranklinGothic, etc. This, plus having the
font name change depending on the OS led me to write my own version of
JFontChooser that gets it's font list and fonts from a central font
server (a normal web server with the fonts on it).

Jeff Coffield

 

[alexandre_paterson]

I decided to measure just how big various fonts really are
in pixels. The variance is quite astounding.

What about the *same font* under Windows / OS X and under
Java 1.5 / 1.6 ?

At various sizes (probably especially at smaller sizes),
I'm pretty sure there are notable differences
due to differences in the rendering engines.

Which is similar to the problem a lot of web designer
are confronted to:

http://tinyurl.com/3a34ke

 

[RedGrittyBrick]

I decided to measure just how big various fonts really are in pixels.
The variance is quite astounding.
http://nwalsh.com/comp.fonts/FAQ/cf_8.htm


Here is my code to do it.
final LineMetrics lm = f.getLineMetrics(
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnoprstuvwxyz01234567809()[]{}",
fr );

Isn't that measuring the distance from lowest descender to highest
ascender? You are omitting the leading.

The designer's intended interline spacing may be more interesting or useful.

http://java.sun.com/javase/7/docs/api/java/awt/FontMetrics.html#getHeight()

I have implemented a offsetting correction in the JDisplay listings
coloriser system so that fonts are a standard size, despite the font
designer's artistic licence to make them big or small.

Isn't that what they are paid for?

I have not yet figured out how to pull this off in CSS.

Phew!

Is this any use?
http://www.w3schools.com/css/pr_dim_line-height.asp

 

[Roedy Green]

What about the *same font* under Windows / OS X and under
Java 1.5 / 1.6 ?

At various sizes (probably especially at smaller sizes),
I'm pretty sure there are notable differences
due to differences in the rendering engines.

To answer that question, run FontShower as an app under those various
runtimes and look at font metric numbers it produces.
--
Roedy Green Canadian Mind Products
http://mindprod.com

There is one brain organ that is optimised for understanding and articulating logical processes, and that is the outer layer of the brain, called the cerebral cortex. Unlike the rest of the brain, this relatively recent evolutionary development is rather flat, only about 0.32 cm (0.12 in) thick, and includes a mere 6 million neurons. This elaborately folded organ provides us with what little competence we do possess for understanding what we do and who we do it.
~ Ray Kurzweil (born: 1948-02-12 age: 61)

 

[Roedy Green]

Phew!

This font size varying so widely cause big problems with CSS. You
specify a list of possible fonts for a style. Which one gets picked
depends on what the user has installed. Suddenly type grows or
shrinks for that style to double the size you intended! This is NOT a
good thing.

--
Roedy Green Canadian Mind Products
http://mindprod.com

There is one brain organ that is optimised for understanding and articulating logical processes, and that is the outer layer of the brain, called the cerebral cortex. Unlike the rest of the brain, this relatively recent evolutionary development is rather flat, only about 0.32 cm (0.12 in) thick, and includes a mere 6 million neurons. This elaborately folded organ provides us with what little competence we do possess for understanding what we do and who we do it.
~ Ray Kurzweil (born: 1948-02-12 age: 61)

 

[Roedy Green]

In your FontShower, on my PC, Gautami and Biondi are near the extremes.
Gautami needs the extra interline spacing to allow room for Telugu vowel
signs above and below the glyphs. If you force the interline spacing to
be halved you may render the text unreadable in some languages.

I am not including those outliers. Here are some real world CSS
font-family statements:

font-family: Consolas,"Bitstream Vera Sans Mono","Lucida
Console","Lucida Sans","Lucida Sans Unicode","Courier New","Segoe
UI",Arial,monospace;

font-family: "Segoe Print","Lucida Console","Courier New",monospace;

font-family: "Lucida Console","Bitstream Vera Sans Mono","Lucida
Sans","Lucida Sans Unicode","Courier New","Segoe UI",Arial,monospace;

font-family: garamond,palatino,cursive,serif;

font-family: "Tiresias PCfont Z","Palatino Linotype","Bookman Old
Style","Book Antiqua","Trebuchet MS","Lucida Sans","Lucida Sans
Unicode",Verdana,serif;

font-family: "Comic Sans MS",Arial,helvetica,sans-serif;

font-family: Arial,"Arial Black",sans-serif;

font-family: Calibri,"Bitstream Vera Sans","Segoe
UI",Arial,helvetica,sans-serif;

font-family: Calibri,"Bitstream Vera Sans","Segoe
UI",Arial,Helvetica,sans-serif;

font-family: "Bitstream Vera Sans Mono","Lucida Console","Lucida
Sans","Lucida Sans Unicode","Courier New","Segoe UI",Arial,monospace;
--
Roedy Green Canadian Mind Products
http://mindprod.com

There is one brain organ that is optimised for understanding and articulating logical processes, and that is the outer layer of the brain, called the cerebral cortex. Unlike the rest of the brain, this relatively recent evolutionary development is rather flat, only about 0.32 cm (0.12 in) thick, and includes a mere 6 million neurons. This elaborately folded organ provides us with what little competence we do possess for understanding what we do and who we do it.
~ Ray Kurzweil (born: 1948-02-12 age: 61)

 

[Eric Sosman]

This font size varying so widely cause big problems with CSS. You
specify a list of possible fonts for a style. Which one gets picked
depends on what the user has installed. Suddenly type grows or
shrinks for that style to double the size you intended! This is NOT a
good thing.

When your eyes grow as old as mine, Roedy (and I thought
they already had?), you may come to value the ability to
override some youngster's notion of what's legible.

(One site I view frequently offers a whole pile of Web
pages with body text so small I couldn't have read it when I
was twenty and twenty-twenty. Six pixels tall, tops, for the
capitals; less for most lower-case letters. Oh, sorry, I mean
"lower-case blots." Maybe the site thinks their pages will
load faster if the fonts are small ... Thank goodness for
"CTRL+"!).

 

[RedGrittyBrick]

I am not including those outliers. Here are some real world CSS
font-family statements:

font-family: Consolas,"Bitstream Vera Sans Mono","Lucida
Console","Lucida Sans","Lucida Sans Unicode","Courier New","Segoe
UI",Arial,monospace;

People who write such lists don't know what they are doing.

I imagine all readers of this newsgroup do. Just in case, here what I
thought these lists were for.

The first typeface in the list is the one the web-page designer would
like to be used, the second is the one the designer would like to be
used if the first typeface is not available on the user's computer. The
second typeface should be very similar to the first (otherwise - what's
the point?). The last typeface in the list is a last-resort. Last
resorts fall into three categories: serif, sans and monospaced. All the
prior items in a sane list should also fall into the same one of these
three categories. The earlier entries in the list should probably fally
into a narrower category of typeface.

You could probably disregard the above for headlines composed of
decorative typefaces. You could probably disregard the above if you
intend your web page to look wildly bohemian and jarring for artistic
reasons. In those cases I'd expect the designer to be choosing typefaces
carefully to have the desired effect.

font-family: "Segoe Print","Lucida Console","Courier New",monospace;

That would make sense to me if the first one was Segoe UI Mono - In
other words monospaced rather than script style.

font-family: "Lucida Console","Bitstream Vera Sans Mono","Lucida
Sans","Lucida Sans Unicode","Courier New","Segoe UI",Arial,monospace;

font-family: garamond,palatino,cursive,serif;

font-family: "Tiresias PCfont Z","Palatino Linotype","Bookman Old
Style","Book Antiqua","Trebuchet MS","Lucida Sans","Lucida Sans
Unicode",Verdana,serif;

Utterly bonkers.

font-family: "Comic Sans MS",Arial,helvetica,sans-serif;

font-family: Arial,"Arial Black",sans-serif;

font-family: Calibri,"Bitstream Vera Sans","Segoe
UI",Arial,helvetica,sans-serif;

font-family: Calibri,"Bitstream Vera Sans","Segoe
UI",Arial,Helvetica,sans-serif;

font-family: "Bitstream Vera Sans Mono","Lucida Console","Lucida
Sans","Lucida Sans Unicode","Courier New","Segoe UI",Arial,monospace;

For the purposes of this discussion I think we should disregard the
craziest of the compositions above.

Specifically which of the above typefaces do you consider to have
inter-line spacing that is inappropriate or inconsistent with those of
the others in the same list?

If so, why would you include it in the list?

 

[Roedy Green]

Utterly bonkers.

This a selection for body type. Tiresias is free font you need to
install. It has special legibility properties. See
http://mindprod.com/jgloss/tiresias.html


You want to consider the beauty of the font, the "tone" of the font --
e.g. old fashioned, friendly, business-like, eccentric, unique.

You want to consider how well the font renders on Windows. Some fonts
use sub-pixel Clear-type optimisation. However, these fonts won't be
available elsewhere.

You have to consider likely availability.

Having to consider quirkiness in true font size is an unnecessary
complication.

Perhaps what might help given the current situation is a tool to edit
your style sheets so you can see how your web pages would render if
various fonts were or were not locally available.

One thing I have discovered is that a font that is very appealing seen
in a small isolated sample can be completely wrong when seen in a big
block or context with some other font.


--
Roedy Green Canadian Mind Products
http://mindprod.com

When you can’t find a bug, you are probably looking in the wrong place. When you can’t find your glasses, you don’t keep scanning the same spot because you are convinced that is where you left them.
~ Roedy

 

[Roedy Green]

When your eyes grow as old as mine, Roedy (and I thought
they already had?), you may come to value the ability to
override some youngster's notion of what's legible.

This is a different problem. The true font size problem causes
unintended variations in font size WITHIN a page or website.

Some websites use unusually large or small type throughout. You can
fix that with the browser zoom, though the fool browsers don't
remember your zoom setting on a per-website basis.

Without glasses, I can still read the bottom line on the close up eye
chart. However, I tend to design my website with slightly bigger than
usual fonts to make it easier for the average visitor to read.

I aim at the newbie who may not even know about the zoom feature.
I get a small amount of email thanking me for doing that.


--
Roedy Green Canadian Mind Products
http://mindprod.com

When you can’t find a bug, you are probably looking in the wrong place. When you can’t find your glasses, you don’t keep scanning the same spot because you are convinced that is where you left them.
~ Roedy

 

[John B. Matthews]

When your eyes grow as old as mine, Roedy (and I thought
they already had?), you may come to value the ability to
override some youngster's notion of what's legible.

Not too long ago, I asked the ophthalmologist if the optometrist could
instruct the optician to grind single-focus lenses optimized to my usual
desktop viewing distance. I shouldn't have been surprised to learn that
it was a common request. Recycling old frames and declining the common
frills, I got an inexpensive pair of "computer" glasses to complement my
bifocals. They're great, as long as I don't try to drive with them.

 

[RedGrittyBrick]

Sorry, that was rude of me.

I mean that it has a mixture of serif and non-serf typefaces. I find
that rather a surprising thing to do.

This a selection for body type. Tiresias is free font you need to
install. It has special legibility properties. See
http://mindprod.com/jgloss/tiresias.html


You want to consider the beauty of the font, the "tone" of the font --
e.g. old fashioned, friendly, business-like, eccentric, unique.

You want to consider how well the font renders on Windows.

And on iPhones etc?

Some fonts
use sub-pixel Clear-type optimisation. However, these fonts won't be
available elsewhere.

You have to consider likely availability.

And likelihood of visitors downloading and installing it?

Having to consider quirkiness in true font size is an unnecessary
complication.

Which of the above have quirky interline spacing?

Perhaps what might help given the current situation is a tool to edit
your style sheets so you can see how your web pages would render if
various fonts were or were not locally available.

In your HTML you can specify named alternate styles. In Firefox you can
then select from those alternate styles. See menu View, Page Style.

In Firefox (and many other browsers) you can override the fonts
specified in the web page. This probably wouldn't do all you want.

There are plugins for Firefox that might.
E.g. https://addons.mozilla.org/en-US/firefox/addon/2108

One thing I have discovered is that a font that is very appealing seen
in a small isolated sample can be completely wrong when seen in a big
block or context with some other font.

Which may be an argument for selecting fonts which were designed to be
used together. Perhaps the fonts that Microsoft commissioned from
Matthew Carter would form such a set?

 

[John B. Matthews]

Isn't that just "reading glasses" ?

Good question. Over-the-counter reading glasses are usually symmetric,
so I'd think you wouldn't get as good a correction for, say, astigmatism
And no glaucoma screening, either. Of course, not all opticians are
equally reliable, either.

IANAOOOOJASC [I am not an ophthalmologist, optometrist or optician, just
a satisfied customer.]

 

[Lew]

IANAOOOOJASC [I am not an ophthalmologist, optometrist or optician, just
a satisfied customer.]

Given that the list of professions one does not follow is far lengthier than
the list of professions that one does follow, why single out any one,
particularly when there is no implication in the conversation that one is of
that profession?

I am not an airplane mechanic.

 

[Eric Sosman]

Not too long ago, I asked the ophthalmologist if the optometrist could
instruct the optician to grind single-focus lenses optimized to my usual
desktop viewing distance.

"The King asked the Queen, and the Queen asked the Dairymaid"

I shouldn't have been surprised to learn that
it was a common request. Recycling old frames and declining the common
frills, I got an inexpensive pair of "computer" glasses to complement my
bifocals. They're great, as long as I don't try to drive with them.

Sounds like something worth trying. Quite recently I
suffered through a MANDATORY series of on-line training courses
(best forgotten), all implemented in Flash, immune to the browser's
magnification controls. The fonts came out teeny-tiny; the only
thing that saved me was that even upon enlargement (reading glasses
*and* a hand-held magnifier, it turned out that the message conveyed
by the itsy-bitsy glyph-ghosts was mostly free of meaningful content
and could be safely ignored.

A plea to Web designers and others who put together
presentations and displays of various kinds: Please do not
value your own oh-so-gorgeous layout over the reader's ability
to read! Your reader may, like me, be an aging dinosaur with
feeble eyes, or may be a young sharp-eyed person who wants to
view your material on a tiny cell phone screen -- either way,
if you insist on your layout to the exclusion of legibility you
might as well just scrap the text and show pretty pictures.
Pre-literacy rulez, o Weh!

 

[John B. Matthews]

IANAOOOOJASC [I am not an ophthalmologist, optometrist or optician,
just a satisfied customer.]

Given that the list of professions one does not follow is far
lengthier than the list of professions that one does follow, why
single out any one, particularly when there is no implication in the
conversation that one is of that profession?[/QUOTE]

I'm not an eye care professional, but I encourage people to visit their
preferred eye care professional regularly. Conversely, I would consider
it unethical to give even the appearance of discouraging proper eye care.

I was also exaggerating the familiar IANAL.

I am not an airplane mechanic.

Nor am I, but I've collaborated on software used by airplane mechanics.
If there was any confusion, I'd consider an appropriate disclaimer.

 

[Martin Gregorie]

A plea to Web designers and others who put together
presentations and displays of various kinds: Please do not value your
own oh-so-gorgeous layout over the reader's ability to read!

Another crime committed by bad designers, especially those who think Word
is a fit tool for building web pages, is to think that HTML is for
writing WYSIWYG pages. It's not and never has been designed for that.

Good web designers accept that users must have the ability to override
the font, size, backgrounds etc, on their pages to suit their screen
size, browser capability and eyesight.

My pages are tested in Opera and Firefox, but not IE since I ditched
Windows. I also periodically check my pages with Lynx. Do you?

 

[Roedy Green]

I mean that it has a mixture of serif and non-serf typefaces. I find
that rather a surprising thing to do.

Agreed, but it is not as though you are mixing the fonts on the same
screen. It just reflects the possibility of using a serif or
sans-serif body font.

Though fonts are nominally serif or sans-serif, it is actually a
gradation.

For example Consolas has a serifed l. Lucida Sans Unicode has quite
variable stroke widths, more typical of a serif font.

Palatino Linotype has quite extreme serifs, as does Courier New and
TimesRoman.

Garamond and Constantia are pruned.
--
Roedy Green Canadian Mind Products
http://mindprod.com

When you can’t find a bug, you are probably looking in the wrong place. When you can’t find your glasses, you don’t keep scanning the same spot because you are convinced that is where you left them.
~ Roedy