How Many Colors and Fonts to Use So Your Website Doesn't Look Cheap

Use 2-3 colors, not counting neutrals, and no more than 2 font families. In practice: a light neutral background, a dark gray or soft black for text, one accent color for buttons and links, and one or two quieter supporting colors only if the design needs them. For fonts, use either one family in a few weights or one font for headings and one for body text. Most sites that look cheap break one of these limits, or use their colors and fonts differently from page to page.

You'll find other numbers online: some guides say no more than three colors, others call three or four the sweet spot. Much of the difference comes down to whether white, grays and near-black are counted as colors. You don't need a designer's eye to get this right, just a simple rule and the discipline to apply it everywhere. We're MPO Web Studio, a small web studio in Cluj-Napoca, and below are the rules we work by: how many colors and fonts, how to pick them, how to check that text stays readable, and a two-minute test to run before you publish. No filler theory, just what you can apply today.

The short rule: 2-3 colors, no more than 2 fonts

If you remember one thing from this article, make it this: a clean-looking site uses 2-3 colors and at most 2 font families. Neutrals don't count toward the limit, as long as they stay quiet.

The calmest version, and a good place to start, needs only one real color:

• one dominant neutral (usually white or a very light gray for the background)
• one dark color for text (a soft black or dark gray, not harsh pure black)
• a single accent color, the one that grabs attention on buttons, links and key details

Add a quieter secondary color (a softer brand tone for the header, footer or section backgrounds) only if the design needs it, and treat three colors as the ceiling.

For fonts: one for headings, one for body text. Or, simpler still, a single font used in different weights. The cheap look almost always appears when you push past these limits (the fourth accent, the third font), not when you respect them.

Why a site actually ends up looking cheap

A site looks cheap not because it has "ugly" colors, but because nothing has priority. When all the text is colored, nothing stands out. When there are three or four bright accents, the eye doesn't know where to land and everything seems to shout at once.

Same with fonts. Every font has a personality. Put three or four on one page and you get the "ransom note" effect: four people talking at the same time, each in a different tone. The reader feels the disorder even if they can't name it, and it reads as "amateur" before they've read a word, which is exactly when they decide whether to trust you.

The secret behind sites that look expensive is the opposite: lots of calm (neutrals, white space) and one single place where color happens. Contrast only works when it's rare.

The role each color plays: the 60-30-10 rule

An old, reliable guide is 60-30-10: roughly 60% dominant color, 30% secondary, 10% accent. On a website the dominant "color" is usually a neutral background, which is why a site with one bold accent can still look calm.

Text color sits outside the split: a soft black or dark gray that you use for body text and most headings. Don't measure any of this with a ruler. Keep the idea: the accent is the least-used color, and that is exactly why it stands out.

How to pick colors that actually work together

Don't pick colors out of thin air. Start from something you already have (your logo, a product, a signature photo) and pull your accent color from there. The free Extract Theme option in Adobe Color pulls a palette from an uploaded image and gives you exact color codes to work with.

Then set concrete rules:

• Neutrals do most of the work: light background, dark text. They cover the majority of the page.
• The accent shows up sparingly and always in the same role: buttons, links, a few details. If the accent means "clickable", don't also use it for decorative headings, or visitors will try to click them.
• If you want more variety, use lighter or darker shades of the same color, not new colors.
• Two equally bright colors placed side by side usually clash. Let one be clearly dominant and calm, and keep only the other one vivid. If in doubt, use a shade of a color you already have instead of a new one.
• Think about what a color already means on screen. In most interfaces red reads as error or warning and green as success, so a red "Book now" button next to red error messages sends mixed signals.
• If your brand has several colors, pick one as the accent for the website and use the others rarely, with a clear role.

Check contrast so your colors stay readable

A palette can look great in a mockup and still be hard to read. The usual culprits are light gray body text on white and white text on a light accent such as yellow or pale green. The W3C's accessibility guidelines, WCAG 2.2, set these minimums at level AA:

A button whose label already makes it obvious doesn't need a contrasting border, but the label itself still has to meet the text minimums. Text that is part of a logo or brand name has no contrast requirement; the rest of the page does. To test a pair of colors, paste both codes into a free contrast checker such as WebAIM's; it tells you the ratio and whether it passes.

