webfont Advanced

Stefan Seifert's picture

Hi,

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…

Comments

speedrocwatch's picture

Home time is indicated on the lower dial in the center of the watch by a day/night hand featuring sun and moon replica tag heuer Grand Carrera uk. Local time in the traveler’s location is shown by the main hands, which enable the second time zone to be read directly. The self-winding Caliber 9909 MC differs from standard multiple time zone movements in that its cities disc is completely integrated into the replica Franck Muller and is visible in a lateral magnifier on the 9 o’clock side of the case, rather than on the dial. This clever mechanism avoids overloading the dial. The time in each of the 24 reference cities is read by pressing the pivoting push-piece replica breitling uk. Each press reveals a different city, its local time, and the time difference between the home time and the traveler’s time.

Syndicate content Syndicate content