www.webdeveloper.com
Results 1 to 4 of 4

Thread: Trying to obtain a thinner font with the font-weight: lighter;

  1. #1
    Join Date
    Sep 2012
    Posts
    5

    Trying to obtain a thinner font with the font-weight: lighter;

    Below I have an example of my attempt to see a difference between a font-weight of normal, lighter and lightest. They look exactly the same in Safari and Chrome. Any suggestions?

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p.normal {font-weight:normal;font-size: 20px;}
    p.light {font-weight:lighter; font-size: 20px;}
    p.lightest {font-weight:100;font-size: 20px;}
    </style>
    </head>

    <body>
    <p class="normal">This is a paragraph.</p>
    <p class="light">This is a paragraph.</p>
    <p class="lightest">This is a paragraph.</p>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2012
    Posts
    1,495
    This does not work. Why? Because, depending upon the font family, there are basically only two font weights: normal and bold: 100 to 600 generally equate to normal, and 700 to 900 equate to bold. This is because "normal" is generally drawn with a line thickness one pixel wide, and "bold" is 2 pixels wide. You cannot get lighter than one pixel wide, and more than two pixels wide would look gross, as is the case with the font-family "Impact". Try:

    p {
    font-family:Impact,Helvetica,sans-serif;
    font-weight:bold;
    }

    and you should see what I mean...

  3. #3
    Join Date
    Sep 2012
    Posts
    5
    Thanks for your comment. I wanted to be sure that I wasn't missing something.

    So then why are all these options available, when there is only really two options: normal and bold?

  4. #4
    Join Date
    Mar 2012
    Posts
    1,495
    I have no idea, but anyway, there are other, better, ways to add emphasis, e.g. font-size or grey-scale. Always remembering that legibility is of paramount importance, so avoid tiny fonts and low contrast against the background.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles