Typography

Since the written word is the primary medium of your blog, typography is key. Good typography does not only make your content more pleasant to read, good typography reinforces or might even change the meaning of text.

Good ty­pog­ra­phy re­in­forces the mean­ing of the text
Butterick’s Practical Typography

Nowadays there are plenty of web services that offer fonts to use on your website. For the sake of simplicity we are going to use fonts that are available on Google Fonts. Not only do they offer a large amount of fonts, the integration is also fairly simple.

Choosing a Primary Typeface

First, choose a primary typeface that will serve as the default font and working horse for your article texts. Make sure the letters are easily distinguishable from one another. You can follow Jessica Hische's "The Il1 Test".

Secondly, choose a primary typeface which offers a variety of styles. Make sure the typeface allows you to add accents and highlights to your content. Think of formats such as headlines, sub-headlines, image captions and quotes. The typeface should at least offer regular, bold and italic styles. It doesn't hurt though if additional styles such as semi-bold, black, etc. are offered as well.

Finally, choose a typeface which works well with the general theme of your blog. For The Daily Mustache we've chosen PT Serif as our primary font.

PT Serif is a free, solid serif font which is technically very well executed. The letterforms are distinguished by large x-height, modest stroke contrast, robust wedge-like serifs, and triangular terminals.

All those characteristics lead to a very good legibility. Since it's a serif font there's also something classic and traditional about it which is in line with our main blog topic: beards!

Since PT Serif is served via Google Webfonts it's also easy to use and integrate.

Info

Anatomy of Typographic Characters

At this point you may wonder about terms such as x-height, stroke contrast or terminals. Take a look at the glossary of Typography Deconstructed to make yourself familiar with basic typographic anatomy.

Choosing a Secondary Typeface

You can actually excel with a single font if you have a versatile font family with a good range of styles. Having two fonts (one for headings and one for body text) is quite common though. Adding some variety to your font pool can make the overall appearance look more appealing. It also contributes to a clearer visual structure if used properly.

If you decide to go with two fonts, make sure they have plenty of contrast. An easy way to do this is to use a sans-serif/serif combination. If you're uncertain if two chosen fonts work well together you can take an easier route and choose a font family which offers both a serif and sans-serif version.

Links

Pairing Fonts

Pairing the right fonts can be tough. Luckily, there are a couple of great resources to ease the pain and inspire:

We're going to use Raleway as our secondary font for headlines and accents such as "read more" links. Raleway is a modern and elegant font which makes a nice contrast to our rather classic primary font PT Serif.

Raleway is an elegant sans-serif typeface, designed in a single thin weight. It is a display face that features both old style and lining numerals, standard and discretionary ligatures, a pretty complete set of diacritics, as well as a stylistic alternate inspired by more geometric sans-serif typefaces than its neo-grotesque inspired default character set. Matt McInerney

Font Size, Line Height and Line Length

It all starts with a proper body text formatting. Use a body font size between 16px and 24px and a line height between 120% and 145%.

When choosing an appropriate font size it's easier to do so inside your layout. The width of your type area and the size of the text inside of your type area determine the amount of characters in each line. An optimal line length lies somewhere between 45 to 90 characters per line. Adjust your font size in conjunction with the type area width to achieve an optimal line length.

Links

More on Blog Typography

Have a couple of minutes? Check out this short and sweet interactive guide on blog typography by Tommi Kaikkonen.

Want to invest some more? The Elements of Typographic Style Applied to the Web is a practical and extensive guide to web typography.

Text Elements

When choosing proper font formatting you should have a good understanding about your content and how you are going to organize and present it. The most common text elements you should consider are:

  • Body text
  • Lists
  • Headings
  • Quotes
  • Images & Captions

There are more elements such as intro paragraphs, code blocks, text containers, media lists, and pretty much anything else you can come up with to support and structure your content.

Additionally, you also need to think through minor text formattings such as various kinds of text highlighting (e.g italic, bold or colored highlights).

All elements need to work together properly. Based on your blog topic and layout you should already have a rough idea about what elements you need. It's time to get visual and create those elements, so go ahead and use your favorite design tool to create your typographic elements. Here is an example we've put together using Typecast:


Note

About Typecast

Typecast is a web-based design tool with a strong focus on typography. It is easy to use and comes along with an extensive library of elements. Its ease of use, solid typography defaults and customizing possibilities make it the perfect tool to set up your web typography. You can also export the generated HTML and CSS to integrate it into your project later on.

Giveaways. Cheat Sheets. eBooks. Discounts.
And great content from our blog!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.