The simplest way to create a website that reflects your personality and style – without building a fully customised theme from scratch – is to pick an off-the-shelf theme that suits your purpose … and make some tweaks.
Where to start?! Here are 3 simple style customisations for your website to help get you started:
Fonts are key to the personality of any website – or web content generally, in fact. Simple, businesslike, clean lines, fixed width, angular, unique, quirky, romantic, handwriting, script… just a few options to consider.
If you’re looking for inspiration, Google Fonts is a great place to start. This fantastic resource features over 800 font families available free of charge and is WordPress compatible.
2-3 fonts is usually enough … any more than that can become overwhelming! via @diywptips
2-3 different fonts across your website is usually enough:
- one for Headers,
- a body font and
- one to accent more creative content such as images
Any more than that and the variation can become overwhelming and confusing for your visitors.
Once you’ve decided on your fonts, use your CSS Style Sheet to quickly import them into your theme and set the fonts for different elements of your site.
You can convey ideas or sentiments about your brand using the colours on your website – for example, blue is often considered a sign of trustworthiness or reliability, whereas green is often associated with health and nature, or red symbolic of power, energy or passion.
2-3 different colours is often enough to allow you to accent and draw attention to different elements of your website, one each for:
- Body font
- Accent colour
You’ll often find websites using the same colour for the Headers and Body font – with an Accent colour, for example, for links and buttons.
However, to add pop to images, text, bullets, blockquotes etc…, it can be useful to to have 4-5 base colours to help make your content more eye-catching. For example, this is the colour palette for DIY WordPress Tips:
A great resource for inspiration is COLOURlovers, which features user generated colour palettes, trends, and even an upload tool to pick out colour palettes from your own photographs and images.
3. Header Sizes
Use WordPress’ 6 in-built Header styles to organise your post content, draw attention to posts, widgets or different sections of your website, or create a hierarchy within your website, for example.
- H1 is generally the largest, used, for example, for the site title.
- H2 is often used for post titles, page titles and widget titles.
- H3 can be used, for example, for section headings within post content.
- H4 is great for sub-headings.
A great way to differentiate content across your site is with Header sizes.
With regard to post content, it’s easy to use the dropdown at the top of your visual editor to select the relevant Header – text, including font size, is formatted automatically.
However, if your content includes post images, or creating printables, cheat sheets, or any other resources that you’re creating outside of WordPress, keeping Header sizes and hierarchy consistent with your website will help your readers maintain the association with your brand across your online and offline content and create a more cohesive brand identity.
Again, you can set the sizes for each of these Headers within the CSS Stylesheet of your WordPress Theme.
Get the DIY Style Reference Sheet
Make sure you make a note of your choices for easy reference so you don’t have to hunt around for your stylesheet every time you need to replicate your website styles. To get you started, here’s a handy reference sheet you can use – I’ve also included a version complete with DIY WordPress Tips style customisations as an example:
DIY Style Reference Sheet