SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    duplicating font family + size

    Hi - please can someone tell me the font size + family used on this page:

    http://www.supersmart.co.za/news/ins...estic-workers/

    For main content beginning "Domestic workers, who are among the most financially vulnerable"

    When I inspect with firebug I get this:

    {
    font-family:Lucida Grande,Verdana,Helvetica,Arial,sans-serif;
    line-height:140%;
    }

    but I'm unable to duplicate that easy-to-read small font size on my page when I use this:

    font: 0.9em "Lucida Grande",Verdana,Helvetica,Arial,sans-serif; color: black; line-height: 140%;

    thanks! - Val

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by valarcher View Post
    but I'm unable to duplicate that easy-to-read small font size on my page when I use this:

    font: 0.9em "Lucida Grande",Verdana,Helvetica,Arial,sans-serif; color: black; line-height: 140%;
    They appear to use 10pt "Lucida Grande", which could definitely be something else than 0.9em (depending on the font-size of the ancestor div/span/whatever).

    Please note that "em" is a relative font-size, while "pt" is an absolute font size. ie. if you want 10pt font size using 0.9em and the text is directly in the body, the body should have a font size of about 11px
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by valarcher View Post
    Hi - please can someone tell me the font size + family used on this page:

    http://www.supersmart.co.za/news/ins...estic-workers/

    For main content beginning "Domestic workers, who are among the most financially vulnerable"

    When I inspect with firebug I get this:

    {
    font-family:Lucida Grande,Verdana,Helvetica,Arial,sans-serif;
    line-height:140%;
    }
    It is also probably inheriting other styles, if you were to scrolldown on the right column you would see more styles that are ggetting applied to it .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It is also probably inheriting other styles, if you were to scrolldown on the right column you would see more styles that are ggetting applied to it .
    I also noticed that but they are all crossed out because the last two elements overwrite everything there.

    PS. Their site is truely a CSS hell, way too much selectors and ancestors IMHO.
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    And invalid markup .

    The span inside of the <p> changes the color t oblack, and to 10pt font size
    Code:
    color:black;
    font-family:Lucida Grande,Verdana,Helvetica,Arial,sans-serif;
    line-height:140&#37;;
    font-size:10pt;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you! I managed to duplicate it. I think the problem is Lucida Grande doesn't come with windows. The fix is here:

    http://www.brownbatterystudios.com/s...e-alternative/

    It's a lovely font, fits more text into a line than verdana - it's smaller, fatter, darker, easy to read.

    Val

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    ACtually I'm on windows, and I duplicated it .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes but the fix gives a beautiful italic!

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Indeed. If you have any more questions just ask .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    404
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I forgot to mention that in his later update here:

    http://www.brownbatterystudios.com/s...rid-revisited/

    he writes: "put ‘Hybrid to use, if only to account for that unknown percentage of computers still with the sub-par ‘Sans."

    My config (toshiba L300 w Vista) is in that unknown percentage - "Lucida Grande",Verdana - just displays as verdana!

    I'm so happy to have found such an easy-to-read font that fits more characters in line than verdana (which was specifically designed for web reading at smaller sizes) AND has such beautiful italic with the fix, whereas verdana italic is boring. My site is very info-rich so I needed a good legible font.

    Here's the fix for anyone wanting to try it, from:

    http://www.brownbatterystudios.com/s...e-alternative/

    body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    }

    strong, em, b, i {
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    }


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
  •