SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    font weight trick anyone?

    Does anyone know if there is a way of making a font thinner by using some Javascript trick?

    I'm implementing my design for a dark website with light text on top and the text looks much thicker than in Photoshop. It's a known issue, I realise now, but I'd like to find a sort of hack even if it's an ugly one.

    thanks

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some fonts are heavier than others, and some users don't have the fonts installed that you test with, and use a substitute that may have a different look. Aside from that, most browsers allow the user to specify his own style sheet, which may call for a different font/size/weight than you like.

    You can try setting the style of the font-weight to 'lighter', but that may not work at all, or it may make it too 'thin' for some.

    At present, the only way to dictate the appearance of text on a web page is to deliver it as a graphic.

  3. #3
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the issue I'm talking about is explained here: http://24ways.org/2006/knockout-type

    There is a fix for webkit browsers but I thought maybe with some Javascript there'd be a way to achieve thinner text.

    I'm only using websafe fonts here.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It depends on how many font variants there are. You can set it to use the thinnest one that is available by using font-weight:100
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah but unfortunately that property doesn't work on most browsers. I was hoping for a work around really.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Raphaelle View Post
    yeah but unfortunately that property doesn't work on most browsers
    That's because most fonts only have two or three weights and normal is usually the lightest one so that 100 and 400 produce the same end result for those fonts.

    Those using a particular browser that handles fonts slightly differently will be used to the way the fonts look in that browser and may have even selected that browser for that specific reason.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the issue I'm talking about is explained here: http://24ways.org/2006/knockout-type
    Handy link/tip Raphaelle.

    I was having the reverse of your problem with fading text. Apparently from 0.99 to 1 opacity, anti-aliasing is handed over from the browser to the OS. You end up with a visible popping effect.

    To avoid that I'm just fading up to 0.99, there's no popping but the text looks naff.

    Using this instead has helped a lot.
    Code:
     text-shadow: 0 0 0 #aaa; /* instead of the #000 for thinner trick */
      -webkit-text-shadow: 0 0 0 #aaa;  
      -moz-text-shadow: 0 0 0 #aaa;
    Sorry I couldn't help, but thanks for the link.

    RLM

  8. #8
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad I could help someone

    Still desperate to find a fix to my thick white text on black background. Maybe something like sIFR would make a difference but I'm not sure it's a good idea for this particular project I'm working on.

    Would there be any way of creating an inner stroke or shaddow to fake it?

  9. #9
    SitePoint Addict dnordstrom's Avatar
    Join Date
    Jul 2006
    Location
    Amsterdam
    Posts
    337
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Using TypeKit is a nice "Javascript trick". Very, very easy to implement—I'm using it on both of the sites in my signature.

    Check it out. It's free to use with two fonts on one website.

    http://www.typekit.com
    Daniel Nordstrom. of. Nintera(ctive)
    -- Featured post: Part 2. Writing NI.JS JavaScript
    ----- Follow me on Twitter. Got project? Contact me.
    -------- SitePoint: Community Guidelines Be A Great Member

  10. #10
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dnordstrom View Post
    Using TypeKit is a nice "Javascript trick".
    Thanks, Typekit sounds great; I was considering looking onto it. However how will using Typekit change the fact that in some browsers fonts render when they are light on dark background? I just don't see the answer to that specific problem here.


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
  •