Anouska Rood

menu

A strategic website helps you
(finally) turn your side hustle
into a full-time business

Click the button below to get your free Website Strategy Workbook.

Choosing fonts for your website can be hard if you have no idea about basic typographic principles. You probably know how you want your website to look, but you have no idea how to pick fonts that would work well, and work well together. Let’s dive into what you need to know to choose & combine fonts for your site to keep readers on it longer (so you can turn more of them into subscribers).

How to choose fonts: Readability

Readability is the most important part to pay attention to when choosing fonts. You want your text to be read, so make it easy to read for your websites’ visitors!

You’ll have several parts that need to be easy to read to a greater or lesser extent:

To choose an easy-to-read font, pay attention to the font-size you’ll use it with. A font that’s hard to read at a regular body font-size might work perfectly fine for a headline, if it’s used in a much larger size.

Small letters: what to pay attention to

For your main text, pay attention to the letters with small gaps, such as a, e, and g. When deciding the font-size, make sure the small openings in these letters are still big enough to distinguish them. When it gets too small (for example the e might start looking similar to c), your text becomes too hard to read. In these cases, pick a larger font-size for the body text. In 2009, a font-size of 12 – 14px used to be the regular size,  in 2013 14 – 16px became the regular size and now a quick look at font-sizes across different websites shows 18-21px to be the most commonly used.

Another thing you can experiment with is the line-height, which is the space between lines of text. When lines are too close together, the text gets harder to read, and people may lose their place in the text. On the other hand, if the lines are too far apart, the space will create disconnected lines, and the text becomes harder to read as well. As a general rule of thumb, a line-height between 1.2 and 1.5 times the font-size works well.

Also don’t justify text on your website. It might look pretty, but we don’t have the same level of control over the text as there is with print, so justifying text on your website actually makes it harder to read.

How to combine fonts

When combining fonts, make it easy on yourself by choosing fonts that are obviously different from each other. Avoid combining fonts that have barely noticeable differences between them. For your website, stick to a maximum of 2 or 3 font families, then use bold and italic versions of these families as needed. It could be one for headlines, one for body copy, and perhaps a third for things like quotes and other attention-grabbers. It all depends on the site and what you want to communicate.

Sticking with just one font family and adding variety with styles (normal, bold, italic, lowercase, and uppercase) may also work well for your website.

In general, it’s easy to combine a serif with a sans-serif font. Serifs are fonts that have strokes on the ends of their letters, whereas sans-serifs do not have these strokes. Another type of font is decorative or display fonts. These are generally harder to read and should not be used for large blocks of text, such as body copy. They may be used as headlines, but you do still need to make sure they’re easy to read even at a larger size.

Serif vs Sans-Serif

When combining fonts, they need to have a good contrast between them. You can accomplish that through serif and sans-serif differences or different size, weight and style (i.e. italic, all-caps, all lowercase, etc.).

Fonts to stay away from

Some fonts are or were widely available for free through operating systems and applications, such as Microsoft Word. They’ve become so overused for all sorts of things they were never designed for, they’ve become cliché and look amateur. Using these will not help in getting your content taken seriously. These include fonts like Bradley Hand, Brush Script, Comic Sans, Curlz MT and Papyrus. I also recommend avoiding Times New Roman, because it’s all too recognizable as a default font. It will make it look like you haven’t put any effort into the design.

Instead, use a webfont through Google Fonts or Typekit, or buy one of the many webfonts available through sites like MyFonts and Creative Market.

Want more? Fill in the fields below to download your free Guide to Visual Branding, including 6 great Google Fonts combinations.

The easiest way to have a visually appealing website is to keep it simple and stick to a limited color scheme. Pick four colors or less to create your color scheme. Pick two or three of your main values or likes (e.g. love, family, travel, your faith/religion, transformation, creation, organization, etc.) that you want to convey with your site. Then pick colors that convey those values. I’m giving a quick overview on color psychology and the science behind combining colors, to help you choose colors for your site.

How to choose colors for your site: The meaning of colors

When it comes to color psychology, keep in mind this is largely cultural: for example, in the western world, white means innocence, but in many Asian cultures white is actually the color of death. So if a large part of your target market is from a different culture, pay attention to what the colors you picked mean to them.

RedRed stands for love, energy, power, strength, passion, and heat, but also anger, danger, and warning.

 

OrangeOrange stands for courage, confidence, friendliness, and success, but also ignorance and sluggishness.

 

YellowYellow stands for brightness, energy, the sun, creativity, intelligence, and happiness, but also irresponsibility and instability.

 

GreenGreen stands for money, growth, fertility, freshness, healing, and nature, but also envy, jealousy, and guilt.

 

TurquoiseTurquoise is associated with spirituality, healing, protection, and sophistication, but also with envy and femininity.

 

