I’m a huge homebody. It took me years to get my place to its current state of coziness. But every so often I get an itch and feel I need to change things up. So I’ll add a piece of furniture, remove one, add new art to a wall or take some down. Just a few small tweaks is usually all it takes.
You can do the same for your WordPress site. I’ve got a few simple tricks that can give your site that mini-makeover it needs.
1. Body Text Line Height
Adding line height is one of the simplest fixes but most often overlooked.
What is line-height? It’s the space above and below each line of text in a paragraph. In print it’s called leading.
Smushed text looks bad. When reading, our eyes need enough room to moved from one line to the next to maintain a natural flow. Too much line-height will cause your eyes loose its place.
Here’s a side by side of the same paragraph.
Notice how the middle paragraph is much easier to read the the other two.
How to do it
There’s a really simple rule for the right look: set your body‘s line-height to 150%.
In your stylesheet it would look like this:
body {
line-height:150%;
}
Adding this to your stylesheet is as simple as installing a custom CSS plugin. Jetpack and Simple Custom CSS are two plugins that let you customize your CSS.
I’ve found some fonts look great up to 180%, so play around with the numbers. See what works with your design.
2. Fonts
When I started designing for the internet the only choices available were web safe fonts to your own WordPress theme. When CSS3 rolled around, web designers were finally able to get more creative and including web fonts in their site designs. With today’s endless choice of fonts, you won’t be running out of options anytime soon.
Here are some of my current favourites.
How to get it
Google Fonts has an amazing choice of fonts. Easy Google Fonts is a plugin that make it easy for you to add any of those fonts. You can change the body fonts as well as each individual header element. It also lets you set custom control by adding your own css selector. For example, if I wanted to change the site title font for Melody, I would add the following under the CSS Selectors area in the plugin:
.site-title
Then I could easily change my font to what ever I want. The sky’s the limit so test it out, but be sure to follow the all important rule of two to three fonts. Max!
3. Images
Images are usually the first thing people notice when they look at your site. Which is why using quality images is so important.
Over the last few years, more and more sites offering free, high quality images are popping up such as Unsplash, Jay Mantri and Picography. And if you don’t mind paying for your images, you’ve also got sites like sites like Stocksy, 500px and Creative Market.
How to get it
Here a list of sites I like to use.
Free Images
Paid Image
So there you have it! Three easy ways to bring your site’s design up to the next level. Got an easy ways to make your site look better? Would love to hear about it.