SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mac rendering of web typeface

    Hi! Forgive me if there's a better forum to post this in but I presume the solution will ultimately be a style specification.

    Problem: The serif font on a site (http://www.votemonica.com) displays fine in all browsers on Windows but looks chunky/clunky (higher weight?) in Firefox and Safari on Macs. The font face is Georgia, which is available on the test Mac.

    I've tried switching the font face to Times and (separately) setting the font-weight to 100 but the display is no better.

    Currently, I have the letter-spacing set to 1px for macs only (using a php conditional) so that it's at least easier to read. The result can be seen in the left nav menu and the headline in the red box here: http://www.jamestbaker.com/typeTroubles.png.

    The windows display (which is how I would like it to appear on the Mac, too) does not include the letter-spacing and is pictured here: http://www.jamestbaker.com/fontFantastic.png

    Following are the relevant styles:

    .menuMainCurrent {
    background: url('images/menuCurrentPage.png') no-repeat;
    font-family: Georgia, Times, "Times New Roman", Norasi, Rekha, FreeSerif, serif;
    font-size: 17px;
    color: #FFF;
    height: 26px;
    width: 132px;
    padding: 8px 0 0 8px;
    /* php conditional to add letter-spacing for macs here*/
    }

    .menuMainLink a {
    font-family: Georgia, Times, "Times New Roman", Norasi, Rekha, FreeSerif, serif;
    font-size: 17px;
    color: #FFF;
    display: block;
    height: 26px;
    width: 132px;
    background: transparent url('images/menuRollover.png') no-repeat;
    background-position: 8px 0;
    padding: 8px 0 0 8px;
    /* php conditional to add letter-spacing for macs here*/
    }

    h1 {
    font-family: Georgia, "Times New Roman", Times, Norasi, Rekha, FreeSerif, serif;
    font-size: 25px;
    color: #FFF;
    padding: 10px 0 5px 5px;
    }

    Can anyone tell me how to get the serif font looking cleaner (same weight?) for the Mac as it does for Windows? Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't think there's anything you can do about this because fonts on a mac use a different algorithm and will usually appear fatter and slightly blurry to the eye especially when compared against Georgia.

    These links explains the reasons why:

    http://www.joelonsoftware.com/items/2007/06/12.html
    http://www.codinghorror.com/blog/200...ixel-grid.html

    You can compare typefaces here:
    http://www.typechart.com/?cat=8
    http://www.tucson-webdesign.com/font...ts_Groups.html


Bookmarks

Posting Permissions

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