Building the Blog: Day 3

Today is fairly straightforward. We’re going to add some font styles to the text in order to give it some personality beyond the defaults.

@import url("https://fonts.googleapis.com/css?family=Muli:300,400");

We’ll first import the font from Google Fonts. This is an easier solution than self-hosting the fonts mainly because it’s a free option, but also because it reduces the boilerplate and setup of getting styles properly working on all browsers. It’s recommended to use TrueType Font (TTF), OpenType Font (OTF), Web Open Font Format (WOFF), and Embedded OpenType (EOT) versions of the font for maximum browser support coverage. Fonts, like software, have some interesting copyright and usage restrictions and are subject to certain licensing conditions. Sometimes you may not have each file type of a font or not have the rights to modify or redistribute the font files - using openly provided fonts reduces the headache of understanding your legal abilities.

Though, free and open fonts are definitely not a panacea. I’ve heard great things about Typekit which offers a paid service to use any of the fonts in their collection, their value being that they handle all the licensing for you. And sometimes you just need such a unique paid font that no substitute comes close. One recent example would be Operator Mono, a premium font but with a price that matches.

$black: #000;
$grey: #666;

.title {
  color: $black;
  font-family: "Muli", sans-serif;
  font-size: 3em;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  color: $black;
  font-family: "Muli", sans-serif;
  font-weight: 400;
}

p, ul, ol, span {
  color: $grey;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 1em;
  font-weight: 300;
}

time {
  color: $black;
  font-family: "Muli", sans-serif;
  font-size: 1.25em;
  font-weight: 300;
}

We’ll define some color variables and then set the font-family, -size and -weight of headings and inline elements. Everything is just personal preference, what looks good to me. Keep in mind that we do set a fallback font of sans-serif in case Google Fonts is unavailable or the user doesn’t have a particular font installed (which is usually the case for Helvetica Neue).

And that’s it! Tomorrow, we’ll add a splash of color to the blog.

Edit

It appears that the code syntax highlighter I’m using adds span tags inside code blocks. We’ll add some styles to make sure text inside code tags is monospaced and not changed to Helvetica from the selector above.

code span {
  font-family: monospace;
}