Tools for Your Business

Crafting Your Website's Personality with Colors & Fonts

Let’s start by expanding on the importance of primary and secondary colors, discuss how color and font choices can convey specific feelings in web design!
A young woman smiles confidently as she holds up a colorful paint palette to her eye, playfully peering through the hole in the center, against a vivid blue background.

Understand Your Brand and Message

Jim Traister the founder of Make Things New

Jim Traister

Founder & CEO

When designing your website, think of it as creating its unique personality. Just like big companies, your website can tell a story through its colors and fonts.

Consider well-known brands like Coca-Cola and Nike. Coca-Cola uses bright red (a primary color) to symbolize energy and excitement, making you feel the fun of sharing a Coke. Nike, on the other hand, conveys motivation and action with a bold and dynamic look.

A woman in a red top and gray trousers playfully holding a colorful watercolor palette up to her eyes like a pair of glasses, against a blue background.

Using Colors and Fonts to Convey Feelings on Your Website

Defining a Color Palette:

Look at McDonald’s and Apple. McDonald’s uses bright red and yellow to be lively and friendly, while Apple keeps things simple with white and gray for a modern look.

The Psychology of Colors: Colors have feelings too! Let’s explore some:

The Psychology of Fonts: Fonts are like handwriting for websites:

Colors and Fonts: Unleash the Emotions on Your Website

Colors are like the superheroes of your website; they can make visitors feel different emotions.

Think of fonts as the voice of your website. So, just like picking the right words, choosing the right font helps your website express its personality and connect with visitors

Now, Let’s Unpack the Emotions Behind Colors and fonts to help you decide:


Imagine you want your website to feel trustworthy and dependable, like a wise elder. You can choose:


If you want your website to feel relaxed and approachable, like a fun hangout spot, consider:


To create a warm and welcoming atmosphere on your website, as if you’re inviting everyone over for a cozy chat:


If your website is all about class and sophistication, like a fancy ballroom:

A modern, clean web landing page design featuring a color palette with blue and yellow elements, a sample company logo, navigation menu, and a call-to-action button.


When your website is meant to feel like a safe and inclusive space for everyone, like a big family gathering:


For a website that oozes luxury and exclusivity, like a VIP party:


If trust is what you want your website to radiate, like a reliable best friend:


For a website that screams cutting-edge innovation and creativity, like a glimpse into the future:


When your website is all about making people feel confident and in control, like a personal mentor:


If your website is a journey down memory lane, like flipping through a family photo album:


For a website that’s all about simplicity and ease, like a streamlined shopping experience:


If your website is like an exclusive club, where only the chosen few get access:

Community and Belonging:

When your website is all about creating a sense of togetherness and belonging, like a close-knit group of friends:


For a website that’s like a burst of sunshine and joy, like a fun-filled day at the amusement park:


If your website is all about getting things done quickly and smoothly, like a well-oiled machine:

Remember, colors and fonts aren’t just for looks; they tell a story and make your website awesome!

Now let’s have you use the Google Color Picker Ito pick your colors. It is s a simple and handy tool for selecting colors. It’s especially useful for web designers, graphic designers, or anyone who needs to choose colors for various projects. Here’s how to use it:

Interactive color picker tool displaying a gradient of blue hues with a circular selector positioned over a specific color, accompanied by the color's hexadecimal value #505fc7 and its rgb values (80, 95, 199).

Click on the down arrow that says: “Show Color values” where the arrows are pointing

You’ll also see a color code (usually in hexadecimal format) displayed to the left of the selected color.

That’s it! Google Color Picker is a straightforward tool for selecting and copying colors for your projects. It’s a quick and convenient way to ensure you get the exact colors you need.

Now lets pick your font…

There are plenty of fonts you can choose for free from Google Font Selection (Sarah here is the link for Google Fonts: If you’re looking for some fonts to use on your website or project, you can hop on over to the “Google Fonts” (Sarah use the link here again) website.

It’s like a treasure trove of fonts you can use for free! You can type in your text, see how the fonts look, and pick the ones that match your style.  It’s like a font playground just waiting for you to explore!

Don’t use cursive fonts; they’re tough to read on small screens. Choose fonts like “Arial,” “Helvetica,” or “Verdana” that are clear and legible, even on mobile devices.

Why: Most people use phones to browse, so make it easy for them. Remember, colors and fonts aren’t just for looks; they tell a story and make your website awesome!


So there you have itr! We’ve taken a deep dive into the amazing world of colors and fonts, and how they can make your website feel all sorts of emotions. Remember, it’s not just about making things look pretty; it’s about telling a story and connecting with your visitors.

Whether you want your website to feel serious, casual, friendly, elegant, family-oriented, luxurious, trustworthy, innovative, empowering, nostalgic, simple, exclusive, like a community, full of happiness, or super-efficient, you now have the superpower of colors and fonts to help you achieve that.

And hey, when you’re ready to pick your colors, you can use the Google Color Picker (check it out here: [Google Color Picker]). It’s like a magic wand for choosing the perfect shades. And don’t forget, when it’s time to pick your fonts, Google Fonts (you’ll find it here: [Google Fonts]) is your font playground, filled with awesome options.

Oh, and one last tip: Keep things simple and easy to read, especially on mobile devices. Most people surf the web on their phones, so make sure your fonts are clear and legible.

Your website is your canvas, and you’re the artist.