View Full Version : Large Sized text headings look terrible

Nov 13th, 2009, 08:13 PM
I would like to have all my headings consistent, and obviously CSS is the way to go. I would like my text headings h1, h2, etc. to look similar to the ones on this site:


However, when I follow the same coding, same fonts, sizes, etc., MY text looks awful, especially for letters that are rounded like "O" or "C". Anything that isn't a straight line looks all jagged. I can't seem to make my text any larger than 13px, or else it looks jagged. It doesn't seem to matter what fonts I use, either. How can I get my larger text to appear smooth?

A sample page of my work is here:


The "Our Company" heading is not smooth like the sample website theshaun.com.

Nov 13th, 2009, 08:31 PM

He's using something called sIFR (http://www.mikeindustries.com/blog/sifr/) to replace the headings with different fonts, namley DinPro.

sIFR uses flash and JS to replace pieces of text with fonts outside the normal web-safe fonts, as it can display different fonts regardless of whether the user has them installs.

Anyhow I don't think your font looks to bad at all, it doesn't seem jagged to me! For me Verdana or Arial always works best, with a not-too contrasting colour, a nice blending colour, and then add 1px letter spacing for some titles to spread it out.

Nov 13th, 2009, 10:29 PM
Agreed with Scriptet in that I don't think the current fonts are jagged... well, any more jagged than at the other site you linked to, which is about the same as I see everywhere else. What screen resolution are you viewing them in?

Nov 13th, 2009, 11:08 PM
My screen res is 1280 x 1024.

I had to go and check it, and when I did, I noticed a box that said:
Smooth edges of screen fonts. It was not checked off, so I checked it off and saved the setting. This helped allot. Perhaps that's why everything looked so terrible.

It doesn't explain why everybody else's sites look so good, though, even when this setting was turned off.

It also concerns me that other people may not have this setting checked off, and then the site will not be very readable.

I guess that's just normal and acceptable?

Nov 13th, 2009, 11:23 PM
Are you on XP and/or using Internet Explorer?

Nov 14th, 2009, 12:36 AM
Windows 2000, Firefox

Nov 14th, 2009, 01:21 AM
Your text rendering is very different to how almost all your users will see it. I highly suggest you switch to a more modern development environment if you want to test even vaguely thoroughly.

Anyway, Windows has three or so ways of rendering text:
1) No anti-aliasing (default below XP, I believe)
2) "Standard" anti-aliasing (default on XP)
3) ClearType anti-aliasing (default on Vista and 7, available on XP)

All three of these will produce different results. It's quite likely that you've switched, or that one changes at a higher font size; for example, "Standard" becomes pleasingly smooth at 16px.

Nov 14th, 2009, 01:33 AM
Heres quick screenshot for your reference (XP SP3, FF 3.5)


As a tip the more a colour stands out, and the less it blends the more defined the font becomes and it can tend to look jagged, e.g if you were to choose a bright yellow or something.

If they are a few common headings, then using images is an option
If they are a few uncommon headings say blog titles, then sIFR is an option, but this is if you are really bothered, imo usually you can get a desired result with just CSS.

I mean as Tom said yours looks pretty much the same as the other site you linked to, so it's not too bad, if it were me I would change the colour from orange, and re-arrange it the underline a bit possibly.

Nov 14th, 2009, 02:48 AM
Actually, my headers are in fact pale yellow. I was just using the orange to try out a few different settings.

Thanks for your help. I can see that it is definitely smooth on your end, and I have since switched to another computer and things are looking up.