Forum Moderators: not2easy
Anyway, when i'm using small pixel fonts with no AA the kerning on certain letters goes way off, almost random, i.e some characters will have no space at all between them and others will have a large 2-3 pixel gap. Looks awful, I usually have to resort to taking screen grabs of actual HTML text to get things looking neat.
Has anyone else heard of this or am I alone?
also you could try "fontographer" ..and build your own
oh .and BTW welcome to WebmasterWorld
1.) Convert the text to raster data, and scoot the letters back and forth manually.
2.) Manually select the 'tight' letters in the text, and adjust the letter spacing individually for them.
If you can't justify an upgrade to photoshop CS (which doesn't solve that problem anyway), you certainly couldn't talk your boss into buying Fontographer. ;)
Thanks for the welcome, always nice to get quick and to the point replies :)
If CS doesnt fix this problem either, i'll have an even harder time trying to justify buying it! Doh
Meanwhile if you want to show "Boss" this thread to support "case"...? I'm sure that me 'n' Mivox can edit our posts to make the case for the purchase of CS ...porsche 911 ...Holidays in Bahamas...( Liane can do deal on Boat rental ) ....We have about 30 minutes to edit before our buttons are gone ;)
Martinibuster would be proud of me /us ..
(But if you do find out, and you do have a PR9 site handy, I could arrange a song and dance routine, sure! ;) )
I have very little "shame" today ;)
Anyway, when i'm using small pixel fonts with no AA the kerning on certain letters goes way off, almost random, i.e some characters will have no space at all between them and others will have a large 2-3 pixel gap. Looks awful, I usually have to resort to taking screen grabs of actual HTML text to get things looking neat.Has anyone else heard of this or am I alone?
Hm. I'm rather surprised that no one has pointed out the origin of the problem. Pixel fonts usually work at one size, and at whole-number multiples of that size.
So, if the font in question is supposed to be 8pt in height, it will be correctly proportioned at 8pt, 16pt or 24pt, but will look like **** at 7pt, 9pt, 15pt, 17pt, 23pt or 25pt.
There are two good solutions:
a) use the font in a multiple of its intended size, and
b) get a higher-quality font (a better one may kern better; lots of the freely-available pixel fonts are built by inexperienced font-designers)
-B
Well I have been using Verdana, Arial etc. Simply trying to emulate HTML text, i'm pretty sure they are supposed to be well designed fonts..
Wow, Verdana? I'm surprised to hear it. Kerning isn't even too bad when using un-antialiased Verdana with Freetype, server-side.
That you're using Verdana (don't get me started about Arial; professionally designed yes, but an aesthetic disaster)...anyway, that you're using Verdana shoots down both of my theories about what the problem is (i.e. since Verdana should be usable at a number of sizes & is not too bad a font either.)
All I can really offer by way of help at the moment is that Verdana kerns well enough in Macromedia's Fireworks without any particular tweaking.
Sorry for the non-help ;-)
-B
Standard 10pt Verdana with no AA, I dont have Fireworks unfortunately, stuck with using Photoshop, UltraEdit and Firefox for all ALL my design work ;)
Standard 10pt Verdana with no AA, I dont have Fireworks unfortunately, stuck with using Photoshop, UltraEdit and Firefox for all ALL my design work ;)
I bet your link gets snipped ;)
Actually, a test in Fireworks compared to a screenshot of the identical block of text shows what you say: poor kerning, generally speaking (it's about 95% identical to the image you posted). I've never used a big image block of Verdana text, and so hadn't noticed...
...which leads me to ask the big question: why are you creating web graphics (non-antialised graphics, no less!) using a font that's widely available on browsers? The layout you show is pretty easy to construct using a couple of <div>s. It would look like this (not taking into account the broken box-model on IE < 6):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div.advert {
background:#FF9900;width:300px;
height:246px;
}div.advert-text {
background:#FF6600;vertical-align:top;width:300px;
height:205px;
}div.advert-text p {
background:#FFFFFF url(mag-cover.gif) no-repeat top left;width:150px;font-family:verdana;
font-size:11px;padding:0;
margin:0;
margin-left:150px;
}div.advert-text img {
padding:0;
margin:0;
margin-left:150px;
}div.button {
background:#FF3300;width:300px;
height:41px;
}
</style></head><body>
<div class="advert">
<div class="advert-text">
<img src="headline.gif" width="150" height="28" alt="Headline Graphic" title="Lorem Ipsum!" />
<p>Aliquam tristique. Sed fringilla. Cras viverra eleifend ipsum. Cras mauris purus, varius a, luctus ac, semper et, neque. Maecenas a lectus. Pellentesque porttitor leo non pede. Praesent accumsan. Nam fringilla. Praesent viverra est nec felis fermentum molestie.</p>
</div>
<div class="button"></div>
</div>
</body>
</html>...and also anonymized so it doesn't get 'mod-ed'.
-B
Mods, hope this didn't go too off-topic...
But I do use non-AA text for things like buttons and banners and the likes quite often..
Dont see how this has gone off-topic, its all semi relevant ;)
