Are web-fonts optimised for even number px/pt size rather than odd?

noblematt's picture

I've been doing a hell a lot of research on how web typefaces work and render to the point where my boss now believe us as a graphics agency are the most knowledgeable people in London if not the UK.

(I'll give you a hint, there are very few web typefaces that truly are web fonts.)

Anyway I've been testing hand hinted typefaces at the sizes we use in the coded website (13pt and 15pt) and even these hand hinted typefaces have rendering issues at this size. However if I render them at say 14pt they seem to improve.

Can anyone (possibly someone who hints fonts for a living) rationalise this for me? Is there some reason im not seeing that could explain why fonts seem to render better in even numbers over odd numbers?

Matt Noble
Scheybeler+company

Frode Bo Helland's picture

Hand hinted? What does it mean in this case?

hrant's picture

Some of it is tradition - in the metal days odd-number point sizes
above 12 were very rare. Since each size had to be made individually
you had to conserve your efforts, and 12 was an important point size*,
so the evens won out. Ironically nowadays, hand-hinting being roughly
comparable in terms of effort** concerning individual point sizes, when
one decides where to conserve effort, 13 and 15 are the first to go!

* Because it divides 72 evenly.

** It's interesting that historically the figure of 8 hours
per glyph was sort of a benchmark, and when I finished
Mana (http://www.themicrofoundry.com/manademo/)
I did the math and it came to about 8 hours per glyph!

BTW, do you plan on releasing your findings?

hhp

Richard Fink's picture

@noblematt

First, I don't understand why you are using CSS 'pt' units for font-size.

I can understand using 'pt' for print style sheets, but for web pages, it runs overwhelmingly counter to current practice which is to use 'px'. (There are some layout techniques which use ems and percents but that's the exception.)

What pixel sizes are we talking about?

I produce fonts for the web. I only test fonts in web browers. I do not use a "hand-hinting" program like VTT (Virtual True Type). I spend, probably, about 15 hours a week on hinting. I have a test suite of web pages made for examining the results of hinting and other important measures of a font's qualities.

(BTW - I have no idea what Hrant is talking about. [Sorry, Hrant. I can't make head or tail out of what you've written or it's relevance to screen rendering. To the point where I think you may have missed the point of the guy's question.] Being able to divide evenly into 72 has nothing to do with screen rendering.)

I DO know what you are talking about, however. Although it certainly doesn't happen with every font or even most fonts. When it happens, my guess is that the scale of the font - the way it's "quantized" - is coinciding in some way with the natural divisions imposed by the pixel grid, which causes irregularities that cause an on-again, off-again effect as you move up (or down) in pixel sizes. I HAVE seen it, and it's an interesting question.
For me, by the time I'm finished processing the font, the problem disappears so I haven't thought about the cause much.

What fonts are you looking at? Do you have any screenshots? If it's more convenient, feel free to contact me via email, FB, or leave a post on my blog.

Richard Fink
Blog: Readable Web
Type Director: Kernest/Konstellations

Oh, BTW - I'm deeply interested in what kind of font you consider truly a web font.

hrant's picture

Matt was wondering why some sizes (like 13 and 15) don't
look as good (onscreen) as some other sizes, in some fonts.
This is because the fonts in question have been optimized
more for certain sizes and not others. I tried to explain how
a type designer might go about deciding what sizes to work
on more (since Design is essentially about compromise).

hhp

dezcom's picture

The pixel vs point naming of type sizes has gone the way of 72 points equal an inch. In metal type, it just ain't so but it is so damn close that software developers just rounded it to align with the inch ruler. There was a fuss about this early on but the number of metal type purists has shrunk quite a bit since then. Adobe software sizes a point as equaling a pixel. This is not a problem because pixel sizes vary with whatever set-up you are looking at. Matt is perfectly fine using point size names on the web or screen. It only really matters when you try to use "pixel" sizes when doing print work. Since pixel size is variable,it can be a real problem using the term for print purposes. The other way is no problem with a wink and a nod.

Hrant is correct in his first post about metal type sizes and even numbers. Since this is a moot point in todays technology, it does not matter much. What DOES matter is how a typeface is fitted to the grid that a screen uses to show type. Where does the x-height hit,the sidebearings, crossbars, spaces, punctuation, etc..

Matthew Carter's web standard fonts were meticulously fitted to the pixel grid and work quite well. Stem widths and counters that are even multiples of the pixel grid look great at the sizes they were fit to. If your type looks great at a 2 pixel stem with, etc., when you size up by one point size, you knock it all haywire and nothing fits very well.
Rather than standardizing your font sizes on a given point size as a firm rule, you should first try out the typefaces you will really be using and find their sweet spot size. You may find that Font X works best at 13 px but Font Y is best at 14 px. You will need to fix your CSS to jive with your chosen font, not just in name, but in size as well. Hinting will certainly help but being careful to mach font to fit size to sweet-spot on screen really matters.

Thomas Phinney's picture

"Matt is perfectly fine using point size names on the web or screen."

I don't think so. My evidence is that you go on to claim that px=pt, and it ain't so. Which clearly proves that there is some ambiguity there. :/

Browsers say that px x 3/4 = pt. Or if you prefer, pt x 4/3 = px. This is being enshrined in CSS 3. It originates from Windows with its former assumption of 96 dpi screens. So 13 pt = ~17 px, and 15 pt = 20 px.

Mac OS used to say that px=pt (assuming 72 dpi screens), but I gather that even Safari has now compromised to be consistent with the rest of the web. If there are Adobe apps that still use px=pt, they are out of sync with the rest of the world now.

Cheers,

T

Bert Vanderveen's picture

Common practice in CSS is to use a Reset, thereby syncing Win and Mac to the same base em. Factors of 76% and 81% are the most used ones.

CSS3 has a new font-feature, called font-size-adjust, that can be used to harmonize cap- or x-heights.

Typography IS getting better on the web.

Thomas Phinney's picture

Well, modern WIn and Mac browsers use the same base em for the web anyway, making the reset unnecessary for cross-platform reasons (though there may be other reasons). And all this just makes it worse in terms of understanding the actual size in px of the resulting font on screen. :(

dezcom's picture

That is why you always have to test what you want to use.

Té Rowan's picture

There are other reasons indeed. Not everybody has the latest versions of everything, so using a reset.css helps to make sure that as many as possible are on the same hymnsheet (or stylesheet as it were) re indents, line spacing and all that.

riccard0's picture

Except that, more often than not, lazy web designers use resets because someone told them so (or, even ofter, they don't even know they're using one, because they're simply [mis]using some "framework" or other). And, because, as Chris rightly points out, you should always test, and they don't, they throw away a lot of meaningful things.
Browsers' defaults could differ, but are there for a reason.

Richard Fink's picture

@hrant

Sorry, you're right. (Meaning, sorry, I was wrong.) I had to probe the prose a bit but he does seem to be talking about a range of small sizes.

Now, if we only knew what noblematt means by "hand hinting" and why he's using pts rather than pixels and that there is a 3:4 ratio between pt and px sizes (15pt == 20px) so the diff between 13pt and 14 pt might be rounding to no diff at all. (Don't know for sure without testing.)
And maybe he's using Firefox and has his browser set to 125% zoom and doesn't even know it.
And I'm sure glad his firm's selling the best pies in London, 'cause life is hard.

Give more facts noblematt, and maybe we can help.

Té Rowan's picture

@riccard0 -- When has that mattered to those web designers? They wanna be newspaper designers, FCOL!

Frode Bo Helland's picture

Sadly, this veered off topic. It's hard to answer because you don't say much about neither the issues nor the environment in which you are experiencing them. There is nothing inherent in y-direction truetype hinting (which is mostly what is offered nowadays) that will produce bad results for odd sizes. At least not that I can think of. If you target Win XP (y + x), and the hinting is poorly done (e.g. non-coherent and the resulting problems fixed with deltas), I can see some relevance to Hrants suggestion. On the other hand: I hint truetype and I'm way too young to remember metal type and I don't consider even numbers more important for on-screen rendering. I'd probably give equal attention to all sizes I find relevant for the face.

Thomas Phinney's picture

Agreeing with Frode for the most part.

Rich: "so the diff between 13pt and 14 pt might be rounding to no diff at all"

Urm, no, multiplying POINTS by 4/3 then rounding will always result in at least a one px difference, and occasionally a two px difference (one time in three), between consecutive point sizes. Going the other direction, two consecutive PIXEL sizes will round to no difference at all 1/4 of the time.

Richard Fink's picture

@riccard0

>Browsers' defaults could differ, but are there for a reason.

Check out the latest iteration of HTML5 Boilerplate. The resets on that take the approach you're suggesting. A more targeted approach. Change what needs changing.

@té Rowan
>@riccard0 -- When has that mattered to those web
>designers? They wanna be newspaper
>designers, FCOL!

There is - I don't know what to call it yet except an attitude - that web design is crude but that as time goes by it will become more refined and it therefore will come more and more to resemble graphic design.

This won't happen. There is nothing crude about a well-designed web site.
I suppose the scribes said something similar about the look of those books that guy Gutenberg was making.
They also said that all reggae music sounded the same and so stayed with Gregorian Chants.

Graphic design will (and is) beginning to resemble web design.

It all lies in your perception, not in the thing itself.

And incidentally, Rock'n'Roll is here to stay.

Té Rowan's picture

A well-designed website, yes. Of course, a well-designed site is quite different from a well-designed book or magazine. But that's a whole different Sabrina anyway.

Richard Fink's picture

@té
>Of course, a well-designed site is quite different
>from a well-designed book or magazine.

What's well-designed? In a relatively new medium it's tough to tell.
But Keith Richards still ain't playin' Mozart.

For example, I wrote an article awhile back on hyphenation and justification of web text. The reaction was underwhelming. 'Cause nobody gives a sh-t, clearly. And lately, the web design books I read are - guess what - all set left aligned and look like a column from a web site slapped onto paper. It's a style. And since book design is a practical craft the main question is whether or not it's bolstering the message and in that respect, no problem.
Not sure about the Sabrina reference but I liked the remake with Harrison Ford directed by Sidney Pollack (they did, too), even though the critics pissed on it. (Lesson: mess with films in the Pantheon at your own risk.)

@tp

On the font-size pt versus px rounding: I'm sure you're correct and/or more accurate than my comment.

Frode Bo Helland's picture

The response on your hyphenation article was underwhelming because I tried it and it didn't work, if I remember correctly. And maybe also because you have a tendency to hijack threads?

Richard Fink's picture

frode,

>if I remember correctly
Perhaps you should begin taking a memory supplement?
Technique works, worked. Sample pages still up and running on my server.

>hijack threads

Hijack - no, just having an auxiliary chat with Té I guess we found what you had to say rather uninteresting. And in case you haven't noticed, the guy who started the thread hasn't had the interest or good manners to follow up. So just keep quiet and you won't get hurt. All I want is the thread. Get out, now!

As far as the level of interest in H&J among web designers - kid yourself if you want, but it's way low. Presentation has nothing to do with it. I believe two browsers now support H&J natively. I've not seen one article about it.

Richard Fink
Blog: Readable Web
Type Director: Kernest/Konstellations

Frode Bo Helland's picture

I wouldn’t remember to take the pill, so no use. Let’s just keep this thread on topic :)

Té Rowan's picture

@Richard - I would not bet against the Keef playing Mozart. Or Beethoven.

Re the Sabrina reference... the key is 'a whole different X' or, rather, 'a completely different $NAME' where NAME can be just about any proper name or unit noun that makes sense to you.

Anyway, IMAO (when is my opinion not arrogant anyway?), a well-designed web site is or will be different from a well-designed book because the media are different. The book has potentially a fixed, very high dpi resolution and very precise placement of elements. The web site has neither. It doesn't even have a guaranteed form of user interface. A user may be viewing it on a large colour screen, a small monochrome screen or a VT102, or not viewing at all, but using a text-to-speech or text-to-Morse synth. For all I know, there might even be someone with an RJ45 Cat.6 jack in the skull.

Richard Fink's picture

@té

>@Richard - I would not bet against the Keef playing Mozart. Or Beethoven.
I would dig it, frankly. But Keith never struck me as having the broad improv chops for this. Too bad Zappa's gone. He could wail on a Mozart concerto. And I'll bet he did, in private.

> Anyway, ... a well-designed web site is or will be different from a well-designed book because the media are different. The book has potentially a fixed...

Whole paragraph true. But yet swaths of folks ACT like it isn't true. But it's not a new phenom.
I'd like to focus in on the word "fixed". Fixed media.
Fixed media versus Unfixed media sounds lame. And isn't very illuminating.

Do you like "Transigent Media"? I have a whole list going, and I keep coming back to 'transigent'.

And, BTW, I think the RJ45 jack in the skull or something like it will, ultimately be the next disruption. Thank heavens I most probably won't be alive for it.

Fixed versus Transigent media. It's got all the right connotations and it's a word going unused for anything else - you can find a definition for intransigent but none for transigent. And the meaning you would suppose it has by extrapolating out from "intransigent", works as a starting point.

Well, somebody has to think of these things, right? Lemme know.

Frode, you can let me know, too.

Thomas Phinney's picture

Rich: I think you want "transient" there. But even "transient" isn't quite right, that just implies impermanence, like ephemera. You need a word that suggests form change. Maybe "mutable"?

On the original topic again, I have seen cases where a manually hinted TTF got delta hints at some px sizes but not others, and there were some "oddball" sizes that were skipped. For example a font might get deltas at 9-16 and 18 px, but not 17 px.

Richard Fink's picture

@tp

On the original topic again, I have seen cases where a manually hinted TTF got delta hints at some px sizes but not others, and there were some "oddball" sizes that were skipped. For example a font might get deltas at 9-16 and 18 px, but not 17 px.

Was there an original topic? Jeez.
Oh yeah, Frode was bitchin' at me about that.

Yes, this gibes with what I've SEEN. But I didn't go digging into the TT hinting to see exactly what was going on. At some metrics you really have to look close to even see the "size" difference between pixel sizes. It's as much a shape difference as a size difference sometimes. (Small size settings, of course.)

Both "transient" and "mutable" on list. But transigent media is both mutable and transient. (See where I'm going with this? Transigent is an empty vessel, sitting there waiting for somebody to fill it up. It's like somebody put it on the "reserved for future use" list. I might as well claim it for this.)
Biggest problem for me is that it's little high-falutin'. A tad pretentious.
I've got my eye on "Loose Media", too. Fixed versus loose. But, of course, transigent media is loose. Or perhaps its transigent design that's loose?

(Yeah, yeah, I see it coming: And who let YOU loose, Fink?)

Té Rowan's picture

Or we might get ultraoriginal and think of it as a canvas. It's been used already? Oh, bletch.

I'll comment on hinting when I know more than ttfautohint cruddy.ttf >betterq.ttf

Thomas Phinney's picture

Rich: "But transigent media is both mutable and transient."

Well, no. It's a made-up backformation from "intransigent" (uncompromising), which comes from the French verb "transiger" which means "to compromise." It has too much of the wrong meaning already to be used in this way.

If you don't like "mutable," how about "protean"?

T

Té Rowan's picture

Still, web design's gotta be quite adaptive.

ObTopic: It's possible that the font renderer, the design and the trek birds' migration patterns make it look like the fonts tested are optimised for even px.

dezcom's picture

With print,the designer or compositor could control the piece of paper that the reader saw. Today, on-screen type on the Web is never a match to what the the originator made. Actually, tablets like iPad seem to be better at keeping consistency. Of course you have many user definable adjustments even there.

Richard Fink's picture

@tp
Well, no. It's a made-up backformation from "intransigent" (uncompromising), which comes from the French verb "transiger" which means "to compromise." It has too much of the wrong meaning already to be used in this way.

Thanks! Compromise is exactly the base meaning I'm looking for. But it's moot, I've called off the search. (But like Raymond Chandler wrote - the French have a word for everything.)
But words can mean whatever I want them to mean. Haven't you read "Alice In Wonderland"?

Thomas Phinney's picture

Rich: I don't think you pay them enough. ;)

Syndicate content Syndicate content