Choosing fonts and colours when designing a website
When designing any website it is important to gather certain information which will help you be consistent with design. This is particularly necessary when it comes to choosing fonts and colours. Since designing over 250 websites I have put together a process when choosing fonts and colours which I would like to share with you and may help you in the future when designing your own website or for one of your clients.
Firstly I would like to point out half the job may have been done for you.
How, you may ask?
A company may already have a logo designed and branding guidelines in place. If this is the case it will probably include both their colour palette and primary fonts. These will detail what fonts are to be used and also the hex colours for the website. You can even offer creating these guidelines and assets so they have the information available for future use across their marketing collateral if they don’t already have them.
What you can do as part of the logo that’s been designed is use the primary font for headings and titles across the website. This keeps the brands identity consistent. It also keeps font variation down which I would suggest should have a maximum of 3 fonts used when it comes to any brand or website. This can be headings, body text and quotations.
So using the logo files you can then use a eye dropper tool either from a photo manipulation software like Photoshop or from a nifty browser tool.
In Photoshop the colour picker tool looks like this….
Simply click on the colour and bring up the colour picker viewer highlight the #hex colour to transfer across to your website,
….save the swatch to go back to or create a palette within photoshop for future use. As shown below:
If you are taking the colour from a current website or from online you can use colorpicker 3.0.1 available from the firefox tools>add-ons>extensions menu.
Google Chrome has a similar tool you can use (Eye Dropper 0.4.3) however there are a few to choose from:
If no font or colour palette has been chosen for the website you will need to form these styles from scratch. Some inspiration and knowledge of typography is going to be helpful at this point. I tend to head straight over to Pinterest if not for anything but to get my head in gear and get in the zone. Start saving what fits the brand and styles you want to achieve. From this point you need to start to form the colour palette.
Two amazing websites that can aid you in doing this is coolors.co and colourlovers.
Coolers.co is a fast and simple tool which you will quickly get hold of. It gives the option to explore palettes and create and organise your own. You can adjust and refine your colours to suit your current website you are working on. It is also available to use on iOS and android. Great to have a tool like this available on the go.
This has lots of pre-made palettes available to choose from. You can get all palettes in #hex, CMYK and RGB just like coolors.co. You can explore what other brands are using and choose palettes in order of categories. I find this helpful if the website I am doing is around a particular niche, I can search for this topic and see what results I get.
So once you have put together your colour palettes it is then for you to assign how these colours will be used. There is no set way I go about this myself but I might do a bit of experimentation to see what works and fits the brands identity, which could be image overlays, heading colours, footer background, body links, subtle gradients etc. When you are applying the colours make sure you get a screen shot of how each page looks as a whole this can be done by using another firefox extension called Screengrab. Just simply search for this under tools>add-ons>extensions then do a search.
So if a font has not been used which is in the logo design itself you will then need to think about what combinations are going to work for the website design. As I have mentioned before you will ideally want to stick to 2-3 fonts. The fonts you choose will need to be commercially free when being used with any companies website. I tend to use fonts which come from 3 sources. These sources should have plenty to choose from and you will be able to put together combinations which fit the brands identity.
This is probably become the most common method in choosing a font and a lot of wordpress themes have these fonts pre-installed for you to choose from. If you are not using wordpress and they are not pre-installed you can follow these instructions to add them. In regards to combinations to use you can use the below infographic as a guide.
The second source is another website fontsquirrel. 90% of these fonts are free to download. You can search for the right font in regards to style and write out some headings to see how the font looks before downloading. A lot of google fonts are also on this website.
Adobe Type Kit
In my opinion this is where you will find the best quality fonts, there are lots to choose from and you can also search by classification, various properties and whether the fonts are best for headings or body text. Most are free some you will need to buy. You can install and use the fonts on your website by firstly signing up to an adobe package. Once you have done this you can install the typekit plugin if you are using wordpress (see below).
If you are building a custom website you will have to setup a kit to be used, this will give you the code needed to add to your header.php and your css files.
So by using these resources you will certainly be able to put together effective combinations to be used on the website you will be designing. I try to keep to simple rules when it comes to making my choices. For headings I ensure it fits with logo design and the brands general style, this typeface can be more expressive and bold. Check out the examples from typekit below.
For the body text I use more legible typefaces which can be both serif or sans serif fonts. See examples below.
If your body text cannot be read when very small then it’s probably not the right sort of typeface to be using. Remember keep it simple and clear.
I hope that these tools and advice will help you in the future when choosing fonts and colour palettes when designing websites or even creating your own. Do some experimentation and testing as you go and even create a brand board which incorporates all these elements so you can see how they will work together.