The solution you go for will depend on a few things, like:
What OS are you running? Is the screen hi-res or lo-res?

hhp

I’m running Windows XP Professional and using Illustrator and Photoshop CS2 to create the graphics.

The size of the touch screen is 480 x 320 pixels. The application is developed and runs under Linux and uses a proprietary GUI, and does not use the X Windows System.

The size of the screen actually doesn’t tell us much. What’s the resolution of the screen (dpi/ppi?)
And what size do you need to use the type at?

Jason C

Yes, the resolution would be more helpful, but the pixel size does help - like now we know it’s sort of small, which means the optimal point size (better: ppem) is smaller than otherwise, to fit more text. If you could tell us the physical size of the screen that would complete the picture so to speak.

But a bigger issue is that you’re running a custom GUI, which means your font rendering software could be... what, Freetype? It sounds like you can actually use outline fonts, so you’re not limited to “true” bitmap fonts (like in a BDF or FON format).

On the other hand, you say you’re using an XP machine and standard software to “create the graphics” - does that mean you’re just making canned graphics which are copied to the touch-screen device, and the device doesn’t really [need to] know what a font even is? If so, then all you need to do is use one of the MS “core fonts”, like Verdana* and Georgia, but when you render them in Photoshop turn off anti-aliasing. These fonts are “superhinted”: althought they’re outline fonts which can render out in grayscale, they contain special instructions to make them render out very nicely in 1-bit.

* Which sets very wide however.

Sorry if this seems more confusing than helpful - we’ll figure it out eventually don’t worry! :-)

hhp

Hello,

Thanks for taking the time to help out!

The physical size of the actual display screen is 80 x 120 cm.

Here is some other technical info:

Module size = 156.0 (H)mm x 94.9 (W)mm x MAX11.5 (D)mm
Dot size = 0.228 (H)mm x 0.228(W)mm
Dot Pitch = 0.24 (H)mm x 0.24 (W)mm
Number of Dots = 480 (H) x 320 (W)Dots
Duty = 1/320

In Illustrator, I designed the text on the screens using 21 and 27 pt Myriad Pro Semibold.

The fonts are not created as part of the graphics, so the device needs to know what a font is. The text will change on the fly.

The developers are using libfreetype2 to render the True Type fonts we are now using. This was working well when in color as we are not limited to the number of colors, but now that were doing a strictly b&w version (no grayscale) of the screens, the vector font we were using (Myriad Pro Semibold) does not render well. But, they can use another font rendering software if necessary or develop one.

The graphics are saved with the following specs:

PNG-8
No Dither
2 color (black and white)
No transparency

I will ask the developers to try Georgia and Verdana, thanks for the suggestion.

Lucie

So the resolution is about 111 dpi. Indeed that’s not high enough to make “dumb” anti-aliasing crisp enough, especially when you factor in the small screen size, which will encourage closer viewing distances than a computer monitor. Something like Myriad counts as “dumb” when it comes to anti-aliasing at text sizes*. On the other hand, 27pt should be large enough... unless you’re super-picky like me. :-)

* Actually Apple had a special version of it made for
the iPod (or something) to make it come out crisper.

Coming around to b&w rendering, the thing is that if the Freetype engine can’t handle superhinting, you can’t really take advantage of the MS Core Fonts. If so, how easy would it be for you to license an engine that can?

But now I’m wondering: why did you give up on grayscaling? Only because the results you’ve been getting are poor? Because it doesn’t have to be so:
http://www.themicrofoundry.com/manademo/
And you don’t need any special TT engine.

Now, if you’re totally set on b&w, but your TT engine doesn’t handle superhinting (and you want to avoid changing engines*) then you could use what’s called a pixelfont: a blocky outline font specially designed to render out crisp bitmaps at a single point size. In fact Mana is a pixelfont, but grayscale.

* Insert Formula-1 joke here. :-)

hhp

