How to Design a Style Guide Using Canva and Blogger

Wednesday, December 10, 2014

When I was on yearbook staff my senior year of high school, we had this lovely little thing called the style guide. Basically, it told us all the fonts and colors we were supposed to use for each part of our spreads. If you forgot your style guide on deadline night, you were in a bit of a rough spot and I think we all had the style guide memorized by the end of the year. In blogging, it's important to have a style guide as well. It keeps your style consistent and polished, and establishes your personal brand. I originally created my style guide using Canva and Blogger last year. As the months have passed by, I've learned new things and made little tweaks as well (this post has been updated several times.)


The first thing to decide when making your style guide is what fonts you want to use the most. I suggest having a small bank of fonts that you consistently use throughout all your graphics. Choose fonts that mix and match well and give preference to fonts you've used before (to stay as consistent as possible.) I would try to include at least one script, one typewriter font and one very plain font. I used to use a total of six fonts, but have narrowed it down to three now (Raleway, Special Elite and Princess Sofia.)

Regardless of how many fonts you use, it's important to limit how many you use in each individual graphic. I only use two fonts per graphic (other than the one I use for the watermark with my url at the bottom, which is usually Euphoria Script.) 

Begin to create templates with these fonts to experiment with mixing fonts and adding emphasis. I decided to use pink and gold for emphasis, as well as all caps.

Background & Quotes

If I don't have a background image for a graphic, I use a standard grey background (the one in the graphic for this post.) I used to try and use a stock photo for every post, but a lot of the free ones were really low quality and didn't necessarily pertain to the post. I still use a couple free stock photos (from Pixabay) now and then, but only when they make the graphic prettier and more pertainable. I also try and take my own photos when I can. It's important to add text (including your watermark) to your photos whenever possible. It makes them more pinnable and prevents your work from being stolen.

If you ever make quote graphics for your blog, they don't necessarily need to conform to your style guide (they'll be more pin-able that way.) Have fun with them and mix things up!

In order to make your style guide concrete, you should make a couple of mock-up graphics or templates to base your work off of. For my first style guide, I made a bunch of graphics that simply stated font names, hex values, etc., but the second time around, I already had all that information memorized, so I just collected a couple of my favorite graphics and decided to make all my posts match them.

Your Watermark

Since it's something you should be including on every graphic, it's a good idea to have a consistent watermark. Mine varies a little between my two graphics templates, but is always the same on each individual template. My favorite watermark matches my blog header (which I think really helps establish my personal brand.)

In-Post Formatting

Now it's time to decide how you want your in-post formatting to look. Depending on each specific detail, this may be something you format everytime you include it in a post or something you include in your HTML (or something already in your HTML...that really takes the guesswork out of things.)


My headings are just the default for my blog template, my sub-headings are large, bolded and pink, and my minor headings are simply bolded. This helps me create in-post hierachy. I do my sub-headings by hand in every post, but I'm sure there's a way to make them more automatic (I just haven't gotten around to figuring it out.

Update: After finding out how important headings and subheadings are for SEO (and how much easier they are to use), I have transitioned to using the H1 and H2 tags exclusively.


This applies to graphics as well, but I thought I would mention it here because you really have to be careful with this in your HTML. Make sure you have a limited number of colors on your blog (I stick to black for the body font, pops of pink and gold in my links, header, post titles and graphics, and light blue in the sidebar.) It's also a good idea to take/use pictures that have a similar composition and color scheme (a trick that works well on Instagram as well.) Having a limited number of colors and fonts helps your blog look uniform and neat.

If you haven't thought about this before, it's a good idea to go ahead and create a post. It can be a post you're planning on publishing anyway, or a dummy post that you never publish (make sure to note that in the title and feel free to include the graphics for your style guide.) You can go back and refer to this template whenever you'd like, whether it's because you forgot your hex values, or you're not sure what size of font you should use. If you have different formats of posts you do a lot, you may want to make a style guide for each of them. I almost always stick to one format (and when I don't, the changes are either very minor or there's not really any formatting at all) so I only ever made one template. When you're done, click preview and make sure you like what you see. Tweak anything that you don't like (after all, you're going to be stuck with this for a while.) Once you're happy, save (don't publish) your post and pat yourself on the back for creating your brand new style guide!

No comments:

Post a Comment