Small businesses often worry that their website looks cheap. Nine times out of ten, the culprit is not the photography or the layout. It is the typography and color: too many typefaces, colors chosen on a whim, and text that is slightly too small and slightly too grey.
The fix is a short set of decisions, made once and applied everywhere. This guide walks through them in the order that matters, starting with type because it carries most of your content.
Start with type
One family, or two at most
Pick a clean, readable typeface for body text and, if you like, a second one for headlines. More than two and the page starts to look like a ransom note. A single family with several weights (regular, medium, bold) is often the most polished option, and it loads faster too.
Choose fonts designed for screens. Look for generous letter shapes, clear distinctions between similar characters such as a capital I and a lowercase l, and a good range of weights.
A note on loading
Every font file is a download. Host fonts on your own server where you can, limit yourself to the weights you actually use, and set font-display: swap so text appears immediately. Fast text rendering is part of how a site feels established.
Set a type scale
Instead of picking sizes ad hoc, choose a scale and stick to it. Here is a simple starting point:
| Element | Size | Line height |
|---|---|---|
| Body text | 16 to 18 px | 1.5 to 1.6 |
| Small print | 14 px | 1.5 |
| H3 | 22 to 24 px | 1.3 |
| H2 | 30 to 36 px | 1.2 |
| H1 | 40 to 56 px | 1.1 to 1.2 |
On larger screens, headings can grow; on phones, scale them down so they do not wrap into awkward four-line stacks. Fluid sizing with the CSS clamp() function handles this smoothly without a pile of breakpoints.
Make lines comfortable to read
Long lines tire the eye. Aim for about 50 to 75 characters per line for body copy, which usually means a text column roughly 600 to 700 pixels wide. Give paragraphs space, and avoid centering long blocks of text.
Good typography is mostly restraint. If a visitor notices the font, something is probably wrong.
Then choose color
Build a palette of roles, not shades
A dependable palette has a few jobs:
- A primary color for brand moments, links, and main buttons
- An accent used sparingly to draw the eye to one action
- Neutrals, from near-white to near-black, for backgrounds, text, and borders
- Feedback colors for success, warning, and error messages
A familiar rule of thumb is to use roughly 60 percent neutral, 30 percent primary, and 10 percent accent. It is not a law, but it stops a page from shouting.
Pick neutrals with care
Pure black on pure white is harsh. A very dark charcoal for text and a slightly warm or cool off-white for backgrounds feel softer and more considered. Tint your greys toward your primary color for a cohesive look.
Check contrast before you fall in love
A pale brand color can look lovely in a logo and disappear as button text. Check the contrast between text and its background against the 4.5 to 1 target for normal text. The WebAIM contrast checker takes a few seconds, and we cover more of this in our accessibility quick fixes.
Make it consistent
Consistency is what makes a small business look established. Define your type sizes, colors, spacing, and button styles once, and use them everywhere, rather than adjusting each page by eye. In a builder such as Bricks, these live as global classes and variables, so a change in one place updates the whole site. We explain why that matters in why we build with Bricks Builder.
Common mistakes to avoid
- Using a different heading style on every page
- Setting body text below 16 pixels, or in light grey
- Using five or more brand colors at equal weight
- Putting text over busy photographs without an overlay
- Relying on italics or all capitals for long passages
- Mixing rounded and sharp corners across buttons and cards
Test with real content
A design that looks perfect with two neat lines of placeholder text can fall apart with a real headline, a long product name, or a customer review. Before you finalize anything, paste in the longest and shortest content you actually have, and view it on a phone, a tablet, and a large monitor.
Pay special attention to buttons and forms, where a long label can break a layout, and to places where text sits over images. If a combination only works under ideal conditions, it will not survive the first month of real use.
Buttons, links, and states
Buttons and links are where type and color meet, so give them their own rules. Use your accent color for the single most important action on a page and a quieter style for secondary actions, so visitors never have to guess which button matters most. Keep link styling consistent across the site: one color, underlined inside body text, with a clear hover and focus state.
Design every state on purpose. A button should look different when hovered, focused, pressed, and disabled, and the focus style should stay clearly visible against both light and dark backgrounds. If you offer a dark theme, test your palette again, because colors that pass on white can fail on charcoal. These small details are what separate a site that feels finished from one that merely has a nice homepage.
A one-hour exercise
Open a blank document and write down your answers: the body typeface, the heading typeface, the five sizes in your scale, your primary and accent colors with their hex codes, and your neutrals. Then check every combination of text and background for contrast.
When that sheet exists, anyone building or editing the site can make good decisions without guessing, and your pages will start to look as though one careful person made them all. That impression of care is what visitors read as established and trustworthy.