From the perspective of the webmaster, color and font size doesn’t seem to have anything to do with SEO. From the perspective of the designer, SEO has very little to do with picking colors for an effective website. From both sides, there is a disconnect between design and optimization; the idea that a professionally optimize site is dry gray and black and white, but a powerfully designed site needs to sacrifice SEO in favor of creativity. In reality, SEO supports design and design supports SEO. What should you do? What shouldn’t you?
Do: Pick colors that suit your business atmosphere.
Sometimes, your business needs the corporate black and white atmosphere. Fortune 500 companies dealing with industry CEOs don’t have space for childish graphics and vibrant colors. Most businesses, however, have plenty of room for design to create an atmosphere unique to the brand. Brands have color schemes; make use of yours.
Don’t: Pick colors that clash in an ugly way.
That said, your in a way that makes them complimentary. A lime green background with pink text overlaid is going to look like a child designed your site, and it’s not going to attract customers. In the end, that’s what it’s all about; making your site look welcoming without making it look childish and untrustworthy.
Do: Format any clickable object in a way that looks clickable.
Objects you can click – buttons, images, text links – need to look like they are links. It’s why the industry standard is a blue underlined bit of text within a black and white page. The blue stands out as something to click. You don’t need to stick with the standard, and in fact you probably shouldn’t, but you do need to make sure your links and buttons stand out as something a user can click.
Don’t: Format textual links identically to non-clickable text.
Turning your links into a game of hide and seek is called minesweeping, searching for areas where the pointer turns into a hand. It’s only entertaining to children, and it’s frustration with no purpose to adult users. Unless you’re designing a game site for kids, you need to make your links nice and visible. Moreover, there’s always the chance that links that resemble your text may come across as an attempt to hide them, which can incur a search penalty.
Do: Pick font colors that stand out from the background for maximum readability.
Black text on a white background is high contrast, high visibility and easy readability. If you were to turn the text into a color closer to white – a gray or a yellow – it becomes harder to read. The same goes no matter what the color of your background. and allows your content to be read easily.
Don’t: Hide text with font colors identical to background colors.
One common old search spam technique was to mask text such that it was hidden from the user but visible to the search engine. Making the font color identical – or very close – to that of the background was enough to cause a search penalty. There are better ways to hide text if you really need to, but you should strive to create a design without the need to hide text.
Do: Consider color associations in the culture you’re working in.
Different cultures have different associations with different colors. In the United States, black is a color of mourning. In Japan, that color is typically white. Red is a color for passion, love or anger. Except in India, where it’s a color for pride and creativity, or in China, where it’s a color for rage and danger. When you pick primary colors for your brand, consider the cultural associations of those colors, if you’re advertising in a foreign market.
Don’t: Avoid color altogether.
Color is not something to be feared. A bit of color adds a lot to your site, when used in moderation. Even if it’s as simple as tinting your background blue or yellow, with a white overlay for black text, it’s color that adds life to your page. Simple black and white has its place, but it’s an atmosphere of austerity that you might not want to convey with your business.
Do: Pick a font size large enough to be read easily on PCs and mobile devices.
If your , you’re going to have a hard time getting users to read. They don’t want to lean in to their monitors or squint at their phones just to make out your text. Chances are fairly good that they’ll just back away and find the information they need on a site they can read. If you have a small font size, increase it by a few points across the board and see how users react. You may be surprised.
Don’t: Pick a font size too small or too large for usability.
Don’t go overboard! A font size too small makes it impossible to read, but a font size too large is harmful as well. Large fonts should be limited to headings and titles, or used in images and infographics. Avoid using large font – size 20 or more – in normal text; it becomes hard to read more than a paragraph without scrolling, and users don’t like scrolling if they aren’t already engaged.
Do: Use CSS to apply colors and formats to text to make it stand out.
If you’re trying to add color and formatting to your text, use CSS attributes. It’s easy enough to add a color that applies to any H1 tag you use, for example. You can create different headings, different styles and different formats for different types of text easily with CSS. It’s also cleaner and easier to read – and change later – than adding the codes to the HTML in your page.
Don’t: Make your text look like a circus tent with half a dozen colors and sizes.
In the days of Geocities and the 1995 Internet, it was common enough to see pages with bright colored backgrounds, flashy graphics and text formatting with every third word emphasized with a larger size, a color and italics, bold and underlined. In the modern Internet, that just makes your site look spammy. No one uses those techniques anymore; don’t bother trying such odd formatting.
Do: Make use of <h1> and <strong> tags for usability and SEO.
When you want to , you have two options. You could add attributes to the text to increase the font size, make it bold and add a color. Or you can use an H1 tag to make it a heading. Don’t like how the heading is formatted? Change it with CSS. The benefit here is actually to SEO; Google parses heading tags where it ignores font colors and sizes.
Don’t: Use pure size and color attributes to create headings and subheadings.
For exactly the reason above; Google ignores font color and size in all but the most extreme cases. It will actually parse H1 and other formatting tags, however, to emphasize readability.
Do: Pick standard font families.
A font family is a grouping of fonts with similar characteristics so that if a user doesn’t have one, the browser knows which others to pick. Using a standard font family – serif, sans serif or what have you – ensures your page looks more or less how you want it.
Don’t: Pick fonts your users are unlikely to have installed.
If you pick a custom font, make sure it’s a font users have. That is, make sure it’s pre-packaged with the common operating systems. If a user doesn’t have it, the browser will default to a basic font, which can make your site look very different.