If you're making an image out of the font, CSS has nothing to do with it (it has nothing to do with rendering quality anyway), and what you're encountering is the limits of resolution of the screen: there aren't enough pixels to make small text look very nice (especially for something as expressive as Perla). One thing you should check is that (if you're using Photoshop) the text rendering (the "aa" field) is set to "Smooth" and not "None". But if it is set to smooth and you're still unhappy then it means there's only one way to go: painting the individual pixels by hand to get the maximum quality. The thing is, this is pretty hard to do yourself, and pretty expensive to get somebody else to do.

But I'm sort of guessing here, and I might be off concerning
what you're unhappy with, so showing an image would help.

hhp

Could you show an example?

Perla has fine details that will get lost at smaller sizes. I don't know what you mean by "CSS way," but CSS can't sharpen a graphic. There are ways to adjust the antialiasing in Photoshop which can affect the sharpness.

Edit: Hrant beat me to it, but we're saying the same thing.

Hrant - Thanks for the advice - I set it to Smooth and it got a bit better but not as sharp as it looks when I type it in Word. And obvioulosy there's no way I can paint the pixels myself, let alone pay someone. Truthfully, I have no idea how to do it even theoretically.

Scott D - Yes, Perla has these really fine details in the lower case letters, especially with the a:s and e:s. I mentioned CSS because that came up when I was going to convert the letters to an image and I just wanted to know if that could improve the quality.

An example of the text that's "grainy"?

> not as sharp as it looks when I type it in Word.

That's not surprising, especially if you have ClearType enabled.
BTW if you like the Word rendering better, you can use it! Just
do a screen-grab of the Word setting and bring it into Photoshop.

> I have no idea how to do it even theoretically.

You just zoom in in Photoshop and click away,
with the pencil tool, set to one pixel. But that
"just" is deceptive...

hhp

In general, this has to do with hinting. Most fonts simply don't look good in small screen sizes unless they're extensively tweaked ("hinted") with low resolution in mind. Fonts such Verdana, Arial or Times New Roman have undergone months of manual hinting done by best experts in the field.

A.

hrant - "Screen-grab"? You're talking to a rookie here. I need a lot more information than that.

twardoch - "Hinting" - that's a new term I just learned! I consider myself pretty smart but in this field I really have very little clue. What is kerning? Is that when you make a space between every letter in a word, or something like that?

BTW - You talk about smaller sizes and small screen sizes - how small is that?

On Windows you do a screen grab by hitting the Alt-PrintScreen key sequence;
then you do a Paste in Photoshop. On Mac I think it's Shift-Option-1 or something,
I forget; then you load up the screen grab file that's on the desktop.

Hinting and kerning are different things. The kerning you might need
to worry about is manual spacing adjustments between letters in a given
setting to make the spaces balance. But in Word this is quite tedious, so it
might be better here to nudge things around in Photoshop.

Small, for a normal font, is less than about 24 pt (18 pt in "native"
Windows). But for a font like Perla the threshold is much higher.

hhp

Thank you! I did that and it worked (I've never done that Alt-Printscreen-thing before, good to know!). But I don't know how it's going to look when I load it up. I think Perla looks great in 72 pt, but that's apparently too big for a normal size screen - or so I've been told. (I mean, in doing a web site with all these "frames". I'm not doing that myself, I have help.)

BTW the Alt is for grabbing the active window.
Without the Alt it grabs the whole screen, which is generally less useful.

> I don’t know how it’s going to look when I load it up.

It will look the same, unless you scale it, which is almost never
a good idea however. But it will look a bit lighter on Macs.

If you're trying to figure out how large your images
will come out on your users' screens, all you have to
do is factor in your own screen's size, comparing it
to the typical screen size, which is about 1024×768.

hhp

Yes, 1024x768 is what we're doing. Just wanted to make sure - from a pro - that I can't make it bigger. Feel free to make suggestions on a new topic I just posted about fonts. If you want to. And thank you.

