webfont Advanced

Stefan Seifert's picture


some pics from my work on a font for my webpage destinated for very small sizes around 9px.
I am struggling with balancing hinting for small screen sizes, special versions for negative use on black ground with sub pixel rendering and so on…

In this pic one can see the results comparing (for now only) two browsers Google Chrome and Safari both on Mac.

For me the first one is the best, yet it is achieved with a particular thinner version of the same font only for the use on black ground. Otherwise as known sub pixel rendering tends to make fonts look much bolder than they are in reality.
Yet, it creates a hell of difficulties when used in animated texts, even if only a simple fade, for example. Specially Safari renders the font abruptly after the animation is completely done. I tried to change classes in order to keep the thicker version while animating, only exchanging it at the end and so on. In general it works better with CSS transitions but even this does not solve entirely the problem.

Between the second and the third one (with simple greyscale anti-aliasing) Google is way better, specially the strokes are more consistent as here in the example in the ‘in’. Sadly not even a good hinting solves the problem on stroke inconsistency on monitor. Yet the font looks better in Google Chrome.

By the way Firefox does not leave to the developer the choice of greyscale anti-aliasing, as far as I know. One has to do a CSS hack to change class for him and go for slighter font versions on dark ground.

A long story…


Syndicate content Syndicate content