Webfonts rendering

Edvino's picture

I didn't find any similar threads on my question here so here goes:

I want to try out webfonts for a website I'm currently designing. But when i was about to order the font + webfont license i came across the gallery on myfonts.com which show renditions in different browsers. The Mac rendition looks fine. But the ie7 looks horrible. Is that still the ase for ie8 and ie9?
Will I have big problems with webfonts across platforms? Because that jagged looking version is really not appealing.

The example is not the font in question but the jaggedness is still the same.

jagged.jpg209.45 KB
John Hudson's picture

It should look better in IE9, which uses y-direction greyscale smoothing in combination with x-direction subpixel smoothing.

ebensorkin's picture

Unless the font has been specially engineered to solve for this ( most types are not ) you will get a fairly high contrast and even jaggy presentation in most windows browsers. All the font vendors are working to improve this but it will take time and the font you want is not guaranteed to ever be fixed. The thing to do is start assembling a list of the fonts you feel render well enough to use.

Also, the result you get from my fonts may not match that of another source.

It is also worth asking yourself how large you need to make the font before it works nicely. This will vary by font quite a lot. You will probably want to use it larger than that because people scale text up & down in size a great deal these days.

RE: IE9 - until IE9 has a genuinely dominant market share ( and even then!) this will still be an issue. Old browsers seem to take a long time to disappear.

Edvino's picture

Good. But how about ie8?

From the w3schools.com:
Browser statistics:
2011 Internet Explorer Firefox Chrome Safari Opera
May 24.9 % 42.4 % 25.9 % 4.0 % 2.4 %

2011 Total IE 9 IE 8 IE 7 IE 6
May 24.9 % 3.1 % 14.1 % 5.3 % 2.4 %
April 24.3 % 2.1 % 14.8 % 4.9 % 2.5 %
March 25.8 % 1.1 % 16.3 % 5.4 % 3.0 %

2011 Total FF 4.0 FF 3.6 FF 3.5 FF 3.0 Other
May 42.4 % 23.6 % 15.7 % 1.8 % 1.0 % 0.3 %
April 42.9 % 15.7 % 23.8 % 2.1 % 1.1 % 0.2 %
March 42.2 % 5.2 % 32.9 % 2.5 % 1.3 % 0.3 %

As we see from the numbers people are slowly moving over to the new browsers (which I hope has some kind of smoothing)

But most people will still see the webfonts jagged? Me not like.

John Hudson's picture

Eben, the issue Edvino is pointing to isn't something that can be readily addressed at the font level. It is due to the fact that GDI versions of ClearType, as used in IE prior to version 9, apply subpixel smoothing in the x-direction but no smoothing at all in the y-direction. This is fine at small sizes -- better, I would say, than applying y-direction smoothing at those sizes as it maintains stroke density -- but at larger sizes the type will look jagged. No amount of font engineering will resolve this, because it is a renderer issue.

IE9 uses the newer, DWrite version of ClearType, which smooths in the y-direction and so looks better at larger sizes.

dberlow's picture

>...sizes -- better, I would say, than applying y-direction smoothing at those sizes as it maintains stroke density...

Y Hinting maintains stroke density just fine. Y aliasing was an admitted and costly mistake.

ebensorkin's picture

Who is "admitting" this? Why costly?

Edvin seems to prefer the Mac rendering (not that he is right or wrong but...) which has Y dir rendering.

John, what if you have set grid fitting to symmetric smoothing + grid fit and symmetric smoothing, and also put this in the PREP table?


Would this help?

John Hudson's picture

David: Y aliasing was an admitted and costly mistake.

As implemented, yes. Providing the possibility of aliasing in the y-direction at text sizes, via the gasp table, is a good thing, but enforcing aliasing at all sizes was a bad mistake.

Personally, I think the gasp table should be extended to allow a whole range of different, size-specific rendering possibilities, including control of both bitmap rendering and spacing. This would enable one not only to determine at what sizes and in which directions what form of smoothing would be applied or not applied, it would also allow us to snap to full pixel grids for spacing at specific sizes and allow intermediate sizes to float in subpixel positioning environments.

However, the growing prevalence of pinch-zooming in mobile devices makes mechanisms that introduce non-linear text scaling unpopular among UA developers.

John Hudson's picture

Eben, the issue here is hardcoded in GDI ClearType: it doesn't know how to do symmetric smoothing.

If you look at the latest gasp table spec, you'll see that the same flags have different meanings when applied to 'Font Smoothing' (non-CT aliasing/antialiasing) and 'ClearType with Symmetric Smoothing' (as in DWrite ClearType). GDI ClearType effectively ignores the gasp table: it is a fixed state for all sizes: x-direction subpixel smoothing and y-direction aliasing. As far as I'm aware, this can't be changed at the font level because when GDI ClearType was shipped Beat hadn't yet implemented symmetrical smoothing.

