Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Large Sized text headings look terrible

    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:

    http://theshaun.com/

    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:

    http://bossteel.com/Comptaupe.html

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

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Hi,

    He's using something called 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.

  • #3
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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?
    Are you a Help Vampire?

  • #4
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Are you on XP and/or using Internet Explorer?

  • #6
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Windows 2000, Firefox

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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.

  • #9
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •