Typepad Master Class: Styling Headers in Posts

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

An often overlooked tool when composing posts is the Headers formatting for your text. The Typepad compose editor offers six header options, the default styles being a difference in size and, depending on theme, weight. This Master Class post will cover how to further style the headers so that you can begin to use them (and use them for Good...or Evil, I guess).

  

This is relatively simple to get started, since we've already provided half the information in our Knowledge Base or previous Everything Typepad articles.

If you're a Pro Unlimited member of Typepad, then your options are as follows:

• Use Typekit or Google Webfonts
• Provide Typekit the CSS selectors or add the selectors to your Custom CSS screen

If you're a Pro Plus member of Typepad, then your options are as follows:

• Use Typekit
• Provide Typekit the CSS selectors

The selectors to reference, for header options 1-6, are:

• .entry-content h1
• .entry-content h2
• .entry-content h3
• .entry-content h4
• .entry-content h5
• .entry-content h6

You'll need to specify the entry-content portion so that only the header sizes within your blog posts and pages are affected by the styles.

Pro Unlimited

Whether you use Typekit or Google Webfonts, you can achieve the greatest amount of customization by entering the CSS yourself at Design > Custom CSS. This will allow you to add more than just the font, so additional style options are available to you.

In the images above, you can see a header style I selected by following the directions on how to add Google Webfonts on my blog. For the headers themselves, I used the following CSS:

/* set the font */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: 'Maiden Orange', cursive;
  }

/* set the font sizes */
.entry-content h1 { font-size: 40px; }
.entry-content h2 { font-size: 36px; }
.entry-content h3 { font-size: 32px; }
.entry-content h4 { font-size: 28px; }
.entry-content h5 { font-size: 24px; }
.entry-content h6 { font-size: 20px; }

The font I chose didn't have a separate font style for bold or italic, so I chose to make the headers stand out more by setting specific sizes for them. In their current state I will now be able to call attention to areas of my post that discuss specific topics of interest or that I feel are important and want to make sure my readers see.

If, however, the font you chose does have additional style options, then you could select them at either Typekit or Google Webfonts. Afterward, apply a font-weight or font-style to the specific headers, depending on how you plan on incorporating them into your blog. That code would look similar to:

.entry-content h1 { font-weight: bold; }
.entry-content h2 { font-style: italic; }

Pro Plus

As a Pro Plus member, you won't be able to use the Custom CSS option with Typekit, but you will be able to add the .entry-content h# (replace # with the actual 1, 2, 3, etc) selector(s) to the kit in your Typekit account. Follow the instructions for how to do so, which can be found in our knowledge base article linked earlier, as well as in Typekit's help documentation. Note that you will only be able to apply the font to the headers, not additional styles like size.