dberlow's picture

JH>I think the gasp table should be extended to allow a whole range of different, size-specific rendering possibilities...

Play this out in reality, and you'll see just how problematic that idea is.

Are not 1000s fonts in the real windows world Gasp table challenged? web sites showing up on windows with a variety of renderings on the page is wrong ain't it? And both platforms are so background challenged, there is no right answer left there is there? And no matter what you do, the GDI widows user gets crap at display sizes, right? Should I take ya on an international tour of this issue? Hasn't CSS added a whole slew of options to befuddle this further? Isn't the motive for letting otherwise useless CFF fonts on windows a big glob of web font goo to solve part of this? CSS/@FF is not good at dynamic font decisions is it?

ES>Who is "admitting" this? Why costly?

who do you think would have to admit such a thing? See above for costly, compared to the Mac, where rendering may be disagreeable to Windows users, but they don't use the Mac, so who cares;)

John Hudson's picture

David: web sites showing up on windows with a variety of renderings on the page is wrong ain't it?

I'm not convinced that it is wrong. Who was complaining in the pre-ClearType days when the same font was an aliased bitmap at text sizes and smoothed at larger sizes? Who, even was complaining when the same size of type was aliased in the roman but antialiased in the bold? GDI ClearType, by contrast, tried to apply the same rendering method to every size of every font, and isn't that what we're saying is wrong?

As for legacy problems, the only way to resolve them is to leave them further and further behind until the last person using IE6 on Windows XP is carried out in a box.

I'm more concerned with the new problems coming down the pipe to a user's computer near you, but which there may be time to address before they become entrenched legacy problems. You and I have both spent time recently creating fonts that are tailored to full pixel grids at specific sizes (sorry, mine not released yet and I can't talk about them), but that careful work is wrecked in subpixel spacing environments if those fonts are preceded in the line of text by fonts that are not designed to the grid: our full font grid gets shifted off the full pixel boundaries. That isn't a problem affecting thousands of fonts in circulation and in legacy environments: it is a problem affecting your latest attempts to deal with those older problems.

dberlow's picture

>it is a problem affecting your latest attempts....

My latest attempts? (Are actually immune to all such things, entirely).

hrant's picture

> rendering may be disagreeable to Windows users

Personally, I don't care about the platform. My contention has been -and remains- that it's disagreeable to the human reading system. The purist in me would add that it is also a waste of potential, hence culturally impoverished.


dberlow's picture

Hrant talking about the web, I assume, and I agree.

Richard Fink's picture

>As for legacy problems, the only way to resolve them is to leave them further and >further behind until the last person using IE6 on Windows XP is carried out in a box.

Hudson make funny. Richie LOL.

dberlow's picture

>...until the last person using IE6 on Windows XP is carried out in a box.

I wish it were the software alone, we are waiting fer ta die, but unfortunately, on windows, it's also the resolution of the boxes.

Richard Fink's picture

>it's also the resolution of the boxes.

True, but not really an OS specific issue seems to me. I'm assuming you're talking about pixel density. And fonts on my Mac 23" screen are a very far cry away from the same fonts on my iPhone4's Retina display.
It will take a very long time, but I'm hoping just to see some progress in the middle somewhere.
A pixel density of about 130 ppi - as I've got on my wife's new HP Slate - even does GDI rendering a lot of good compared to the standard desktop LCD.
How soon and at what price we'll see large desktop screens like that, I have no idea.

Retina-like 234 ppi on the desktop? Well, I'm also hoping for advances in medical science so's I can live to see it! I don't want to be the guy carried out in the box!

hrant's picture

Two things to consider about "actual-computer" systems:
1) A computer screen is viewed at a greater distance than a portable device, so the ppi doesn't need to be as high.
2) The more the pixels, the lower the performance. A 23" screen at a "Retina-like" resolution would be a major drag on some combination of: performance, portability, battery life and the wallet!


dberlow's picture

One thing to keep in mind about "actual-expertise" in crude media type designers, I know.;)

hrant's picture

You mean like making Arabic work on an 8×7 grid, using byte code, which I did at 13?


dberlow's picture

Good for you. But I mean continuing on non-stop until that dang Arabic works at all sizes from a single outline font for all rendering techniques with modern OT technology and effects that are reactive to adaptive layout and user needs.

hrant's picture

I have no doubt that you have more experience.
But each one of us has something to contribute.


dberlow's picture

