Today's weekly blog design will focus on the blog post design and formatting. I'm talking about paying attention to post elements and to style and format them just right.
Post Title
At first I though my blog post title is large enough, but it's not.
 |
| Existing blog post title. |
Take a look on this blog post from remove.bg. Just by taking a glance on the page, you could already tell: Yup, that's a post title allright.
 |
| Blog post title from the reference site |
The way the large post title stands out felt like looking at one of those poster design on Pinterest. Of course, this only benefits a certain types of posts. I also have a blog where the post title is completely hidden — it works best that way.
 |
| Updated blog post title on mobile. |
 |
| Poster design on Pinterest. |
Post Snippet
 |
| A thin separator line for post summary. |
A post snippet could be in a form of summary, or a clipped section of the first paragraph. If it's a summary, then try giving it a little more vertical space before the first paragraph to make it distinct. For example, you can give it a thin separator line.
Line Height
 |
| Line height adjustment. |
I usually set the line height on the post container level because the Blogger post HTML is often poorly formatted. But doing so results in vertical spacing that's too narrow for headings or too wide for image captions. There are also list and codeblock elements.
So I put put a few CSS overwrite for those special cases.
.postBody h2 {
line-height: 1.4em;
}
.postBody pre code {
line-height: 1.4;
}
/* etc. */Image Caption
Even if you rarely use captions for post images, you should still toggle them on in the post editor ⎯ unless you’re intentionally positioning the image as inline or in some other creative way.
 |
| Toggling image caption in Blogger post editor. |
Usually, you’ll want the image to appear neatly as a block element, and toggling captions does just that. It gives the image its own area so the styles of other elements don’t interfere with it.
Image Figure Shadow
Try adding a subtle shadow to your post image elements. For images that have the same background color as your blog, the shadow helps distinguish the image area.
 |
| Image element with subtle shadow. |