Web page sizing is actually a somewhat complex issue,
it's not just a matter of determining some maximum.
BTW, I don't consider myself a pro at web design.

hhp

Yep, I would use Perla in large sizes only on screen, generally bigger than 48 pt. And use it for display purposes (headings and such), not lengthy copy.

As for the "ideal" size of a web page, it depends on your content, layout, and audience. You're probably fine with a design that has an overall width of less than 1024 pixels these days. Just keep your line length around 66 characters for copy or it will become difficult to read.

A great trick is to use layers in PhotoShop. Just duplicate the textlayer several times. Play with the settings (eg bottom smooth, second layer sharp with 50& opacity, and so on). This way the end result is way beyond what PS can do out of the box.

Another trick is to build the type-images at twice or thrice the required size and downsample them in the end, where the different GIF-settings provide alternative endresults.

Thank you for all your advice - I've tried everything
except painting the pixels myself and even though
it improved, it doesn't look good enough.
It's very frustrating since I spent so long
searching for the perfect font and now I might
be forced to launch my web site with an unsharp logotype. :-(

Bert - Thank you for the suggestions! I'll try to do what you recommended today. One question - when you say downsample, do you mean just make the size smaller? (I'm sorry if I sound like an idiot, but most of the "typographical lanuguage" and web design techniques is like greek to me.) :-)

It should be no problem to create good "type graphics" in PhotoShop. But it's impossible to see where your problems are if you don't show us what you have done so far. Just "Save for Web …" in PhotoShop and upload the image here.

Charlotta...please post some samples so we can take a look at them.

Make sure you are saving your type as GIF files and are optimizing the color pallet to best cater to the type color.

Yes, of course I need to show an image in order for you
to help me and I was going to do that yesterday when I
was adviced not to. A person working close to me (with PR
and marketing) thought it wouldn't be smart to display my
logotype in a forum. (?)
Seriously, would that be stupid of me? I just remember when
I revealed the two names of my collections in this forum and
was adviced to register the trademark before another
company stole my ideas. I've been accused of nagging
about this - but I am really new at all of this -
marketing, graphic design, rights and trademarks -
so I just don't want to make a mistake.
I'm trying to be responsible here. :-)

You don't have to use your logotype for the sample images. Just make up a new name! ;-)

I know, I am actually doing that. Such an easy solution... :-)

Here it is, the way it looks on the internet. Am I a perfectionist
for thinking that this does not look any where near okay?
(People around me think I should just be satisfied and go
for it. If the majority of people in this forum think it’s
fine, I will, but first I want an opinion from the
“professionals” in this forum.) It’s looks perfectly fine in Dreamweaver but then it ends up looking like this.
I’m having a very pale pink background to the black font
and this is suppose to be the start page.
Is there any way I can fix this without having to go to a graphic designer? I would be SO grateful!! :-)

I can post a link if it’s easier to view the whole picture on the screen.

This image uses a limited (and not optimized) color palette of 8 colors. In which color mode do you work in Photoshop? It should be RGB or Greyscale, so Photoshop can use the correct colors for anti aliasing the text.
When you export for Web Photoshop can reduce the color palette. Choose "selective" here.

The ornament doesn't use greyscale/anti aliasing at all. You can get a better result if you scale down a larger version (as described before).

Ralf

There really is no way you are going to be able to use this typeface any any size smaller than what you see there online without massive hand tweaking at the pixel level. The stroke width contrasts in this face are just too extreme.

That said, I'm always up for a challange and managed to come up with this::

Still needs a lot of tweaking but is maybe passable. I took your source file, reduced it to 50% using bicubic interpolation, duplicated the layer, set the top layer to 'multiply' mode, then tweaked the opacity of the top layer to suit.

I then merged that and reduced it down to 75% of that.

