Website typography basics every business owner should know

Words make up most of any business website, yet the look of those words is often decided in a few seconds by whoever builds the site. That is a missed opportunity. Website typography affects whether visitors can read your prices comfortably, whether your firm feels established or casual, and whether a page looks carefully made. You do not need to become a designer, but knowing the basics helps you brief one well and spot problems on your own site.

This primer covers the essential ideas: the main families of type, what makes text legible, how weight and line height work, and how typography communicates personality.

Typeface and font: the difference in plain terms

People use the words interchangeably, and in everyday conversation that is fine. Strictly speaking, a typeface is the design, such as Roboto or Merriweather. A font is a specific version of it, such as Roboto Bold or Merriweather Italic. A font family is the whole set of weights and styles for one typeface.

The distinction matters when you talk to developers, because each additional weight or style of a web font is usually a separate file that visitors download.

Serif vs sans-serif typefaces

Serif

Serif typefaces have small strokes, or “feet”, at the ends of letters. Think of the type in newspapers and printed books. Serifs often feel traditional, authoritative or literary. Law firms, publishers, heritage brands and premium hospitality businesses frequently use them, especially for headings.

Sans-serif

Sans-serif typefaces (“sans” means “without”) lack those strokes and have cleaner lines. They tend to feel modern, direct and approachable. Most technology companies, apps and e-commerce sites use sans-serif type, and it is the most common choice for body text on screens.

Which is more readable on screen?

On older, low-resolution displays sans-serif text was often clearer at small sizes. Today’s phone and laptop screens render both styles well, so either can work for body text if the specific typeface is designed for screens and set at a comfortable size. Legibility depends more on the individual typeface than the category.

Display and script typefaces

Decorative display faces and handwriting-style scripts can add character to a logo or a single large heading. They are hard to read in paragraphs, buttons or menus, so keep them for short, large text only, if at all.

What makes type legible

Legibility is how easily individual letters can be told apart. A few features make a big difference:

• x-height: the height of lowercase letters like “x” relative to capitals. Typefaces with a generous x-height tend to look larger and read more easily at the same size.
• Open letter shapes: letters like “e”, “a” and “c” with wide openings stay clear at small sizes.
• Distinct characters: a capital “I”, lowercase “l” and the number “1” should look different. This matters for order numbers, email addresses, GSTINs and coupon codes.
• Even spacing: letters that are neither cramped nor spread too far apart.

A quick test: type “Il1 O0 rn m” in the typeface you are considering. If the characters blur together, choose another for body and interface text.

Font weights and how to use them

Weight is the thickness of the strokes, usually expressed as numbers from 100 (thin) to 900 (black). Regular is 400 and bold is 700 in most families.

A good rule for business sites is to use a small number of weights with clear jobs: regular for body text, a medium or semi-bold for subheadings and buttons, and bold for main headings or emphasis. Very thin weights like 100 or 200 can look elegant on a large desktop banner, but become faint and hard to read on phones, especially in bright light.

Avoid faking weights. If a font file for bold is not loaded, browsers may create a “synthetic” bold that looks smudged. Ask your developer to load the actual weights you use.

Line height, line length and letter spacing

Line height (also called leading) is the vertical space between lines of text. Body text on websites is usually comfortable at around 1.4 to 1.6 times the font size. Headings can be tighter, around 1.1 to 1.3, because they are short and large.

Line length is how many characters fit on one line. Very long lines make it hard for the eye to find the start of the next line. Around 50 to 75 characters per line is a widely used guideline for comfortable reading, which is why well-designed article pages limit the width of text columns on large screens.

Letter spacing (tracking) is best left at the typeface’s default for body text. Slightly wider spacing can help short uppercase labels, while tightening is sometimes used for very large headings.

How website typography signals your business personality

Type sends signals before anyone reads a word. Consider how different pairings of style and weight might suit different businesses:

• A chartered accountancy practice: a classic serif for headings, a calm sans-serif for body text, restrained weights.
• A children’s activity centre: a rounded sans-serif with friendly shapes and bolder headings.
• A fashion boutique: a high-contrast serif or refined sans-serif with generous spacing.
• A logistics or engineering firm: a sturdy, geometric or neutral sans-serif, strong and plain.

The aim is fit, not novelty. Unusual typefaces can make a brand memorable, but not at the cost of readability. If your site serves Hindi or other Indian-language readers, confirm early that the chosen typeface supports those scripts, or plan a matching companion.

A quick typography review of your own site

Open two or three key pages on your phone and check the following:

1. Can you read body text comfortably without zooming?
2. Are headings clearly distinguishable from body text by size or weight?
3. Do all pages use the same typefaces, or do some sections look different?
4. Are there any thin, pale or decorative fonts used for paragraphs or buttons?
5. Do long lines stretch across the full width of a desktop screen?
6. Does the overall feel match how you want customers to see the business?

If several answers worry you, bring this list to your designer. Our website development team treats typography as part of the core design system, and you can compare different styles across our portfolio to see what feels right for your brand.

Frequently asked questions

Are Google Fonts free to use on a business website?

The typefaces offered through Google Fonts are released under open licences, most commonly the SIL Open Font License, which permits commercial use. It is still sensible to check the licence shown for the specific family you choose.

Should I use my logo font for the whole website?

Usually not. Logo typefaces are often chosen for character rather than readability. Use it sparingly, perhaps for main headings, and pick a clear companion typeface for body text.

What is a system font and is it acceptable to use one?

A system font is one already installed on the visitor’s device, such as San Francisco on Apple devices or Roboto on Android. System font stacks load instantly and look clean, making them a perfectly professional choice.

Does typography affect accessibility?

Yes. Readable typefaces, sufficient size, good contrast and adequate line height all help people with low vision, dyslexia or older eyesight, and they make text easier for everyone.