web fonts

typoheldin's picture

Does anyone know if the Frutiger 55 is a good font for web designs?

If not, do you know which fonts are?

Thanks

Kind Regards,

Typoheldin

hrant's picture

For virtually any screen work I would recommend hand-painted grayscale bitmap fonts, such as my Mana series (available through Ultrafonts.com).

hhp

dan_reynolds's picture

Johanna, Frutiger 55 is just fine when creating .jpg, .gif, and .png graphics in Photoshop/Fireworks/etc. for "text-as-image" use on websites. Years ago, when I was doing more web design, I used a lot of Frutiger (although I tended more toward Frutiger 65 Bold, all caps, lots of space…).

If you are building a website in Flash, you may be better off using the sort of fonts that Hrant is talking about for your text. If you haven't used any pixel fonts before, you can try out Unibody first (free download from Underware). If you don't like it, or want something more exclusive, take a look at Hrant's work (mentioned above).

__
www.typeoff.de

hrant's picture

The Ultrafonts stuff works in Photoshop too (with the same advantages*). As for a free trial, Unibody is great, but it's not grayscale; I think Ultrafonts still offers a freebie (although I think it might not be as "pushy" of the technology as something like Mana).

* Including one I just realized recently: in a composition that has both small and large text (i.e. most compositions), the latter is almost guaranteed to be anti-aliased, and when the former is also anti-aliased you get a more harmonious page; next to large anti-aliased text, 1-bit text seems too crisp to me (I mean aesthetically, ignoring its additional functional drawback).

hhp

Jon Whipple's picture

Using fonts in graphics or in Flash files on the web gives you a lot of typographic control. For regular searchable and selectable text you'll want to make a stylesheet rule that specifies fonts that may be on the users computer. Because you can't know this in advance then you need to guess so if you want some nice sans-serif you go:

font-family: Verdana, Tahoma, sans-serif;

Essentially the rule of thumb is to familiarize yourself with Microsoft's core web fonts (Favourites seem to be Verdana and Georgia.) which are installed on Windows and any Mac with Internet Explorer and also other popular fonts on other platforms with something like this.

In this respect you need to be flexible. Make your font selection list a set of choices from most preferred to least. Users don't all have the same fonts as you. My website specifies Locator (by fellow Typophile Eric Olson), which there is a good chance in the grand scheme of things that you don't own. So just in case I also specified Verdana, and Trebuchet and if those aren't available use whatever sans-serif the browser knows about. It's in my stylesheet here.

Also in addition to font suggestions that Hrant and Dan suggested, experiment with the anti-alias settings for text in your image editing program. In many cases the default isn't the best choice for clarity and there is a better choice, and chances are the auto anti aliasing can't match the human touch in the custom greyscale bitmap fonts.

I hope any of this is useful...

Jon

spatium's picture

Hi,

we have collected some links to screenfonts/pixelfonts for an article about web and typography. You can see the list here: http://www.typosition.de/webtypo.html

Syndicate content Syndicate content