Sweet Tea's Branding Guide: Colors & Fonts
One of the more noticeable aspects of a brand is the color palette. Colors can foster emotion, and colors on your blog can add the right amount of visual impact, or take away from the desired visual affect you're trying to create.
In a similar vein, the fonts you use on your blog can either help or hinder your message, and I'm not just referring to the font you use within the body of your blog post. The fonts you choose for your imagery - header, post graphics, etc. - are as important to your brand as the colors you choose.
In Part 2 of Sweet Tea's Branding Guide, we're going to look at ways to discover color palettes that will work well for your brand, and play with some ways to create font pairings to help you create unique branding for your blog. (If you missed Part 1 of Sweet Tea's Branding Guide, click HERE to learn how to define your brand and read my brand story.)
When choosing colors and fonts for your branding, it's important to keep in mind that while you are designing your blog, you aren't the one reading it everyday. Most likely, you'll see your dashboard more often than you'll see your home page. So keep your readers in mind - don't try to create something so out of the box that it makes it impossible to focus on your content.
While it is perfectly fine for you to be in love with particular color palettes, your favorite colors may not necessarily translate to your blog, so be open-minded.
Pinterest is a great resource for color palette inspiration, but it's not the only place to look.
Design Seeds allows you to search based on themes and colors, or just browse thousands of palettes.
This is a great tool to use when you have an idea for a color and want to see complimentary colors that pair well.
Another fun tool is Coolors, which gives you a giant screen-wide palette to alter using the slider tools in each color section, and leaves you with the hex codes of whatever colors you create . You can also create an account to view or save palettes.
Another favorite color playground is ColourLovers. Search existing palettes based on any number of criteria, including an existing hex code.
A lot of thought and effort goes into the colors behind some of the more well-known brands because certain colors convey certain meanings to our minds subconsciously. Do you think Target chose red on accident? This infographic is a great example of the meaning of color as it relates to larger brands:
My brand's primary color is blue, which conveys a sense of trust, dependability and strength, while my secondary color is yellow, which conveys a message of optimism, clarity, and warmth.
Think about that for a second. I'm creating content that educates & encourages bloggers and creatives, while also selling products and services to help bloggers grow their brands. My color palette conveys the message that my business is trustworthy, dependable, and warm. That's spot on, if you ask me!
So do a little research on the meaning of the colors you want to use in your branding, and look around at other blogs in your niche. You might find that a lot of food and health & wellness bloggers use green in their color palette, while DIY & craft bloggers might lean more towards reds, pinks, and purples.
If you've found an image that has your ideal colors in it, it's simple to find the matching hex codes that you can then use to create all the graphics for your blog. Simply drop your image into Picmonkey to get started.
For this example, let's use one of the color palettes found on Design Seeds. I've added the image to Picmonkey's free editor program and navigated to the overlays menu (the butterfly on the far right).
Next, you'll choose the Geometric option at the top of the overlay menu and click on any of the shapes. When you add a geometric shape, you'll also see a box pop up allowing you to choose your colors:
To find the exact hex codes for any of the colors in your image, click on Color 2 (the bigger box, not the outline), then click on the dripper icon. Your mouse becomes a dripper. Mouse over any of the colors in your image and Picmonkey will match it exactly.
Once you've hovered over the color with your dripper, click your mouse to lock in your color. Finally, click on the box with your chosen color in it and make note of your hex code.
Repeat this process for every color you need to match. You can even add a text box to your image in Picmonkey and type the hex code in the box directly over each color. By saving the palette with your hex codes on it, you'll have an easy reference tool when you need to create branded graphics for your blog.
Here are a few tips to keep in mind when selecting your color palette for your blog:
- Monochromatic is sometimes your best bet. If you will have vivid imagery, like on a food or craft blog, your images will most likely contain a lot of color. This allows you to keep it simple with your blog color palette.
- Don't recreate the rainbow on your blog. Some people seem to think if two colors are good, seventeen colors are better. This will do nothing but overwhelm your readers and take the focus off of your content and images. Less is definitely more.
- Choose a primary color, a secondary color, and one or two tertiary colors. Your primary color will be the predominant color in all blog graphics, accented by your secondary color. Tertiary colors work well for descriptive text or for highlighting specific aspects of an image.
- Create a branding guide that includes not only your hex codes, but the actual colors that each hex code creates. (Add your hex codes as text to an image in Picmonkey like we did on our palette above.) You will be able to add your font choices and logo to this branding guide as well for easy reference.
Let's start with a PSA: Do NOT, under any circumstances, I don't even care if you're being held at gunpoint...NEVER USE COMIC SANS for your blog branding anything ever in the history of ever.
Alright, let's move on, shall we?
Now let's be clear - there are web fonts and there are design fonts. Web fonts are the fonts that you use in the content of your blog - posts, page titles, menu, sidebar, etc. These fonts need to be easy to read, and in my opinion, pretty basic.
Design fonts are fun. These are the fonts you'll use when creating your header, logo, and in all design elements for your brand, and the options are truly limitless.
FINDING WEB FONTS
You might be inclined to stick with the fonts that come pre-loaded in whatever blog theme you choose, and maybe you aren't even aware that you can change these, but you can. There are several great tools for finding web fonts for your blog.
The Web Font Builder is a really handy tool that allows you to type text on the screen and change the font and font size using the menu to the left. As you can see, not all web fonts are suitable for use on a blog. Script fonts, while considered "web-friendly", are not practical for blog posts. If you choose a script web font, use it only for your headings, not your blog post text.
If you'd rather browse existing font pairings, Just My Type is for you. Scroll through the various font pairing examples and choose the pairing you like best. Some are free fonts, while examples with price tags indicate fonts that would need to be purchased.
Another inspirational site for font pairings is a pretty cool site from FemmeBot that showcases Google Web Fonts laid out in various Aesop's fables. The fonts used in each fable are listed at the top of each section.
FINDING DESIGN FONTS
When it comes to finding the perfect design fonts, things can get a little trickier. You need to have some idea of the type of font you want for your brand, whether that's something hand-lettered, script, sans serif, big & bold, or any other type of font.
Creative Market is a phenomenal place to find beautiful fonts to use in your branding, but be warned - you might get addicted! There are so many beautiful font choices available that it's easy to get carried away.
You can filter your search based on font type if you want to narrow down your choices a bit, too. And here's a tip: Sign up for their newsletter. Every Monday they send out a bunch of free downloads, including fonts, and they also offer several big font bundles throughout the year!
Don't want to pay for a font? No problem! Creative Bloq put together an epic list of the 100 best free fonts, and there are some great ones on that list:
Another great resource for free fonts is Behance. You can scroll for days through this list of free design fonts:
Finally, if all this talk of fonts has got you feeling funky, this infographic might help alleviate some confusion:
PUTTING IT ALL TOGETHER
My go-to playground for testing out fonts and color palettes is always Picmonkey. If you're feeling overwhelmed, I recommend grabbing a bunch of free fonts in a style you like, and create a graphic in Picmonkey that you can alter until you have some idea of what you might like in the end.
By the way, when you add new fonts to the font library on your computer, Picmonkey grabs them for you to use. Easy peasy.
Bottom line: Take your time. While you can always update your branding later, you don't want to throw something together just to put something up on your blog.
Missed the first post in this series? Click the image below:
Like what you see? PIN IT!