#025: Post Typography, Part 1

(Updated on )

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!