Of course, but intsead of contributing stuff along the road, or making things that run on the road, we are stuck by the powers that be, building the surface, over and over, except when we are explaining it over and over.

John Hudson's picture

I think it is more the case that the powers that be keep introducing new surfaces, and the tanks that we built to go up the last gravel hill can't be used in the wooden velodrome.

John Hudson's picture

David: ...on windows, it's also the resolution of the boxes.

To clarify, do you refer to:

a) the resolution being frequently too low for the rendering methods employed;

b) the wide range of resolutions and total lack of standardisation of pixel densities across different PC screen manufacturers;

c) the lack of any directly compatible resolution between Windows and Mac;

d) all of the above?

dberlow's picture

John, let me be clear. Regardless of GDI vs DW, and only on Windows below 100 dpi for readers at a normal distance for those screen sizes present, CT Does Not "effectively triple the resolution". This was the founding lie of CT. The lie and the rendering does cripple the web fonts thingy going forward as much type simply does not survive unhinted and unquantized x direction shapes, kerning, angles and composite instructions.

MS has paid dearly for developers to fix these issues to be better with deltas in their system fonts, linking to a white lie about wanting to escape deltas. Those developers have collaborated in the distancing of system fonts from what can be reasonably achieved in web fonts for this area of windows users, and the liars have moved on to the inexpert typographic pastures they could never have left in a real meritocracy, leaving me alone to explain the truth at my own expense. I'm just now finally warming to the task ;)

b and c are tangential, and d... Not so much.

gferreira's picture

@dberlow You are not alone. (+ different explanations are possible)

John Hudson's picture

+ different explanations are possible

No, no. Only David's explanations are possible.

David: Regardless of GDI vs DW, and only on Windows below 100 dpi for readers at a normal distance for those screen sizes present, CT Does Not "effectively triple the resolution".

Did anyone claim that CT effectively triples the resolution of the device for the reader? There is no sense in which that statement can be understood as true. What CT does (and other subpixel rendering technologies) is to effectively triple the resolution available to the sampler and hence to representing the characteristics of the typeface design. Simply put, you triple the number of discreet addressable device elements, which means that aspects of glyphs which formerly would have to either distorted through rounding to a full pixel (aliased) or degraded through reduction in stroke density (greyscale antialiasing) can be rendered with less distortion and less degradation. This is most obviously seen in CT rendering of diagonal strokes, which were typically subject to most distortion or degradation in non-subpixel rendering.

But then I'm the one who has always said that antialiasing in general, and CT no exception, is primarily about making typefaces look like typefaces -- What You See Is What Looks More Like Times New Roman Than Lego -- and not about reading.

dberlow's picture

I don't like your tone John, but I will reply, once again, like a patient and true constitutionalist trying to have civli discourse with a constitutionally ignorant tea party bigot, I point you to the description of ClearType in the Wikipedia, where a dozen other falsehoods i did not write, reside at the apparent pleasure of CTs funding fathers.

For crystal clear search instructions on google pair the phrase "effectively triples" with the word Cleartype, you know how to do that I think.

One of the other search results is here,


where in a not atypical personal attack, my "shelf life" is questioned in the headline by someone whose own shelf life in crude media lasted about .25 nanoseconds past his MS employment.

I'm up past my bedtime, or I'd make your arguments look like Sarah Palins brain after an hour of debate with J.Q. Adams.

John Hudson's picture

What arguments, David?

The single point I made is that there is only one sense in which it can be reasonably said that 'ClearType effectively triples (x-direction) resolution', and that is in terms of the sampler and hence the accuracy-to-outline of the rendering of glyph details, and hence the rendering of characteristics of the typeface on screen. That is the only sense it which it is true that resolution is effectively tripled, so that is the sense in which I've always understood the statement. A 96ppi screen obviously doesn't become a 288ppi screen from the reader's perspective, so that obviously isn't the sense in which the statement should be understood.

Ergo, when you say ‘Regardless of GDI vs DW, and only on Windows below 100 dpi for readers at a normal distance for those screen sizes present, CT Does Not "effectively triple the resolution"’, I'm left wondering where the insight is, because for the reader at whatever distance the resolution is what the resolution is, and no text rendering method changes that resolution. What changes is the relationship of rasterised outline to that resolution, which is based on an effectively tripled x-direction grid due to supersampling.

Now, I'm only responsible for my own opinions and my own precision, so if you've found evidence of anyone else interpreting that triple resolution statement differently, on Wikipedia (!) or anywhere else, that's between you and them.

John Hudson's picture

David: For crystal clear search instructions on google pair the phrase "effectively triples" with the word Cleartype...