BlueBlue stands for tranquility, love, loyalty, security, trust, and intelligence, but also coldness, fear, and masculinity.

 

PurplePurple symbolizes royalty, nobility, spirituality, luxury, and ambition, but also mystery and moodiness.

 

PinkPink symbolizes healthiness, happiness, compassion, sweetness, and playfulness, but also weakness, immaturity, and femininity.

 

BrownBrown stands for friendliness, the earth, the outdoors, and longevity, but also dogma and conservativeness.

 

BeigeTan/Beige stands for dependability, flexibility, and crispness, but also being dull, boring, and conservative.

 

GrayGray stands for security, reliability, intelligence and solidness, but also gloominess, sadness and conservativeness.

 

SilverA lighter gray or silver is also associated with glamour, high-tech, grace, and sleekness.

 

GoldGold stands for wealth, prosperity, and being valuable and traditional.

 

BlackBlack symbolizes protection, formality, class, and drama, but also with death, evil, and mystery.

 

WhiteWhite stands for goodness, innocence, purity, freshness, and cleanliness.

 

How to combine colors

colorwheel-coldwarm There are 6 common ways to combine colors to create an attractive color scheme for your website. They are based on the color wheel. The color wheel consists of all colors with the warm colors on one side and the cold colors on the other side. Similar colors are next to each other.

1. Monochromatic

colorwheel-monochromatic The first and easiest way to combine colors is using different shades of just one color. This creates a harmonious color scheme, producing a soothing effect and is very easy on the eyes. Combine the main color with neutral colors like black, white and gray. But, when using this scheme, it can be difficult to highlight important elements like your buttons.

2. Analogous

colorwheel-analogous This is a combination of colors that are next to each other on the color wheel. Use one color as the main color. The other colors are useful for making buttons and other important elements stand out.

3. Complementary

colorwheel-complementary These are two colors opposite of each other on the color wheel. When using the complementary scheme, it is important to choose one main color and use its complementary color for accents, so you will get a more vivacious vibe without overloading on color. You can also lighten or darken the main color to have more emphasis on the accent color (or vice versa).

4. Split complementary

colorwheel-splitcomplementary This is a scheme of three colors, one color on one side, the other two the immediate neighbors of the exact opposite of the first color. This gives a lot of contrast while giving you more choices to make elements stand out. This scheme generally conveys a vivacious vibe.

5. Triad

colorwheel-triad These are three colors that are the same distance from each other on the color wheel. It has strong visual contrast while being more balanced and harmonious than the complementary scheme.

6. Tetradic

colorwheel-tetradic This is actually a double complementary combination. This scheme is hard to harmonize; if you’re using all four colors in equal amounts, the scheme may look unbalanced, so you should choose one color to be the main color or lighten/darken all colors.

Resources to create your color scheme

Get some inspiration for your color scheme at Canva Color CombinationsColourLovers and Design Seeds, or create your own color scheme using Adobe Color CC.

Want more? Fill in the fields below to download your free Guide to Visual Branding, including some great font and color combinations.

Picking fonts to use on your website can be hard enough, but once you’ve chosen Google Fonts, you may be left confused about how to use them on your site.

Google offers three options to make the fonts available on your site: Standard, @import and Javascript. For each one, I recommend creating a child theme if you haven’t done so already.

Option 1: Standard

Open your child theme’s header.php and add the code, which is similar to this:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

between the <head> and </head> tags.

Option 2: @import

Open your child theme’s style.css and add the css code:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

immediately below the comments declaring what theme it is and such.

Option 3: Javascript

Open your child theme’s header.php and add the code between the <head> and </head> tags.

So, which is the best way to add Google Fonts to your site?

The standard way to include webfonts will have the least impact on the speed of your site. On slow connections though, visitors to your site may see the so-called Flash of Unstyled Text (FOUT), your text will show in a diffent font, then switch to your Google font once that has loaded.
The @import way will prevent that, but may slow down your site because it’ll wait for the font to load, then show the content.
The Javascript code is part of the WebFont Loader, which is a Javascript library developed by Google and Typekit that will give you more control over font loading. It’s unlikely you need the kind of control the Javascript code provides and it’s more complex than you’d probably like.

Standard is standard for a reason. It’s most likely the best way for you to include the fonts on your website. It’s better for visitors on slow connections to be able to at least see & read the content, than to have them wait longer until the included font has loaded.

That said, it’s always a good idea to optimize your site to make it load as fast as it possibly can. With regard to Google Fonts, this means:

1. Combine multiple fonts into one request.

You can do so with the pipe character “|”. So, instead of:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">

write:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid +Sans|Lobster">

2. Don’t ask for fonts you don’t use.

This may seem obvious, but if you don’t actually use a font, don’t include it. Some browsers only load the font files needed to render the text on the page, but others will load all fonts included, which will slow down your site.

Actually using the font on your site