Hello Hrant,

We tried with Verdana and Georgia. The results are not perfect (yes I’m super picky
too!) but are much better than what we we’re having with Myriad Pro Semibold. For the font engine, the developer tells me that it’s possible to activate superhinting. But, if we do, we have to pay for the license to use it and change the code. We don’t know what costs exactly would be involved with that, so that’s on hold for now. (We use a lot of open source resources).

Right now I’m waiting for the developers to integrate the text into the actual screens to see what it really looks like and do some more tests.

I really like the Mana pixel font, however I can’t use it because it’s grayscale.

The reason we are doing strictly black and white is for technical reasons only. Apparently it takes much less power for the device to display a strictly black and white screen, and that’s why this limitation is there unfortunately.

I’m a bit confused about the file extensions of pixel fonts. They seem to be in .ttf or .fon format. For example, FFF Forward from http://www.fontsforflash.com/, in the Freebies section) is a .ttf file, but at the dafont.com Web site, they have pixel fonts in .fon and .ttf formats. Pixel fonts can be .ttf or .fon files?

Also, when I install these fonts and use them in Illustrator, I can change the size even though they are said to be a certain pixel size. Is Illustrator just changing the size on the fly? If so, how can I determine what the actual size looks like?

Thanks for your help,

Lucie

OK, we’re narrowing this down nicely. :-)

The MS “core fonts” were never intended to be used without superhinting enabled, so you will see quite a bit of clumping of pixels and missing pixels, especially at smaller sizes. They do have “regular” hinting which helps, and I assume your engine is handling those - otherwise the results would probably be way unacceptable. But even without superhinting available it’s not surprising they render better than Myriad for you, since a coarse grid is implicit in their design.

Basically if you’re talking about an outline font that’s designed to render very well without [super]hinting (which it can only do at one size) you’re talking about a pixelfont. Typically pixelfonts are blocky*, “literally” mapping outlines to pixels. If you scale them to a size other than the intended one** you get tons of blur; the interesting thing in your case is that it’s in b&w, so you don’t get blur, but you will get very jumpy color and some distorted letterforms. As for seeing what the “actual size” of a bitmap font is: the bad news is that there’s no way to be sure without being told what it is; but the good news is that it’s usually 8 (a pseudo-standard in the pixelfont world), and if it’s not you can figure it out by either trying some numbers, or looking at it in a font editor.

* Although they don’t have to be.

** Unless you scale them to even multiples, like x2, in which case you basically get bitmap fonts with multi-pixel blocks.

Font formats/extensions: TTF fonts are outline fonts, which is what pixelfonts are; FON fonts are “traditional” bitmap fonts, where the pixel patterns are stored as data (as opposed to being rendered by -sort of in spite of- a TT rendering engine). FON seems more intuitive, but its not well-supported. Because TT engines are very uniform, portable and robust, pixelfonts end up being a much better vehicle for rendering bitmap fonts.

There’s a twist though: TT fonts can actually house embedded true bitmaps. These are rendered instead of the outlines when the right size is chosen. This is what I did for Arasan some years ago*. The advantage is that you have the scalable outlines in there, but you get “perfect” rendering at a given size (in fact multiple sizes, which you can’t do with a single pixelfont) without the headache of superhinting. The disadvanatge is that some TT engines (like the one in OSX) will ignore the embedded bitmaps.

* http://www.themicrofoundry.com/f_arasan.html

So it seems to me that, if you’re not going to enable superhinting, you need to go with either a set of TT pixelfonts that cover the sizes you need, or go with a single TT font with embedded bitmaps. This latter you’d have to test to see if it works. I can send you Arasan to test if you like; even though you probably can’t read Armenian :-) you’ll see if the bitmaps are clean or not, or you could email me a screen grab and I’ll tell you.

hhp

One other thing I just realized: as far as I know it’s not legal
to simply copy an MS core font to a third-party device/OS.

