SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    The Future Of CSS Typography

    For those of you who don't skim Smashing Magazine every day or who missed out on this article, a Portuguese designer named Inayaili de Leon has written a terrific article on CSS typography, both now and when CSS3 becomes more widespread and codified. It's almost a one-stop shop for the ins and outs of using fonts and typography in your designs. (No, I'm not dating the author or anything but when I find a resource worth citing, I just up and cite it.) So, a big fat FYI for everybody.

  2. #2
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    That's actually a really great article! Thanks for sharing. Now, because I'm a jack of all trades and a master of none I had no idea that there was actually a hierarchy to properties within CSS.

    Instead of specifying each property separately, you can do it all in one go using the font shorthand property. The order of the properties should be as follows: font-style, font-variant, font-weight, font-size, line-height, font-family.
    Why do the properties need to be in that specific order? I'm sure I've not always used that order and it never seemed broken. Am I just missing something? Then again, I hardly ever use the shorthand font: property. I usually break them up into font-family:, font-weight:, font-size, etc. If I'm breaking them up into individual properties is it still important to keep them in some sort of cosmic order?
    TAKE A WALK OUTSIDE YOUR MIND.

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that order has bitten me in the backside a number of times. Especially the order of the background-position coordinates - it confuses me because it's horizontal followed by vertical, but with margin and padding it's vertical first.

    If you break them up into the individual properties then it doesn't matter what order they're in, they're completely separate. Only in the shorthand does it matter. It's useful to do things like this:

    Code css:
    h2 {
      background:blue url('ocean.png') left top no-repeat;
    }
    .left h2 {
      background-color:green; /* overwrite bg colour only, image stays */
    }

    Thanks for sharing, Max. Once again I feel reminded of the importance of whitespace.

  4. #4
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I didn't know about the hierarchy either. I'm going to print that out and stick it on my wall (or at least in my little notebook of printed goodies).

    Jeff, congratulations on the MOTM hardware. Looks good on ya.


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
  •