KHAKI & COMMENCE

tyleryoung's picture

trying to figure out how to use grays in pixel fonts here. these two families are designed to use black and three grays. i don't know if that's too many grays or not.

one thing i've noticed in working with the grays is that it is much easier to develop extended familes of fonts than when working without the grays. perhaps because the grays make nuance much more attainable within each character set.

the following are works in progress. any feedback is welcome.



hrant's picture

Hey Tyler. Nice to see you get into grayscape.

Number of grays: three is a good number. It's sort of the minimum, although the gain from using more isn't huge, and using more does create more brain strain. One very interesting thing about choosing the number of grays is how strongly it can actually affect the forms! When I made the first version of Mana-16 two grays is all I wanted to use, since I wanted to limit the bit depth per pixel to 2 (to save memory in a "true" bitmap format). Coupled to ideal spacing requirements (involving a strategy I call grayspacing) it resulted in diagonal lc letters (like the "v") becoming bowed. When the pixelfont aspect of grayscale design kicked in however, the depth issue disappeared, so I went to three grays... which actually resulted in being able to straighten the diagonals! It made Mana more conventional (or maybe less unconventional).

But the grays you're using are slightly dark I think. Are you on Mac? That causes one to err on the side of blurriness, whereas working on Windows causes one to err on the side of aliasing (which isn't as bad). Before you go to far, test on the platform 90% of people use.

Or maybe it's the way you're using the grays; Commerce is much tighter than Khaki. The latter also exhibits some bad strategy, like having solid lines of gray in the "E". Black should be your main color, otherwise blur becomes too strong. I certainly know it's tempting to rely on grays as much as possible, but the practical limits dictate a more conservative approach; you simply have to settle for some aliasing. Also: it seems you're not using your darkest shade to full effect; don't underestimate its bending power!

One more thing: I'd make the ascenders (in both designs) one pixel taller.

> it is much easier to develop extended families of fonts

Well, it's much easier to arrive at such, but it's also a lot more work!
The possibilities are enriching, but also challenging.

hhp

Dav's picture

I may not be able to comment and help with the grays, because I still have to create my first own pixel / bitmap type using and abusing grays..

But, I really like the unicase version of 'Khaki'.. ( Especially the very first, extended one.. )
It got some fine but playful, nice, and slightly 'chollaesque', look and feel to it..

tyleryoung's picture

Hrant, as always, you give careful, valuable feedback.

i'd like to learn more about your method of grayspacing. it sounds interesting, regardless of how grays have impacted it.

mana 16 was in fact, the one pixel font that opened my eyes to the extended family possibilities in pixel fonts. granted, craig kroeger (i'm a fan of his) has been systematically adding to his main families by point sizes--something i intend to do with these familes as well as others. however, mana 16 really impressed me with how well the bold version married the regular version. i'd never liked the way bold pixel fonts fit together with their regular weighted counterparts, and had been following a policy of developing single member families (aside from point size variations), and trying to make them as unique as possible by taking advantage of the physical differences between them.

the grays, as mana illustrates, make this problem obselete, in my opinion.

i am indeed on a mac, and will take your advice and view the files on a pc, although i'm not sure how to design them to look better on the pc. i simply picked my grays from the web safe palatte.

i will also make the ascenders taller. i was wrestling with wheter or not to do that, actually. i think i err on the short side, as many of my designs feature stubby ascenders and decenders.

thanks for your feedback on the unicase too, david. i like it too. it's the one with the most fun. i'll have to take hrant's tip and try to rework the khaki family with the darkest gray to remove some of the soft stuff, and tighten everything up.

it is a lot of work, but it's fun!

tyleryoung's picture

hrant, one more thing: regarding the khaki family, i was experimenting with using grays in situations like the "E" to open up the whitespace within the characters--or at least give that illusion. also, or perhaps alternatively, i was trying to control/manage the weight of the character limbs, as some of the glyps simply looked too heavy in comparison to the others.

you mentioned that some aliasing was simply necessary. but what about glyph consistency?

hrant's picture

Thanks for the compliments.

> grayspacing

Basically it's how you use grays to push the lateral profiles slightly to the left or right to get more even color, and how you can allow two glyphs to touch without creating a distracting blotch.

> how well the bold version married the regular version.

One interesting thing in Mana is how the gray strategy is different between the Regular and Bold, but this actually makes them harmonize on a deeper level. There's more than one reason for the different strategy, but basically it's due to the two weights requiring a different balance between fidelity, even color and crispness (see below). It's very interesting how the weight of the font affects the way in which grays are optimally used.

> i'm not sure how to design them to look better on the pc.
> i simply picked my grays from the web safe palatte.

If you have no easy access to Windows what you could do is take a small group of letters that represent different structures (like "h", "v", "e", etc.) and test those once on a PC* to see how they should be balanced, then work from there on your Mac.

* An easy way is to put up some web images and check them from a public internet terminal. I do that at the local Mac store every time I [have to] go to the mall. :-)

Another way to work might be to (temporarily) change the gamma on your Mac, assuming there's a utility (or something in the OS?) that can do that. FYI, the difference in nominal gamma is 2.2 for Windows versus 1.8 for Mac.

> what about glyph consistency?