Okay, I've done this, and it is sort of useful as an insight into lazy journalism and sloppy thinking, but at least provides a basis for me to clarify my own views. These are the top five links from that search:

‘Cleartype technology effectively triples the horizontal resolution of your screen to smoothen on-screen typography making it far easier to read.’

Note that this, correctly in my view, explicitly associates the triple resolution claim with font smoothing, while incorrectly expressing this in terms of an effect on screen resolution. The secondary statement -- ‘making it far easier to read’ -- is uncritical journo bullshit. Far easier than what?

‘ClearType effectively triples the horizontal resolution of the monitor. Certainly, this works better in some cases (resolutions, type faces, etc.) than in others. However, in my experience the opposite is true - I've never seen a situation that was made worse with ClearType enabled, but I've seen multiple situations where clarity is dramatically improved with it enabled.’

This is a user comment on a forum, and as such represents a reader's taste and experience. It also represents some really poor logic, since if results depend on particular resolutions, typefaces, etc., then clearly ClearType is not ‘effectively tripling the resolution of the monitor’.

‘ClearType technology effectively triples the spatial resolution in the horizontal axis; but at the same time subpixel rendering
introduces color artifacts.’

This is from the academic paper on the ‘Visual Preference for ClearType Technology’, which is all about ‘perceived image quality of text’. I'd want to ask Kevin Larson what the authors meant by ‘spatial resolution’, and to justify the claim based on that context. Note, however, that this paper is concerned with perceived image quality of the text, not reading (cf. my belief that all antialiasing, including CT, is primarily about the look of type on screen not readability).

‘While some will disagree, ClearType is primarily beneficial for LCDs. It effectively triples the effective resolution along one axis; can't recall if that's vert or horizontal. If so-called ClearType makes it to Linux (and preliminary support is there), my next display will definitely be an LCD.’

Another user comment in a forum. What's to say other than that he hasn't understood what he has presumably heard from elsewhere? I do enjoy the idea of effectively tripling effective resolution, though, which is surely better than effectively tripling ineffective resolution, or ineffectively tripling effective resolution. :)

And then we arrive at the Wikipedia article on CT, and its worth quoting the complete context of the triple resolution statement here, since the sentence in which it occurs, taken by itself, seems both confused and confusing:

‘If the computer controlling the display knows the exact position and color of all the subpixels on the screen, it can take advantage of this to improve the apparent resolution of the images on the screen in certain situations. If each pixel on the display actually contains three rectangular subpixels of red, green, and blue, in that fixed order, then things on the screen that are smaller than one full pixel in size can be rendered by lighting only one or two of the subpixels. For example, if a diagonal line with a width smaller than a full pixel must be rendered, then this can be done by lighting only the subpixels that the line actually touches. If the line passes through the leftmost portion of the pixel, only the red subpixel is lit; if it passes through the rightmost portion of the pixel, only the blue subpixel is lit. This effectively triples the horizontal resolution of the image at normal viewing distances; but the drawback is that the line thus drawn will show color fringes (at some points it might look green, at other points it might look red or blue). ClearType uses this method to improve the smoothness of text. When the elements of a type character are smaller than a full pixel, ClearType lights only the appropriate subpixels of each full pixel in order to more closely follow the outlines of the character. Text rendered with ClearType looks “smoother” than text rendered without it, provided that the pixel layout of the display screen exactly matches what ClearType expects.’

I find the reference to ‘normal viewing distances’ odd and irrelevant, because what is clearly being discussed, from the rest of the text and from the accompanying illustrations, is what is happening in the rasterising, i.e. exactly what I said above: the resolution is effectively tripled for sampling purposes, which enables finer display of type characteristics such as the thin diagonal line illustrated in the article. Once again, note how CT is explicitly associated with ‘smoothness’, with text ‘looking “smoother”’, about the resolution of the ‘image’.

John Hudson's picture

David: I will reply, once again, like a patient and true constitutionalist trying to have civli [sic] discourse with a constitutionally ignorant tea party bigot .... I'm up past my bedtime, or I'd make your arguments look like Sarah Palins brain after an hour of debate with J.Q. Adams.

And you don't like my tone?

Anyway, I'm looking forward to seeing you in New Orleans, on the basis that Cajun food and bourbon are better conduits of civil discourse and mutual understanding than online forums.

dberlow's picture

Decision decisions ... Should we drink to stagnant standards, the terminally decimated middle classes of type, graphic and web designers, more Mordors and red ink, or the right to vacillate between all for one and one for all and all for naught and one for one ?

John Hudson's picture

Let's drink to Gerald.

dezcom's picture


Té Rowan's picture

Why not one for fellowship?

Syndicate content Syndicate content