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!

Comments

  1. Matthew
    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?

    • Chris Coyier
      Permalink to comment#

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

  2. Paul Ciccone
    Permalink to comment#

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

    • 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. 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.

    • 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 =)

    • 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. williammalo2
    Permalink to comment#

    You should use:
    h2+time{display:block}
    it only targets time if it is after a h2
    http://jsfiddle.net/JCSEh/

  5. krompi
    Permalink to comment#

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

    <article class="module">
     <header>
        <h2>Heading</h2>
        <time>July 30, 2012</time>
     </header>
     <p>...<p>
    </article>
    

    Are there any reasons not to use this?

  6. Brian Enriquez
    Permalink to comment#

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

  7. lukeluukeluuuke
    Permalink to comment#

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.