I remember what abruptly hit me about halfway into making Mana-16 was that there are three things that have to be balanced: fidelity (to the "intended" overall design), avoiding fuzziness (which limits the grays) and even color among the glyphs. The third factor is particularly hard to get an unwavering grip on, especially when you use fewer grays.

And this unique 3-way balance is actually how grayscale font design is so different than either outline or b&w bitmapfont design. It brings in the subtlety of outline design directly to the screen, where it can -and has to- be evaluated dynamically, not after printing samples on a lino. This makes it a much less iterative, a much more immersive, activity. The level of concentration required (a level that even outline type design doesn't attain) to produce results that really use the medium (as opposed to slapping on grays at the corners of an existing b&w bitmapfont) is exhausting.

hhp

Gustavo Ferreira's picture

interesting work mr. tyler young...

one thing that called my attention is the flipped P-shape
for the uc Q. i don't know if this works - i would chose the
more conventional O-based-shape...

> mana 16 was in fact, the one pixel font that opened my
> eyes to the extended family possibilities in pixel fonts

mana is indeed a great font... but i think the width-
variation principle you are using has a lot more in common
with my UPF Elementar family - have you taken a look at it?

- www.ultrafonts.com

keep on the nice work,
- g.

tyleryoung's picture

gustavo,

elementar is indeed a fine pixel font family, and i'm glad to have your feedback.

i hadn't realized that elementar was such an expansive family. reason: i'd never clicked on the drop down menu for elementar at uf.com before. i see what you mean about the width variation.

one thing about elementar that illustrates a point i've long held in my mind, while i doggedly persued traditional pixel font designs rather than jumping on the grays right away like many others, is the issue of uniqueness.

before any misunderstanding may flare up, i do not mean to imply that elemntar lacks a unique design. i do have a family of fonts, of which one is available commercially right now, called "nerve". nerve and elementar (and others available around the web) share the same basic geometries. their individual styles, in my opinion, at least in the old pixel design world, were held largely in the use of individual character nuance, and methods of showing curvature.

now, with the opportunity to fill those angular nuances, once blank pixels, with grays, it becomes much more difficult to upgrade one's own unique character sets without becoming derivative of other (previously published) gray offerings.

i have a few strategies in mind, but the point is, for a lot of old-style one-pixel-wide designs, it seems the name of the game is to be the first one to upgrade his/her designs.

has this development crossed your mind, and if so, what are your thoughts?

Gustavo Ferreira's picture

tyler,

the 'expansive' features of the Elementar family are indeed
hidden in the font-menu of the ultrafonts.com website - i
hope to have this corrected in the future.

i don't know if i got your point about uniqueness... for me,
the uniqueness of the Elementar B family is its flexibility in
comparison to other pixel fonts - although there are other
bitmap fonts with multiple width variations, they are all 1-
bit only and were released after Elementar (afaik).

the 'squariness' of Elementar B is what gives it its flexibility
and identity through the different widths, weights and
sizes. (the complete family was designed in the sizes 5, 7,
9, 11, 13, 15 and 17 px, which shall be soon available at
ultrafonts.com.)

a more legible version called Elementar H, still in progress,
is not so 'squary' and has diagonal strokes in characters
such as v, w, k, y. the Elementar H family is more legible in
larger text settings, but does not offer as many width
variations as Elementar B.

here is an image for comparison:

comparison between Elementar B and H

best,
- gustavo.

Gustavo Ferreira's picture

btw, you don't need to be restricted to the greys of the web
safe palette - ultrafont's grey-cell technology enables you
to use 16 shades of grey.

here is the palette i use:

16 shades of grey

if you want to use this technology you can contact
ultrafonts: contact@ultrafonts.com.

- g.

tidchris's picture

Elementar is a serious solution for typographic control in a very broad x,y range. Few people yet appreciate how to tap into it. I am proud to carry some of the family through Ultrafonts, but it's true, our design does not sell it well at all.

I particularly like the 6-point-capital Gustavo uses in red. That size is the same I attempted to answer with Halogen (on sale at FFF) and Miguel with Sugar (on sale at uf) but of course the feel is always different.

As Tyler says, typographers will continue to crash into each other at the lower pixel scales. The gray dimension increases freedom somewhat. It may be time for extremely grayscale fonts.

this looks like a good place for an announcement:
Ultrafonts officially will not pursue a patent on the "Gray-Cell" technology, concerning subpixel forms in TrueType pixelfonts.

Why: The PC audio program "Fruity Loops" shipped product in 2001 including pixelfonts with subpixel "knuckles", developed by the UI designer and the founder, in pursuit of a beautiful GUI. They approached us kindly last week with examples and fonts. As a result we are back to building tools and working with developers instead of time consuming/annoying/costly patent work.

This means you will have a choice of conversions, tools, and escalating possibilities. We intend to obliterate the distance between a typographer and the technical deployment and monetization of their ideas. We now do graphic-to-UPF conversion for type shops, individual developers and students, so fonts converted by the Ultrafonts converter, can be sold on Ultrafonts, or elsewhere. No licensing is required.

Sorry for hijacking the forum, I will now cut-off my own microphone.

-chris [Ultrafonts]

hrant's picture

> Ultrafonts officially will not pursue
> a patent on the "Gray-Cell" technology

It seems there has been a change in this, and there is a patent in place now.
Chris, could you clarify?

hhp

Syndicate content Syndicate content