Now that we have a blog post area to work with, we can really get into blog post typography. Arguably the most important typography on the site as it's the place a reader will be spending the most time looking at.

We start out by thinking about header tags and their sizing. Then we style the <time> element, which will be ubiquitous throughout the site.

We remind ourselves that you never letter-space lower case letters, yest we steal sheep.

We add another important color to our bits.scss file, $blue, which will be used for links throughout the site. We experiment with some other link styling but end up not going for it. The hover/focus/active states are achieved by just using the Darken() function Sass.

We bump up the font-size of the first paragraph of the article. This is just stylistically cool, but it's also a bit of a psychological trick to get people reading and interested in the article. It's also a trick for myself as a writer. I know that paragraph is going to be super big so I better make it good!

This first paragraph thing might be a little fragile. For instance, we put in a placeholder for a future Google AdSense ad, which then breaks the selector. We'll fix it though!


  1. User Avatar
    Permalink to comment#

    Hi Chris,

    Really enjoying these videos and learning so much from the workflow. Do you use a certain color scheme in Sublime or is it a customised one?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      It’s one of the built in ones in Sublime Text 2: Twilight.

  2. User Avatar
    Paul Ciccone
    Permalink to comment#

    Thanks for the “previous video” & “next video” links. :) Also the Vimeo videos are working much faster for me.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Awesome, thanks Paul.

      I’m going to bury this comment just to keep the comment thread specifically about the content in this video.

  3. User Avatar
    Angel Paunchev
    Permalink to comment#

    Why not just use a class for that leading paragraph? nth-child works, but as you said, things might change in the future and then you’d have to change the CSS as well, where if you had a simple class of .lead or something like that, you won’t need to touch it ever again. You can even reuse it throughout other parts of the site as well.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Totally, that would work, but in the case of CSS-Tricks, I wanted over 1,000 old posts to have that style as well and updating those is pretty much out of the question.

      Perhaps someday I can hire an intern who’s sole job it is to go back through the archive of posts and update markup and do things like tagging and categorizing. That would be awesome =)

    • User Avatar
      Angel Paunchev
      Permalink to comment#

      I see, totally forgot that it had to apply for previous posts as well.

      Haha, it’d be awsome, although not very rewarding for them. :)

  4. User Avatar
    Permalink to comment#

    You should use:
    it only targets time if it is after a h2

  5. User Avatar
    Permalink to comment#

    I’d have chosen a header-element for the heading-time combination

    <article class="module">
        <time>July 30, 2012</time>

    Are there any reasons not to use this?

  6. User Avatar
    Brian Enriquez
    Permalink to comment#

    “You know you never letter-space lower case characters, right? … unless you steal sheep.” HaAAahHhAAaaaaA

  7. User Avatar
    Permalink to comment#

    I was screaming for you to use nth-of-type :P

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.