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:
Headlines will be generally short; therefore, they can be big and bold. You can choose a font that would be harder to read in smaller sizes, because when it’s set to a big size (for headlines), it will still be easy to read.
Body copy is your main text and will need to be the most readable of all. This is the largest part of your text, and you don’t want people to have to squint to find out what you’ve written. Chances are they won’t, and they’ll just leave your site never to return instead. So choose the font for your body copy carefully and make sure it’s easy to read.
For other text, such as post date, image captions, etc., I recommend sticking with the same font as your body copy or another readable font, because these generally will be in a slightly smaller size than your regular body copy.
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.
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.
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.
Red stands for love, energy, power, strength, passion, and heat, but also anger, danger, and warning.
Orange stands for courage, confidence, friendliness, and success, but also ignorance and sluggishness.
Yellow stands for brightness, energy, the sun, creativity, intelligence, and happiness, but also irresponsibility and instability.
Green stands for money, growth, fertility, freshness, healing, and nature, but also envy, jealousy, and guilt.
Turquoise is associated with spirituality, healing, protection, and sophistication, but also with envy and femininity.
Blue stands for tranquility, love, loyalty, security, trust, and intelligence, but also coldness, fear, and masculinity.
Purple symbolizes royalty, nobility, spirituality, luxury, and ambition, but also mystery and moodiness.
Pink symbolizes healthiness, happiness, compassion, sweetness, and playfulness, but also weakness, immaturity, and femininity.
Brown stands for friendliness, the earth, the outdoors, and longevity, but also dogma and conservativeness.
Tan/Beige stands for dependability, flexibility, and crispness, but also being dull, boring, and conservative.
Gray stands for security, reliability, intelligence and solidness, but also gloominess, sadness and conservativeness.
A lighter gray or silver is also associated with glamour, high-tech, grace, and sleekness.
Gold stands for wealth, prosperity, and being valuable and traditional.
Black symbolizes protection, formality, class, and drama, but also with death, evil, and mystery.
White stands for goodness, innocence, purity, freshness, and cleanliness.
How to combine colors
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.
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.
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.
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
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.
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.
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.
immediately below the comments declaring what theme it is and such.
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?
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:
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:
font-family: 'Open Sans', sans-serif;
Or if you want to use it just on headings, you can add it like this:
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.
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.
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.
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.
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
Go to Google Fonts and find the font you want to use on your images. Click the Add to Collection button.
In the top right corner, there are two buttons: Bookmark and Download. Click Download for the font you’ve chosen.
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.
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.
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).
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.