The next step would be to go back in at the pixel level and make sure the horizontal strokes are truly just one pixel thick.

"Yes, of course I need to show an image in order for you
to help me and I was going to do that yesterday when I
was adviced not to. A person working close to me (with PR
and marketing) thought it wouldn’t be smart to display my
logotype in a forum. (?)"

Yes, heaven forfend you post your logo on the internet so we can help you fix your logo, which you're going to post on the internet.

Ralf Hermann and Aluminium - Thank you so much for your help! :-)
I was going to try your suggestions last night - with some
help - but couldn't log on to Typophile to get the info.
I am doing it today and I hope I can make it look better.

But if not - the question is, do you think it looks so
bad that I should find another font? Or is it acceptable?
I'd be deeply grateful for opinions on this.

> Yes, heaven forfend you post your logo on the internet so we can help you fix your logo, which you’re going to post on the internet.

Maybe you didn't understand? I haven't launched the site yet.
This is a logotype for a new business and there could be
a risk that someone would "steal" or copy an idea and then
I would end up looking like the copy cat. There are thousands
of visitors here every day so I don't think my concern was
completely unfounded. There's no need to be sarcastic.

"This is a logotype for a new business and there could be
a risk that someone would “steal” or copy an idea "

They could infringe on your copyright or patent, but we have laws for that. I wouldn't loose too much sleep over it.

As for the typeface, I guess that's your call. It definitely isn't a face that scales well on-screen, but if you find it acceptable, go for it.

Aluminium - Thanks! If I can't make it look better in black,
I might try another softer color, maybe that will "disguise"
the fact that the font isn't sharp. It's really sad though
because I do love Perla and it wasn't exactly cheap.
If I had known this fact about fonts and having to make it into an image, I would've thought twice. But now I know better -
trial and error. :-)

I’m very curious as to what is happening. It’s certainly not the font. It must have something to do with the method you’re using to produce the image.

Here is Perla set in Photoshop at the same size as your example. I have used the four anti-aliasing method provided in Photoshop CS2 to show the subtle variations in rendering that can occur. (Top to bottom: Sharp; Crisp, Strong, Smooth) The bottomost example shows Perla with anti-aliased turned off completely.

I would argue that all of these (save the aliased version) are acceptable.

Again, here are the same samples scaled to 50% of the original size in Photoshop. Still nowhere near as chunky as the example you posted.

What file format are you saving the image as?

Grant, that "sharp" version looks very nice.

I have heard that Photoshop may not be the best program for saving out fonts as images for the web. Though the person who told me this didn't reveal a better product (perhaps fireworks?) Apparently there is software that can render better than PS with certain fonts. I generally set to sharp myself (my work is almost exclusively websites).

Fireworks has finer anti-aliasing controls. I hoped that CS3 would provide a similar slider/numeric control for this...

I mean, has anyone ever been able to tell the difference between "crisp" and "smooth" anti-aliasing in Photoshop CS2? Look at Grant's second and fourth examples above.

Scott,
Yup, I always found the biggest differences to be between "strong", "sharp" or "none." I can't ever remember using crisp or smooth. Both add too much aliasing in a blurry way for my taste.

Do you have CS3 and are saying there's really no improvement in the aliasing controls?

Thanks for the heads up on Fireworks. Between that and some of the vector controls that are nicer, it might be worth sucking up a few hundred bucks for.

I tend to prefer Smooth - not least because my
own grayscale pixelfonts rely on that setting.

hhp

I don't find Fireworks particularly useful, but there are a few things like text anti-aliasing and export options that would be nice to see in Photoshop. Who knows? It's all one company now. Maybe Adobe will start integrating Fireworks and Photoshop the way the used to do with Image Ready (a truly useless program).

As for CS3 -- I've heard there have been "improvements" but I have yet to test them.

"my own grayscale pixelfonts"

Hrant, do you know where I might look to learn about creating grayscale pixelfonts? Thanks.

