SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    advanced typography question.. selective font weight changes

    hey.. i was just wondering if something was possible with css.. i have a feeling it isn't, but it should be!

    basically it has to do with font variants. if i'm designing a site and i want to use Helvetica Neue Light primarily (which would be on most new macs), I wouldn't want vanilla Helvetica in my font stack, because it would look much heavier.. I'd want Helvetica with a font-weight of maybe 60% (i made that percentage up), but if I set the font-weight for a style, it applies to it no matter what font is being used.

    Is there a way to be more specific with that?

    lemme know if that didn't make sense!

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I am wondering how useful it'd be in your scenario because only a handfull of people have Macs. We're in the minority, as you know.

    Not sure about how to go on with specifiying conditional font-weight...Typographers hate you messing with original font weights anyway.

    As per your specific request, I wouldn't know how to do it in CSS alone. Of course you know you can override one declaration by specifying another one below it:

    Code CSS:
    body {
        font: value; /* Everyone */
        font: value; /* Modern Macs get some extra stuff */
    }

    But I don't see how that would be of any use in your scenario.
    Perhaps some Javascript can help, but I can't think of a CSS method.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does seem probably a bit beyond the scope of CSS.. basically i wasn't sure how font variants get approached in CSS/combined with the font-weight attribute. because like you said, ideally you don't want to muck with a typographer's font by using font-weight, but at the same time, font variants like 'light' are comparatively uncommon, as are light looking fonts and you wouldn't want to rely on every person having one who went to your site.. so just thinking of the best looking way to handle that! Thinking that if I'm sticking to CSS (which I prefer to do) it may be best to just use font-weight with helvetica/arial/sans serif font stack.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    If you really want to be more daring, you could go with using @font-face instead. Not really widely supported, heavy, but you'd be able to serve light typefaces that are allowed to be served freely and have a slightly wider audience...

    Some good reading material on font embedding:

    http://clagnut.com/blog/2166/
    http://www.alistapart.com/articles/on-web-typography/
    http://paulirish.com/2009/bulletproo...tation-syntax/
    http://snook.ca/archives/html_and_cs...bedding-master

    Fontsquirrel has a nice collection of fonts you can use for commercial projects legally. You may also like these.
    Maleika E. A. | Rockatee | Twitter | Dribbble




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
  •