So far, we’ve actually only added the fonts to be able to use them, but they won’t show up until you tell them where to show up.

Open your theme’s style.css and add the css code:

font-family: 'Open Sans', sans-serif;

to the elements you want to use the font for. This could be the body tag, if you want to use it on all or most text on your site:

body {
 font-family: 'Open Sans', sans-serif;
}

Or if you want to use it just on headings, you can add it like this:

h1, h2, h3, h4, h5, h6 {
 font-family: 'Open Sans', sans-serif;
}

Save the files you’ve edited and upload to your site.

You may also like to use your chosen Google fonts in your images, to make them match the rest of your site.

Sign up below to get your Online Business Toolkit – with 70 tools every online service-based business needs!

Lately I’ve come across more and more people who want to justify text on their website, because it ‘looks good’, it creates a nice looking column. Do you want to justify text on your website, too? The problem with this is that your site shouldn’t only look good, it should be easy to read & use.

There’s a difference between reading on a screen and reading on paper

Reading on a screen is fundamentally different from reading on paper. In a newspaper or book, justified text is the default. Reading on a screen is harder on the eyes as it is already, justified text on a screen will only make it harder.

For print (including PDFs and such), designers have a lot more control on spacing between letters & words to make sure the justified text has good readability. On the web, we don’t have that. Justified text creates what’s called “rivers” of white space. This is when the spaces between words line up with other lines of text, creating a column of space down the content.

rivereffect

This river within the text draws the eye away from the content making it more difficult to read. You lose your place in the text as a non-dyslexic reader, but even more so for dyslexic readers. Although the percentage of people with dyslexia is unknown, it has been estimated to be as low as 5% and as high as 17% of the population being dyslexic. You might want to make your website as user-friendly to both non-dyslexic readers and dyslexic readers.

Want to learn more about what you can do to make your text easier to read for dyslexic readers? This is an interesting read: 6 surprising bad practices that hurt dyslexic users.

To promote your blog on social media, you need to have text on images so people know what it’s about, and your images need to look gorgeous so people actually click to read your content. Read on to learn how to add text to images in a way that looks good.

There are two major points to pay attention to when placing text on an image: contrast and position.

Add text to images: Contrast

Contrast is about making sure the text is readable. Don’t use white text on a light background, or dark text on a dark background. If you have a busy image, lighten or darken the image. You can do so by putting either a white or black partially transparent layer on top of it. That will allow for better contrast between the image and the text.

Text on Images: Contrast

Add text to images: Position

Position is about where you put the text on the image. The center of the image can be good, and is a fairly easy way that’s generally fail-proof.

Text On Images: Position Centered

Don’t put the text on the very edges, that generally makes it look cramped and awkward. If you want to put it in a more interesting place on the image, play around with the rule of thirds. Divide your image into three equal size sections horizontally as well as vertically, so you end up with 9 equal size sections on your image. In most great photos, you will notice the subject of the photo is on one of the intersections between the horizontal and vertical lines. You’ll want to put your text on such an intersection too. Don’t put it over the subject, instead give it space by using the intersection diagonally opposite of it. If the subject of the photo isn’t on such an intersection, play around with placing the text on the different intersections and see where you like it best.

Text On Images: Rule of Thirds

Use Google Fonts in your images to make them fit in with the rest of your site. And make sure to use quality photos for your visuals.

Once you’ve chosen the fonts for your website, you can add Google Fonts to your images to make them fit in with the rest of your site. It’s really easy to do and I’m going to take you through it step-by-step.

6 steps to add Google Fonts to your images

  1. Go to Google Fonts and find the font you want to use on your images. Click the Add to Collection button.
  2. In the top right corner, there are two buttons: Bookmark and Download. Click Download for the font you’ve chosen.Add to Collection & Download
  3. You will get a pop-up with several possibilities to download. We’re keeping it simple and are not installing any unnecessary programs, so click the .zip file link to download your font in a .zip file.
  4. Open the .zip file you’ve just downloaded. If you can’t open .zip files, I recommend installing 7-zip, which is free and allows you to open .zip files.
  5. Depending on the font you’ve downloaded, you will see one or several font files inside the zip package. If there’s just one file or if you only want to use one of them, you can simply double-click the file. This will bring up a preview of the font. Click the Install button at the top of the preview window (Windows) or Install font at the bottom of the preview window (Mac OS 10.3 and up).
  6. If you want to install more fonts, installing them can be time-consuming. You can save time by installing them by selecting all the files you want, copying them (Ctrl + C or Cmd + C), and then pasting them into the Fonts folder on your computer. On Windows, this usually is C:\Windows\Fonts. On Mac, you can paste them into /Library/Fonts (for all users) or into /Users/Your_username/Library/Fonts (for you only).

Once you’ve installed the fonts, you can use your photo editor to add text to your images. The font will be available in the list of fonts you can use in your photo editor.