This is my latest experiment to explore the possibility to design a super-super pixel font. It is not perfect, but OK for a first shot. Numbers and punctuation marks will follow. There are some kerning issues I could not mitigate.
Wow! As experiments go, this can only be described as a complete success.
Not only is the technique amazing, but the balance, form and beauty of this work is exemplorary. This is another one of those cases where 10/10 just doesn't express my admiration.
Thank you very much for your comments and generous ratings. For the style and beauty all glory should go to the French type designer Claude Garamond (ca. 1480-1561). His italic typeface has been deliberately chosen to prove my point: it is possible to build Super Pixel Fonts with FS that mimics anti-aliased text rendering at pixel view.
For template I used a screenshot of the character set of Adobe Garamond Italic. I adjusted the image size, contrast and color palette in Photoshop to get an optimized B&W version with 8 colors (black, 6 shades of gray and white). I've considered the 16 color palette too, made a few trials on small samples, and decided stick with 8 colors. It would have been a lot more hassle for very little gain in quality.
(Super Pixel Fonts add a few gray pixels to the black ones to smooth the curves and corners.) I took this concept a little further by adding pixels of 6 different shades of gray to the palette. All are custom made composite bricks with different patterns specially selected from a large variety of such bricks. The selection was based on a single property: what level of gray it produced on the screen at pixel view. I've spent the whole last weekend by generating and selecting the composite bricks. Lots of work with Fontstruct, a screen capture widget, and Photoshop's Eyedropper tool. I observed that many quite differently patterned bricks yielded the same shade of gray. At the end I've distilled the six composite bricks that best approximated the gray levels of my template image.
The rest was just tedious work to build the glyphs brick by brick. Using the preview to check the results I often deviated from the template to get better, smoother edges.
At the end I've made a few real world tests with the newly generated font in two different text editors to determine the optimal settings. I was not impressed. Unlike what I saw in FS, the text looked anything but sharp. Perhaps, I should go back to my workshop and develop new composite bricks that may give better fidelity of gray levels outside of Fontstruct.
About a year ago, I made several anti-aliased versions of More Latin Tragedy. I also tried out various sub-pixel schemes, discovering – like you – the irregular (alternately blurry or jaggy) behavior of SP FontStructions in general applications. They do not perform out-of-the-box as they do in the FS preview widget!
This was a big disappointment. I couldn’t explain why it was (still can’t), and this lack of comprehension took the wind out of my sails. It seems to me that hinting should follow basic anti-aliasing rules, but screen text renderers, in the absence of proper hinting tables, behave according to much more arcane rules than I might assume.
I wish I knew more about how .otf fonts encode hinting. This area represents a vastly under-explored potential of FS – mainly because it is also quite compatible with the various “faux curve” techniques out there.
Combine hinting tables, a grid expansion macro [or better yet, multiple degrees of grid sub-division entailing fractional brick placement, a micro-brick mode (distinct from composite bricks), and thus (with these two features combined) the oft-requested “individual” brick scaling feature – @meek: Attention, excellent expert feature requests!], plus proper kerning tables. FontStruct’s most advanced mode would go up a notch: from Expert to Pro.
(Surely the typophiles – or, better yet, Gustavo-ji – could illuminate these enigmas about hinting tech. I don’t think they are exactly trade secrets.)
@meek: Thank you very much for the special mention.
@will.i.ૐ: Thank you for your comment and generous rating. I began to realize the scope of SP fonts is probably limited to Flash. That takes the wind out of my sail too - with your graphic expression. My fontstruction is not SP font in a strict sense, but utilizes the same screen rendering properties.
I only have a vague grasp of the new features you suggested. Hinting tables, proper kerning, fractional brick placement are all well and good. But be careful what you wish for. After a few years of development most applications show symptoms of "featuritis". I am content with the simple Fontstructor, though I have my own wish list.
@minimum: It is comforting to know I'm not alone to be charmed by the sublime beauty of this classic face. Your question is a recurring one. There was a short essay about it in Computer Arts a few years ago (I could give you the exact reference later, if you wish). I think, it is the same if you ask: does the world really need more books (after the Lord of the Rings), more poetry, more paintings, more songs, more movies. After a few decades it would be boring to read, watch, listen, enjoy the same art over and over again. We constantly need new art, new styles, refreshing new ideas. Likewise in typography.
@xenophilius: Thank you for your compliment. Very flattering, but this fontstruction is certainly not the best font on FS. I understand your excitement, however, the same I felt after I saw the first letters in pixel preview.
I like Garamond, but it doesn't make sense to declare it is the best font in the Universe. (It is like claiming blue is the best color in the spectrum.) How about Helvetica, Bodoni, Baskerville, Futura, Trajan Pro or Zapfino? The typographic landscape is dotted by hundreds of beautiful designs, all look perfect in their own context. There is no such thing as "best font".
Cloning is enabled now. It took me a whole weekend to create the special composite bricks that made anti-aliasing effect possible. Should anyone tempted to use and explore further this technique, this fontstruction could save a few hours of tedium.
@Monsieur Baggins: Yeah . . . it was definitely an opinionated statement. Maybe there's a better font on Alpha Centauri 5; maybe Garamond isn't the best. It's only my opinion, and maybe I oughtn't to have blurted that out. But this certainly is a good fontstruction.
I actually winced, Goatmeal. But I commend you for figuring out a good joke to fit into this situation--I couldn't think of a joke relating to fonts if I strained my brain until it popped.
@BanjoZebra: I think, you referred to the pesky spaces between H and a few other letters (a,e,o,u, etc.). This is a kerning problem, not limited to the H. I tried to set the letter width so as to get a balanced, acceptable solution. It is far from perfect, I know, and not necessarily the best one. Having kerning pairs would be the real remedy for the gaping distances.
Please note, you can't take advantage of the Spacing feature by setting it to factional value. Since it is a pixel font, all distances should be measured in whole pixels.
@Frodo7: I have to disagree with what you say about fractional spacing. For a pixel font, you are absolutely right – but remember this is an SP font, so addressing subpixels (which triple the effective horizontal resolution of lcd screens – even without considering AA) is par for the course.
Also, feature bloat is a very real problem. I think of this in terms of applications that accumulate excessive default GUI effects, windows and palettes, features buried behind menus, modal dialogs, and obscure neologisms, and a hard-to-maintain feature set that takes a “everything and the kitchen sink” approach and thus stray from the original intent of the application. Such a scenario begins to inhibit the functionality, ease of use, and especially speed of the program.
I think Rob’s “Expert/Simple Mode” compromise brilliantly addresses this very issue. All of my feature requests are very focussed on generalizing the specific features already included as special cases. For instance grid-doubling is possible using 2:2 filters and a very tedious manual spacing of each 2x brick so that again they only just touch, but the technique could be generalized, adding a huge host of possibilities. Or, vice versa, individual brick scaling is possible using 2:2 filters and 2x2 composite schemes.
The applicability of such features have already been proven. Generalizing them will only increase the innate potential of these two special cases.
One more musing: It occurs to me that without controllable font metrics and the ability to edit kerning/hinting tables, this application may be better identified as “GlyphStruct” than “FontStruct”.
@will.i.ૐ: You were right about fractional spacing. It worked.
“GlyphStruct” sounds very harsh and unfair. I'm sure proper kerning is high on Rob's list of planned features. Until then you could do it in FontLab along with other finishing touches, or rely on the optical kerning feature of InDesign in case high quality output is needed.
After 3+ years, I meant the sentiment with all due respect. For Rob, for the app, for the Art of Typography at large. After all, negative space informs and defines both the function and beauty of latin characters. No letter is an island. A archipelago of letters sans kerning (which is notoriously difficult to quantize anyway) – this a font does not make.
Perhaps the kerning layer should be best approached via other tools.
I am no Judge, but I will speak my truth. Honesty can feel brutal, but this is no betrayal. I believe it is the true sign of both love and courtesy.
@will.i.ૐ: "No letter is an island." This could be the motto of any typography course. Your words reveal passion and perfect candor at the same time. You are a true perfectionist who does not bargain, does not make concessions, and will not settle for anything less than perfect - just like a bona fide typeface designer.
32 Comments
For best result use the PXL VIEW.
It looks awesome super-blownup as well.
Not only is the technique amazing, but the balance, form and beauty of this work is exemplorary. This is another one of those cases where 10/10 just doesn't express my admiration.
I couldn’t agree more.
For template I used a screenshot of the character set of Adobe Garamond Italic. I adjusted the image size, contrast and color palette in Photoshop to get an optimized B&W version with 8 colors (black, 6 shades of gray and white). I've considered the 16 color palette too, made a few trials on small samples, and decided stick with 8 colors. It would have been a lot more hassle for very little gain in quality.
(Super Pixel Fonts add a few gray pixels to the black ones to smooth the curves and corners.) I took this concept a little further by adding pixels of 6 different shades of gray to the palette. All are custom made composite bricks with different patterns specially selected from a large variety of such bricks. The selection was based on a single property: what level of gray it produced on the screen at pixel view. I've spent the whole last weekend by generating and selecting the composite bricks. Lots of work with Fontstruct, a screen capture widget, and Photoshop's Eyedropper tool. I observed that many quite differently patterned bricks yielded the same shade of gray. At the end I've distilled the six composite bricks that best approximated the gray levels of my template image.
The rest was just tedious work to build the glyphs brick by brick. Using the preview to check the results I often deviated from the template to get better, smoother edges.
At the end I've made a few real world tests with the newly generated font in two different text editors to determine the optimal settings. I was not impressed. Unlike what I saw in FS, the text looked anything but sharp. Perhaps, I should go back to my workshop and develop new composite bricks that may give better fidelity of gray levels outside of Fontstruct.
About a year ago, I made several anti-aliased versions of More Latin Tragedy. I also tried out various sub-pixel schemes, discovering – like you – the irregular (alternately blurry or jaggy) behavior of SP FontStructions in general applications. They do not perform out-of-the-box as they do in the FS preview widget!
This was a big disappointment. I couldn’t explain why it was (still can’t), and this lack of comprehension took the wind out of my sails. It seems to me that hinting should follow basic anti-aliasing rules, but screen text renderers, in the absence of proper hinting tables, behave according to much more arcane rules than I might assume.
I wish I knew more about how .otf fonts encode hinting. This area represents a vastly under-explored potential of FS – mainly because it is also quite compatible with the various “faux curve” techniques out there.
Combine hinting tables, a grid expansion macro [or better yet, multiple degrees of grid sub-division entailing fractional brick placement, a micro-brick mode (distinct from composite bricks), and thus (with these two features combined) the oft-requested “individual” brick scaling feature – @meek: Attention, excellent expert feature requests!], plus proper kerning tables. FontStruct’s most advanced mode would go up a notch: from Expert to Pro.
(Surely the typophiles – or, better yet, Gustavo-ji – could illuminate these enigmas about hinting tech. I don’t think they are exactly trade secrets.)
@will.i.ૐ: Thank you for your comment and generous rating. I began to realize the scope of SP fonts is probably limited to Flash. That takes the wind out of my sail too - with your graphic expression. My fontstruction is not SP font in a strict sense, but utilizes the same screen rendering properties.
I only have a vague grasp of the new features you suggested. Hinting tables, proper kerning, fractional brick placement are all well and good. But be careful what you wish for. After a few years of development most applications show symptoms of "featuritis". I am content with the simple Fontstructor, though I have my own wish list.
@minimum: It is comforting to know I'm not alone to be charmed by the sublime beauty of this classic face. Your question is a recurring one. There was a short essay about it in Computer Arts a few years ago (I could give you the exact reference later, if you wish). I think, it is the same if you ask: does the world really need more books (after the Lord of the Rings), more poetry, more paintings, more songs, more movies. After a few decades it would be boring to read, watch, listen, enjoy the same art over and over again. We constantly need new art, new styles, refreshing new ideas. Likewise in typography.
@xenophilius: Thank you for your compliment. Very flattering, but this fontstruction is certainly not the best font on FS. I understand your excitement, however, the same I felt after I saw the first letters in pixel preview.
I like Garamond, but it doesn't make sense to declare it is the best font in the Universe. (It is like claiming blue is the best color in the spectrum.) How about Helvetica, Bodoni, Baskerville, Futura, Trajan Pro or Zapfino? The typographic landscape is dotted by hundreds of beautiful designs, all look perfect in their own context. There is no such thing as "best font".
I'm rambling again.
Please note, you can't take advantage of the Spacing feature by setting it to factional value. Since it is a pixel font, all distances should be measured in whole pixels.
you're a great designer :) with very smart idea
Also, feature bloat is a very real problem. I think of this in terms of applications that accumulate excessive default GUI effects, windows and palettes, features buried behind menus, modal dialogs, and obscure neologisms, and a hard-to-maintain feature set that takes a “everything and the kitchen sink” approach and thus stray from the original intent of the application. Such a scenario begins to inhibit the functionality, ease of use, and especially speed of the program.
I think Rob’s “Expert/Simple Mode” compromise brilliantly addresses this very issue. All of my feature requests are very focussed on generalizing the specific features already included as special cases. For instance grid-doubling is possible using 2:2 filters and a very tedious manual spacing of each 2x brick so that again they only just touch, but the technique could be generalized, adding a huge host of possibilities. Or, vice versa, individual brick scaling is possible using 2:2 filters and 2x2 composite schemes.
The applicability of such features have already been proven. Generalizing them will only increase the innate potential of these two special cases.
One more musing: It occurs to me that without controllable font metrics and the ability to edit kerning/hinting tables, this application may be better identified as “GlyphStruct” than “FontStruct”.
“GlyphStruct” sounds very harsh and unfair. I'm sure proper kerning is high on Rob's list of planned features. Until then you could do it in FontLab along with other finishing touches, or rely on the optical kerning feature of InDesign in case high quality output is needed.
Perhaps the kerning layer should be best approached via other tools.
I am no Judge, but I will speak my truth. Honesty can feel brutal, but this is no betrayal. I believe it is the true sign of both love and courtesy.
@Frodo7's top comment:
FontStruct has kerning now.
I wanted to make a font with fake anti-aliasing before XD
Please sign in to comment.