Join Sue Jenkins for an in-depth discussion in this video Making blog headlines pop, with typography, part of Productivity Tips for Web Designers.
In this week's lesson, I'll be showing you some ways to make your blog headlines pop with a winning combination of typography, color and form. The style of a blog post headline should be visually pleasing and help readers to quickly grasp the core concept of what they're about to read. And that can be really tough to do since so many blog post headlines have several different elements beside the article title, such as the date, the time, the author name, the number of comments, and even the category. So it's really up to you as the designer to find a way to arrange all of these elements wisely.
Fortunately, one of the great things about designing a blog post header is that once you define the single post header style, your content management system software like WordPress, Blogger, Joomla or Drupal should really use it automatically throughout your entire blog with every post. A WordPress user, for instance, can edit the look of their blog post headers by editing the post metadata header CSS inside the single PHP file. As proficient as you may be with editing styles in your CMS system, you might want to step away from that program when you're designing your blog headlines.
Working in a program like Photoshop or Illustrator can really give you the tools so that you can quickly explore your creativity and come up with multiple iterations of design concepts. Then later, once you've perfected your design, you can easily translate that into HTML and CSS on your blog. So let's break down the elements in a blog post header and then we'll talk about your design choices, like size, color, typography and form. The first element in a blog post header is the post title itself, which should really be clear and inviting.
And though you may not be the copy editor when you're designing for a blog, you can certainly recommend that your content providers aim for between three and seven words for their headline text. Any more then seven and your copy will likely run into two or more lines. So for the rest of this demonstration, I'd like to switch over to Illustrator and show you some examples. If the font for your blog post headers hasn't already been preselected by your blog's theme, be sure to choose a font that fits harmoniously with the rest of your blog's design.
The next thing you want to do is think about how you should write out the headline and determine whether to use initial caps on every word or all caps for the entire thing. Here are a few examples. The feel of the headline clearly changes with the font's face, style, size and case. So, for example, these three fonts, you could do a San Serif, a Serif or a Slab Serif, and each of those has a different flavor. You could go all caps. You can use a scripty type font like, I believe this is Lobster from Google Fonts.
While this third one feels a little more newsy, like it's really important. You could also go with a font that has a typewriter feel or something that's also all caps, but really bold, has a really strong presence or even use a script, you know, some fonts that may be appropriate to use a script. The next consideration is whether or not to include the date time, and if you do, how should you format it? You can include the full word or an abbreviation for the month and day of the week, like September or Sep or Sept, and Thursday, Thurs, Thur, and Thu.
If you include the time, you can use a 12-hour clock either with or without the a.m. or p.m. You could use a 24-hour clock and you can use choose to include or not the time zones such as PDT, EST or UTC-4, which stands for Coordinated Universal Time. You can write out your date in numbers using month, day, year, or day, month, year format with the year using two digits or four digits. You can also separate each number within the date using commas or pipes or dashes, bullets, slashes or any other characters that work for you.
You can even use a calendar style layout to display the full date. Regardless of the format that you choose for your date and time, be sure to always include the year. Without it, the reader has no idea when something was written or posted, and in many cases, knowing when something was written can be just as important as what was written. The next consideration is how you should list the author name. Most sites list both the first and the last name, preceded by some kind of preposition or verb preposition combo like posted by, published by, written by, read more by, story by or filed by.
It's also helpful to list and link to the blog category that the post will be filed under so that visitors can easily view more posts on the same subject. So like the author, the category name is often preceded by a verb preposition like filed under X or posted in Y. Blogs that are more interactive in nature may also benefit from showing the number of comments received for each post. Comments are usually listed number first, followed by the word Comments, either with or without some kind of talk bubble, or ribbon icon like these.
Now that you've seen all the possible elements that can be combined into a blog post header, it's time to put them all together. You'll start by determining the blog post header width unless the size is pretty determined by your blog's theme. Once you have your width figured out, you can set your type and start to play around with the font faces, sizes, styles and colors, as well as background colors and patterns, textures and gradients. In addition, you can add stylistic comments like rules and flourishes and dividers and icons, and the more you play, the more likely you'll be able to create a style that really works perfectly for your blog posts.
Let's take a look at some of these examples. And I've used different fonts here so you can get the different feel for how you might combine the elements. So the first one, I have a really simple, interesting display font, but it has a unique personality. Below that, I have all of the blog post information, but I've highlighted the author name, the category and the number of comments. In the second one with the green background, I'm using pattern and just two colors so the white text above makes the headline pop, and then the blue text below kind of makes it recede into the background.
But I am highlighting the number of comments using a button shape. For this next one, I have a calendar style for the date and really make the headline stand out by making it front and center. Other details are in the same color as the calendar, so they recede into the background. The next one, again, the headline really pops using color and a pattern there with the rules above and below the headline. And the comments and the other details recede in the background. The one under that, we have the date calendar style, but with an icon that gives it a feel.
The headline is set in a script. And again, the author name and category is what really stands out in the additional details. Here's another example with a calendar style font using pattern, a bold headline, and other information that recedes, but matches. It's all in the same color family. We also have another one using typewriter font for the headline and a single color for accents, including the calendar, the author name and the category. Below that, we have another headline with all caps and a decorative element that separates the headline from the other blog information.
Lastly, we pair an icon with this script font and a single color for all of the blog details. However you design your blog post header, make sure that is visually pleasing, that your text is easy to read and that you make your aesthetic decisions support the content and the overall blog theme. A well-thought-out combination of topography, color and form should make your headlines pop and grab your reader's attention.