13 posts

Aller font looks horrible

12/05/2011 a las 15:11


I use the Aller font on a site but it looks horrible. It looks really jagged, yet on other sites it looks like it should. Anybody know why this is? I've only changed the font-size and font-weight in CSS.
It's really annoying.

How it should look:

how It loos on my site:

Editado el 12/05/2011 a las 15:26 por reaper_unique

12/05/2011 a las 15:39

I think you have a font-weight: conflict. Try without font-weight: lighter; in /* headings */ and h2
Let us know if it works.

12/05/2011 a las 15:58

mumble ... see you changed the font to bebas ...

12/05/2011 a las 16:06

yeah while waiting for a reply, but even with Bebas, I get it on different PC's and laptops. Not as bad though, I'll try what you said with Aller.

Edit: so I changed it back to Aller(display) and it looks pretty ok but it's still a bit noticeable and I don't have any weird CSS construction, or at least not that I notice.
but I think I'll go with Bebas. It looks better.
Also, using that @font-face generator of fontsquirrel made it better, I think.

Editado 5 veces. Última edición el 12/05/2011 a las 16:15 por reaper_unique

25/05/2011 a las 06:28

I also use Font-Squirrel, and it's not the font, it's Font Squirrel and it looks that way for everyone. An alternative is to use Cufon, but Cufon also has cons too, nothing's perfect so just stick with Font Squirrel. Notice how on the page, they show a preview, HOWEVER, when they show the font "Aller" at the top, notice how it's jagged also. And the custom fonts on Font Squirrel, they're jagged to.

Take a look:

CSS Solution, use "text-shadow", makes the font look smoother. Not compatible in every browser, but in most. Use:
text-shadow: #fff 1px 0 1px;
text-shadow: #fff 1px 1px 0;

25/05/2011 a las 08:10

Thanks for the info, never noticed that. And indeed it's not the font because when I use it in photoshop it looks fine.
But to me this question is solved

26/05/2011 a las 02:58

No problem.

27/05/2011 a las 05:31

It also depends on browser. Here's an example. (Opera in this case doesn't apply AA to the font)

UPDATE: and looking at Berrybellebee's pic, I must say Chrome doesn't apply AA either. AFAIK, Firefox 4 apply AA correctly

Editado 2 veces. Última edición el 27/05/2011 a las 05:36 por SashiX

27/05/2011 a las 05:50

True, however I noticed most browsers don't AA the fonts. And really? Firefox 4 doesn't AA fonts for me. I use Font Squirrel on my site, and the font looks rough, I add text-shadow (like I said above) to make it look smooth, but it still doesn't look as smooth as it does in for example Google Chrome.

Take a look:

27/05/2011 a las 11:45

Ah, aren't browsers wonderfull :p ?

27/05/2011 a las 16:43

Berry, strange thing, because I installed FF4 when it came out and I can say you with confidence that in my case FF4 was applying AA, well, it was a very heavy AA All fonts were as if all of them were in bold and with AA Strange. And, unlike in Safari, in FF I haven't found any option to change/enable/disable that "AA"
As for Chrome and after reviewing IE9, Opera, Chrome and FF... the only browser that apply AA is IE9, don't understand why are you saying "it still doesn't look as smooth as it does in for example Google Chrome." You first Chrome screenshot looks identical to your second FF4 screenshot.

@Reaper: yeah

Editado el 27/05/2011 a las 16:45 por SashiX

27/05/2011 a las 18:08

When I said "it still doesn't look as smooth as it does in for example Google Chrome", I meant when you add text-shadow to the CSS, it makes the font look smooth in Chrome. But in Firefox it doesn't, it still looks rough.

27/05/2011 a las 21:41

Aahh, OK, understood, Berry

Huso horario CET. Ahora son las 10:31

Anuncio de Otto Maurer
Política de Privacidad  -  Contacto