hhp

Hello,

Yes I would like to test the Arasan font to see how it renders (even though I don’t speak Armenian!) I’ll send you a screen grab after if you like so you can see the results as well. If you like you can send the font at this address I’ve set up: fonttest@hotmail.com.

How can one know if a TT font houses embedded true bitmaps? Are they advertised as such, or do you just find out by trial and error?

Thanks again for all your help, it’s greatly appreciated.

Lucie

Hi Lucie,
you can find out whether a TT font has embedded bitmaps by checking for existence of ’EBLC’ table. One can dump font tables using TtfDump from http://www.microsoft.com/typography/tools/tools.aspx

But I think a more interesting question is whether a font has embedded bitmaps for the particular glyph/size combinations you care about. To do that, you can inspect the ’EBLC’ table contents using the documentation from http://www.microsoft.com/typography/otspec/eblc.htm

Hope this helps, and best regards,
Mikhail Leonov
Windows Text team
Microsoft

Hrant is correct, you can’t just copy Windows fonts across to your device. Making derivative bitmap fonts without permission is also problematic. For this reason we licensed our fonts to Ascender (www.ascendercorp.com) who can provide them to you, and make modifications as needed, under license.

>* Actually Apple had a special version of it made for
the iPod (or something) to make it come out crisper.

That would be Podium Sans - http://en.wikipedia.org/wiki/Podium_Sans - it’s not exactly sharper, and it’s not exactly Myriad either - don’t beleive everything you read on Apple.com, especially if they change it a few weeks later. ;-)

The physical size of the actual display screen is 80 x 120 cm.

Here is some other technical info:

Module size = 156.0 (H)mm x 94.9 (W)mm x MAX11.5 (D)mm

I’m confused. What does the larger set of dimensions refer to?

Mikhail,

Thank you for the info about how the ELBC table. It’s a bit too technical for me (I’m just a graphic designer..!) but I’ll pass it on to the developers.

sii,

Thanks for the info about Podium Sans and the Ascender corporation, the services they offer look very interesting.

elliot100,

The module size refers to the actual size of the physical device in which the screen is housed.

—

About using a font in such a device, as I understand you are all saying that it’s necessary to buy a license to legally use it in a commercial product. However, what we are building now is a prototype for a demo, not yet for sale, so in this case I would think it’s ok to use the font without a licence, or am I mistaken?

Lucie

Luciel,

1. Is your FreeType library compiled with native (patented) TrueType hinting enabled?

2. Did you try Myriad Web Pro (available from Adobe) or Frutiger XSF (available from Linotype)? I would also recommend taking a look at Officina Sans in the version sold by ParaType. Their TrueType versions all work very well on screen and are hinted (screen-optimized).

Adam

Hello Adam,

Our library is not compiled using native TrueType hinting. We can do it, but we’d have to pay for the license and change the code in order to activate it, and for the moment that’s not possible, so that’s on hold.

I have a sneaky feeling that Myriad Web Pro will give the same results as the MS Core fonts, which are optimized for screen viewing as well, but I will give it a try. Actually, I didn’t realize that Adobe had WebType fonts, so as I have the Adobe OTF library I can test them out.

Thanks for the info about XSF fonts. As I understand it, they are optimized for computer screens that use Windows. As our development is Linux based, I wonder if these will be any good for us?

I like the Officina Sans font, but I have the Adobe OpenType version only though, not the Paratype version.

(As the end-result is strictly pixelized black and white (no anti-aliasing) it’s impossible to tell if a font will render well without actually testing it on the device; just looking at it on a regular computer screen doesn’t give true results).

Thanks for your suggestions.

Luciel,

