The Epic Behind-the-Scenes Details of the DYOB Redesign: Day 3

Welcome back to Day 3 of the DYOB Relaunch week and I want to talk about fonts and share my branding board with those of you that haven’t seen it yet. In case you haven’t caught on yet, all week long I’m walking you through my redesign story, the reasons behind some of the decisions I made and also what went wrong.

Here’s the agenda:

Day One: What’s the Point?
Day Two: The Design/Branding Process
Day Three: Font Palettes (below)
Day Four: Design Mockups and Why I Chose My Theme
Day Five: Turning Your Blog into a Business/Making Money from Your Blog
Day Six: Newsletters
Day Seven: Social Media

Note: Some links (with a *) are affiliate links which means I may receive a small commission should you purchase something using my link. Read the full disclosure here.

DAY THREE: Selecting Fonts and the Final Brand Board

The Old Font Palette

Choosing the right font palette was probably one of the hardest (and most time-consuming) parts of this redesign.

One of the things I disliked the most about the old design was the typography. The old design used Oswald for headings, Open Sans for the copy and Jenna Sue for accents. I don’t think it was necessarily that they were bad typefaces to use, I think it was just the way I used them.

I may have mentioned before that when you start a blog, it usually ends up being a mishmash of stuff after some time. The reason for this is that when we start a blog, we may not plan for all the different scenarios we’ll end up with in the future. For example, as I was going along blogging, I later found the need for callout boxes and blockquotes that I hadn’t exaxtly thought to design ahead of time. So I threw something in the post I was working on, mostly out of need but not out of thought.

Another mistake I made with the last design was using different colors for the headings. Why on earth I thought that was a good idea is beyond me. It’s best to use size, capitalization and/or weight (font thickness) to differentiate headings and use color to draw attention to things like CTA’s (calls to action), opt-ins, etc.

Another mistake I made with the last design was using different colors for the headings.

The Font Palette Process

This time I wanted to really think things out before implementing the design. I wrote a list of each different scenario within a blog post: H1 (heading 1), H2, H3, paragraphs, bold text, italics, links, intro text, callout boxes, blockquotes, sidebar headings, etc.

Oh I almost forgot to mention, as I was throwing together my inspiration board in Pinterest (see part 2), I was adding in fonts that I liked too. I also had a running note in Evernote with fonts that had caught my eye. This gave me a good starting place when it was time to start putting them together.

My Font Palette Secret Weapon

My font palette secret weapon is Typecast. Typecast lets you create working prototypes of font layouts for the web. The great thing about it is:

• it’s free for single users
• it includes all of the free Google fonts plus 3000 licensed fonts from fonts.com
• it allows you to play with sizing, spacing and different fonts

Early on I was pretty convinced that I was going to use Raleway as my copy font just because I am personally attracted to thin, round fonts for paragraphs. Raleway is a free Google font so you can’t go wrong there and it is pretty popular right now.

Then I started testing out different heading fonts to go with Raleway. Here are some of the prototypes I came up with at the beginning:

The left uses Futura for headings, Raleway for copy and VeryBerry Pro for the blockquote.
The right uses Lexie for headings, Raleway and VeryBerry Pro

Typecast doesn’t have VeryBerry Pro* and since I knew I was going to use it for accents, I added it in here using Photoshop.*

Not Quite Done Yet

Once I had done the initial layouts in Typecast, I made all future changes in Photoshop just because of the flexibility it allowed me. Of course having hundreds of typefaces to choose from in my Design Cuts font bundles* made it all the more difficult.

I created a sample blog post layout to test out some of the combinations, as well as design a blockquote.

Blog post layout in Photoshop to test out a few different font combinations.

I tested Raleway, Texta* and TT Chocolates,* the latter two of which I had found in my Design Cuts arsenal.* I was immediately in love with TT Chocolates and played around with it to see how it would look in headings, in different weights and italics.

Too Many Fonts

I always say that you shouldn’t have more than 3 fonts in your font palette. This gives the design a more tidy and consistent look. So it’s funny to think that at one point, I was using 4 different fonts in my prototype layout without realizing it.

I also realized that all the fonts I was using were fonts I would have to install to the website myself, thereby bulking up page loads. That’s why it made sense to me to use TT Chocolates for both the copy AND headings. I would just use all-caps for all the headings in different sizes to help them stand out.

The condensed font that you see here and there on the blog is Oswald. It was actually already part of the theme I bought and customized. At first I wanted to replace it, but then realized that it worked well in small doses for contrast. Oswald is a Google font which means I didn’t need to install it to the website.

Learn how to use Google fonts and other fonts on your blog

In the end, the three typefaces I chose were: TT Chocolates for almost everything, Oswald for some small data like dates/categories and subtitles on the home page and VeryBerry Pro which I try to use sparingly throughout the site.

Want help with your own font palette? Check out my Beginner’s Guide to Fonts for Your Blog.

Brand Guide

Now that I finally had the fonts worked out, it was time to put together the initial brand guide so that I could keep referring to it as I worked on mockups for the home page and blog page layouts. Working on a brand guide and a mockup kind of go in tandem for me as elements you think will go together end up being just a tad too much when placed in the design, so during the design process, I kept the brand guide a little loose and modified it as needed. But once everything is locked down in the final mockups, then so should the brand guide be to ensure consistency in any future design elements.

Here is the final DYOB Brand Guide:

The Day Three Giveaway

Time for the third day of giveaways! Come on over here to enter.