Building a Website with WordPress: Fonts and Colours

In our first WordPress blog post, we took you through the process of creating a wireframe in Adobe Illustrator, which is the first step to getting your WordPress website up and running. Once you’ve created your wireframe, you’re ready to get your creative juices flowing as we show you how to pick the right colours and fonts for your site.

Choosing the right fonts:

Moving onto the design stage, you get to apply fonts, colours, textures, and other imagery. Choosing the font is a very important part of making up the website. For example, by choosing a heavy, thick font, you could be conveying strength or power, whereas thin fonts could convey elegance. Before you select the fonts, you should ask yourself (or your client) what it is you want your website to “convey”, and then find the appropriate font that can communicate that message.


Staying in Illustrator, navigate into the character palette and start looking for a font in the drop-down menu. Choose a few favourites and then try to narrow it down from there. Since Geoff is creating a martial arts website, he looks to choose a font that conveys an Asian feel, or a martial arts feel. You should narrow it down to two fonts: a dominant font, and a secondary, or sub-font.

Creating a colour palette:

The next step is to arrange a colour palette that you’ll use with your design. If picking complimentary colours isn’t your thing, there is a handy tool inside Illustrator that makes choosing and assembling a colour scheme really simple. First, you’ll want to figure out a single colour that will help convey what you want your website to say. Start by setting up the Illustrator workspace by adding the colour panel, colour guide, and the swatches panel (Window>Colour, Window>Colour Guide, and Window>Swatches). You will use all of these tools to choose and create your own custom colour scheme.

Geoff starts by going into the colour panel and sets his CMYK values to try to find his base colour. Once you’ve got the base colour figured out, and it’s loaded into the colour guide panel, use the drop down menu in that panel to navigate through different colour groups that have been assigned to compliment your base colour. You can then start selecting colours from those complimentary groups, and repeat this process until you’ve found the right colours for your design (Geoff recommends anywhere between 5 to 10 colours).

Inside the swatches panel, you’ll want to create a new colour group to hold the colours you’ve chosen. Select all of your colours and choose the new colour group icon in the swatches panel. Name that group and click ok. You’ll then notice your new colour group in the bottom of the swatches panel.

Screen Shot 2014-07-11 at 9.42.11 AM

If you’d like to watch Geoff demonstrate how to select the right fonts and colours for your web design, check out the videos below. More videos on the topic of building a website from scratch using Adobe Illustrator, Photoshop, and WordPress, can be found on our website.




Save $50 when you sign up for an annual Learning Library account Learn More