1

I have done headers on http://downpublic.info/wpdemo/forSky/up-next/. However, the text looks jaggered and not smooth.

I have tried the following:

font-smooth: always;
text-shadow: 1px 1px 2px #color;

Now the top one doesn't seem to work (I heard it doesn't work in certain instances), and the text-shadow seems to make the font glow, more than smooth.

Where should I be looking in the CSS for issues causing this, as I'm stumped?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Kirsty Marks
  • 483
  • 8
  • 29
  • You could look into [SVG](http://en.wikipedia.org/wiki/Scalable_Vector_Graphics) – Asad Saeeduddin Nov 04 '12 at 09:15
  • Hi Asad, surely it should just work with a ttf? It shouldnt make it jaggered surely? thanks for the comment – Kirsty Marks Nov 04 '12 at 09:17
  • I think you'll find an answer to you question here: http://stackoverflow.com/questions/3451541/css-font-face-anti-aliasing – David Pärsson Nov 04 '12 at 09:17
  • Hi David,text-shadow: 0 0 1px rgba(0,0,0,0.3); i take it that this maybe better, would i have to replace the rgba with the hex color? Thanks for this. – Kirsty Marks Nov 04 '12 at 09:20
  • There is no `font-smooth` property in any specification or current draft. There is just `-webkit-font-smoothing`, implemented on WebKit browsers in Mac platform (and it has its own set of values, which does not include `always`). – Jukka K. Korpela Nov 04 '12 at 11:03
  • @JukkaK.Korpela There was, at least up till css3: http://www.w3.org/TR/WD-font/#font-smooth-prop – Asad Saeeduddin Nov 04 '12 at 11:49
  • @Asad, it *was* in 2002 draft, removed when the draft was updated in 2009, probably largely due to lack of implementation efforts. – Jukka K. Korpela Nov 04 '12 at 11:52
  • @KirstyHarris, the page is rather complicated and seems to result in different styles being sent to different browsers. You have not specified which browser(s) display it wrong and in which sense, but at least Chrome seems to use `candalregular, Geneva, sans-serif` for the `h2`, differently from Firefox, which uses Verdana. It should probably be debugged locally by someone who knows well the tools used. – Jukka K. Korpela Nov 04 '12 at 13:19
  • Hi jukka unfortunately this is something I have not personally built, and understandably I know where u are coming from, my friend has asked me to sort this. Would this be easier for me to recode the menu font a fresh? – Kirsty Marks Nov 04 '12 at 14:19
  • I don't know why it would. I know he has referenced the menu to .text h1 etc, where I know he has used separate for normal h1 would it be best I rewrite it? – Kirsty Marks Nov 04 '12 at 15:06

1 Answers1

1

Generally you should avoid using ttf or otf fonts in a web production, because they will look jagged in some browsers when scaled. You should use embeddable opentype formats instead.

You can use FontSquirrel to generate a font package that contains web-safe versions of your font (also includes css), that you can use with your webpage.

Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
  • This is the first time I hear that there's a difference in font smoothing based on the format. Do you have some sources for that? – Pekka Nov 04 '12 at 09:31
  • @Pekka Sure, [1](http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/), [2](http://www.onextrapixel.com/2012/05/28/quick-tip-always-generate-web-safe-fonts-when-using-font-face/) – Asad Saeeduddin Nov 04 '12 at 09:36
  • The information is interesting, but the page uses fonts of the Verdana and Arial families, and I don’t think you can legally use them as downloadable fonts (web fonts). There are some interesting free fonts that could be used instead. – Jukka K. Korpela Nov 04 '12 at 11:54
  • Jukka theses are on dreamweaver which it has been built on – Kirsty Marks Nov 04 '12 at 12:18
  • Hi all,Please help, ive tried everything and the font still looks grainy. Can someone please have a look at the code (as ive outsourced this) and tell me what to do, is it the background thats the issue? – Kirsty Marks Nov 04 '12 at 12:53
  • @KirstyHarris Have you tried setting Cleartype off on the box you're testing this on? – Asad Saeeduddin Nov 04 '12 at 16:00
  • Asad I'm not sure how to do that can u tell me where I need t insert? – Kirsty Marks Nov 04 '12 at 16:15
  • Hi asad is there a CSS fix thou, it's just I'm sure we cannot expect every person t do this on their browsers – Kirsty Marks Nov 04 '12 at 17:07