Linotype XSF, Monotype ESQ, Adobe WebType and ParaType superhinted fonts are all optimized with the native TrueType hinting in mind. If you don’t use the native TrueType hinting but use the FreeType autohinter, you may get reasonable results when using a font that has been optimized for ClearType display, such as Calibri or Corbel from the Microsoft ClearType collection (http://www.ascendercorp.com/ctfonts.html ) or Ascender Mayberry (http://www.myfonts.com/fonts/ascender/mayberry/ ). The Segoe UI font, which is the default UI font on Windows Vista, might also work well.

However, I very much doubt that you’ll be able to achieve really good results when using purely black-and-white display with the native TrueType hinting OFF. FreeType autohinting really works well only with antialiasing — for aliased type, you pretty much need native hinting.

Well, actually, there is probably a way that would allow you to produce very good results under the circumstances you describe, but it would involve custom font development and some trickery. You may contact me offlist if you’re interested at adam at twardoch dot com.

Best,
A.

> don’t beleive everything you read on Apple.com,
> especially if they change it a few weeks later.

Ah. :-)

> The module size refers to the actual size of the
> physical device in which the screen is housed.

Oh, so the screen itself must be a bit smaller - the dpi higher.

> in this case I would think it’s ok to use the
> font without a licence, or am I mistaken?

It depens on how you define “ok”... :-)
Actually, MS is not known to hunt people down for stuff like this. On the other hand, since you probably won’t risk including an MS core font in the final product, you should seriously avoid relying on one too much during development.

> you may get reasonable results when using a font
> that has been optimized for ClearType display

But of course those have the same legal restriction we mentioned - and probably more likely to be watched closely by MS... Myriad-Web doesn’t have this problem. But I doubt it looks as good (I mean even with regular hinting on, but no superhinting).

> there is probably a way that would allow you to produce
> very good results under the circumstances you describe

Effectively, a pixelfont. Maybe not blocky, but still size-specific.
Unless embedded bitmaps are supported in FreeType, which to
me would be the ideal path.

hhp

Lucie,

The terminology is: .fon are bitmap fonts, .ttf with “blocky” appearance are pixelfonts. And then, you have other types of outline (.ttf) fonts that I would call “screen-tuned”, which lend themselves towards screen display. They may do so by using different techniques, but the most typical one is to adapt the outline shape so that the final pixel patterns are best.

The adapted outline shape can be inherent to the design to produce reasonably good results across many sizes (as in case of the Microsoft ClearType collection fonts), or they may be tweaked so that one particular size appears particularly well. In addition, they may employ delta hinting (native TrueType hinting) to adapt/distort the outline even further, depending on the size, to cover a broader range of sizes.

If you are worried about compiling FreeType with native TrueType hinting enabled, you should be worried twice as much about the prospect of including unlicensed fonts in the device. From what you’ve been writing, I think you expect to get the font “for free”, i.e. that it could be bundled with the display device free of charge.

I don’t think you’ll have much luck with it. Just like your work costs money, the development of screen fonts also does. Pretty much all of the fonts that were mentioned here, made by Microsoft, Adobe, Apple or ParaType, come with licensing agreements that don’t allow their free distribution across other devices. You (or the device vendor, actually) would need to purchase a license to cover the bundling on the device.

An aliternative might be to commission a design of a new font that would suit your needs, and obtain all rights to it.

But none of these will come for free, I believe. Especially if you want high quality.

Regards,
Adam

Hi all,

I’m amazed at the high quality and amount of information I’m receiving, thanks a lot for taking the time to contribute, it’s been very helpful and enlightening!

My intention is not to try and use a font for “free”. I’m aware there is a lot of work involved in developing a font, and wouldn’t dismiss this work by using a commercial font for free. For the moment, I’m just trying to figure out the best type of font to use that will give good results.

About the size of the screen as compared to the device: the screen is 80 x 120 mm, not cm as I had mentioned previously.

Lucie

Minor: I don’t know how I was doing the math before, but apparently your screen is just over 100dpi. Factoring in the viewing distance issue, the effective apparent resolution seems to be comparable to an entry-level computer system.

hhp