The making of grayscale pixelfonts is a black art (pardon the pun).
Somebody wanting to learn it from me would need to emulate Kis.

hhp

watch your step. don't you remember "the sorcerer's apprentice"?

Hrant, I would attempt to emulate whatever you ask. Even 'Kis' if I knew what it was.

I thought maybe you could just point me in the direction of some tutorials or specialist software. But if the process is a cunning contrivance you worked out for yourself, then fair enough.

Would I be right in thinking it involves applying a virtual pixel grid in a vector font making program and then filling the virtual pixels with a percentage of solid vector that would equate to the subpixel sampling greyscale level?

Sorry. That sounded like I was masturbating pure techno jargon. But I think it made some sort of sense.

Kis had agreed to leave The Netherlands after learning punchcutting. I'm pretty sure you wouldn't like to engage in the cyberspace equivalent. :-) So since you're bereft of a practical place to leave to...

It's not my invention, and I wouldn't call it "cunning" - although there typically is an "Ah! Why didn't I think of that?!" moment when one finds out the (main) trick: in terms of bezier mechanics, you simply need to think of a 4×4 subgrid. This is actually patented, but the patent owners (not me) have decided not the enforce it.* The way you get to a 4×4 subgrid pixelfont varies; ideally you use the Ultrafonts converter (don't ask for it dude) which saves you a lot of time, by taking a GIF image of a glyph matrix and spitting out a TT font; but you can roll your own too.

* Like Mercedes does (used to do?) a lot in the interest of safety. Pure class.

The thing is though, the bezier mechanics is the (potentially) tedious, but easy part; the really hard, zen-mastery part is striking a quite peculiar balance, one not present in either 1-bit pixelfonts or outline fonts: a balance between design fidelity, crispness, and even color. When you get "in the zone" of this balance, it's really quite unlike anything else in type design, and it's very brain-draining to keep properly focused. Somewhat like kerning, but without anything to write on paper to keep yourself on track, and with a lot more guesswork, experimentation and definitely way more squinting. You literally find yourself moving your upper body like a cobra in a trance. And all this doesn't even address the gamma issue: between platforms, but also between normal and "reverse-video" setting.

A totally different way is not to use an outline font, but to use something like BitFonter (now available for Windows - yay!) to produce a "true" bitmap font, which now can be grayscale, or even full color. But pixelfonts still have the advantage of being easier to deploy and more robust, especially cross-platform from what I gather.

hhp

"So since you’re bereft of a practical place to leave to"

I wouldn't mind going to Transylvania to print bibles. It might be fun. For a weekend.

Thanks, Hrant, for your explanation. I'm not sure I understand everything you said. I shall commune with some spirits and hope for an epiphany or two.

If the Zen like process you speak of is like anti-aliasing by hand then I'm already rather adept thanks to years of pushing pixels in DPaint on an Amiga. Happy days.

I would be satisfied with creating just one grey level for a pixel font in outline format. I wonder if I could generate a 50% grey pixel by dividing a single grid square into 2 equal triangles and leaving the outer one empty?

Hmmmm. Now where's that old copy of Fontographer?

Ah, a fellow Amigan! That explains a lot. :-)
Yes, your previous experience would be invaluable here.

BTW in practice you need at least 5 grays (I mean including black and white) to
break into good usefulness; I originally made Mana-16 with only 4 grays, and
you can tell the compromise is too great. In the other two sizes I ended up using
most of the 17 (spooky number, I know) available grays.

hhp

Thanks, Hrant. Much appreciated.

May the voluptuous Amigan queens of the planet Amiga abduct you for sexual experimentation and fine cuisine testing.

Well thank you - thank you very much.
And I hope that "and" means "integrated with".

hhp

Oh, of course. As you already know everything's better on planet Amiga.

(Insert your own Amiga multi-tasking capability joke here.)

Did somebody say... Fast RAM?

hhp