Two more checks that matter for color choices:

• Don't rely on color alone. Underline links inside body text and add a word or an icon to error messages, so people with color vision deficiency don't miss them. WCAG's "Use of Color" criterion is about exactly this: color can't be the only signal.
• Remember who reads your site. If many of your clients are older, contrast and text size matter even more. We cover this in why clients over 45 struggle to read your website.

How to choose fonts without going wrong

The safest choice if you're unsure of your taste: a single, well-chosen font used in different weights. Headings bold and large, body text calm and regular. That alone gives you hierarchy with almost no risk.

If you want two fonts, make them clearly different, not vaguely similar. For example, a serif (the kind with little "feet") for headings and a clean sans-serif for body text. Two fonts that resemble each other look like a mistake, not a choice.

Hierarchy (what's important, what's secondary) comes from size and weight, not from new colors or fonts. A big, bold heading beats any bright color. Resist the urge to signal importance with yet another color: make it bigger, bolder, and give it room to breathe.

Keep body text comfortable: 16px is a widely accepted minimum for body text on the web, and many desktop layouts start a little larger. Pick a small, fixed set of sizes (page title, section heading, body, small print) and reuse them everywhere instead of nudging each block by eye. For more on readability and tone, see how to choose the right font for your website.

Fewer fonts also means a faster site

Fonts are files the browser has to download. With classic (static) fonts, every weight and style is usually a separate file, so three families in several weights each add up quickly. Google's web.dev guide to font best practices makes the same point: the fastest font is one the page never has to download.

What to ask for, or check yourself:

• Load only the weights you actually use. If the site uses regular and bold, there's no reason to load light, medium and black too.
• Prefer WOFF2 files, the compressed web font format that all current browsers support.
• Consider a variable font, which can replace several separate weight files with one. It pays off when you use several weights; for just regular and bold, two static files can be smaller.
• Use system fonts (the ones already on the visitor's device) for body text if speed matters more than a distinctive look.
• Make sure text shows right away in a fallback font while the web font loads (the CSS font-display setting, for example "swap"), instead of staying invisible.

Set it once, use it everywhere

On small business sites, the cheap look usually comes not from bad choices but from inconsistent ones: a heading in a different blue on one page, a button that's rounded here and square there. Most themes and site builders have a global styles or theme settings area where you define the palette and fonts once. Use it, and avoid coloring text block by block.

Do the same for buttons: one primary style for the main action and one secondary style for everything else. Visitors learn quickly what "clickable" looks like on your site, as long as you don't change it.

If it still looks cheap: it's not only colors and fonts

If colors and fonts are under control and the site still feels off, look at these:

• Cramped or uneven spacing: text pressed against images, different gaps between sections. More white space almost always helps.
• Misaligned elements: blocks that don't line up to a common edge or grid.
• Generic stock photos: handshakes and people laughing at laptops. Real photos of your work, even imperfect ones, read as more credible.
• Blurry, stretched or pixelated logos and images.
• Too many animations and hover effects. A little motion looks polished; constant motion looks like a template demo.
• Walls of text with no headings or breaks.

The two-minute test before you publish

Before you push the site live, run this quick check:

• Count the visible colors on one page. More than three (not counting neutrals and shades)? Cut some.
• Count the fonts. More than two? Remove one.
• Take a screenshot and turn it black-and-white (or squint at it). If you can still tell what's important and what isn't, your hierarchy is healthy. If everything looks equally "loud", you don't have enough contrast in size.
• Check that your main action button is the same color everywhere. If it's red on one page and green on another, visitors never learn where to click.
• Run your body text and button colors through a contrast checker. Anything below 4.5:1 for normal text needs fixing.
• Open the page on your phone. If you need to zoom to read the body text, it's too small or too pale.

If it's hard to judge your own site objectively, that's normal: you're too close to it. An outside eye helps enormously.

At MPO Web Studio we work on exactly this principle: we first build a free demo of your site, with the palette and fonts already put together cleanly, so you see the result before you pay anything. We work remotely, with transparent pricing. If you want an honest opinion on your current site, message us on WhatsApp and we'll tell you briefly what to cut.