Typography Basics

What Typography Actually Means

Typography is the practice of arranging text so that it is readable, clear, and visually appropriate for its context. It includes the fonts you choose, the sizes you use, the spacing between letters and lines, and the way text is organized on a page.

In everyday terms: typography is everything about how your text looks, not just what it says.

Most people notice bad typography before they notice good typography. When text is hard to read, too small, too cramped, or visually inconsistent, it creates friction. When typography is working well, it is invisible — readers simply absorb the content without thinking about how it looks.

Why Typography Matters For Your Brand

Typography communicates personality before anyone reads a word. A bold, geometric font feels different from a flowing script. A clean, modern sans-serif feels different from a traditional serif. These impressions happen quickly and influence how people perceive your organization.

Typography also directly affects whether people can use your website. Text that is too small, too light, or too tightly spaced is harder to read — particularly on mobile devices, in bright light, or for people with visual impairments.

For small businesses, the practical goal of typography is straightforward: make your content easy to read and make your brand feel consistent and professional.

Serif vs Sans-Serif: The Plain-Language Explanation

You will encounter these two terms constantly in typography discussions. Here is what they actually mean.

Serif fonts

Serif fonts have small decorative strokes at the ends of letters. Think of the small horizontal lines at the bottom of a capital letter T, or the small feet at the base of a capital letter I. These strokes are called serifs.

Serif fonts are commonly associated with tradition, authority, and established credibility. They are frequently used in law, finance, publishing, and heritage brands. They tend to feel formal and trustworthy.

Examples of serif fonts: Georgia, Times New Roman, Merriweather, Playfair Display. For a deeper comparison, see Serif vs Sans Serif.

Sans-serif fonts

Sans-serif fonts do not have those decorative strokes. The word "sans" means "without" in French. Sans-serif letters have clean, uniform endings.

Sans-serif fonts are commonly associated with modernity, clarity, and approachability. They are widely used in technology, healthcare, and consumer brands. They tend to feel clean and contemporary.

Examples of sans-serif fonts: Arial, Helvetica, Inter, Open Sans, Roboto.

Which should you use?

There is no universally correct answer. Both work well for body text on screens when sized and spaced appropriately. The choice depends on the personality you want your brand to project.

A practical starting point: if your brand should feel established, traditional, or authoritative, a serif font may be appropriate. If your brand should feel modern, clean, or approachable, a sans-serif is often a good choice. Many brands use a serif for headings and a sans-serif for body text, or vice versa.

Headings

Headings serve two purposes: they organize content into scannable sections, and they communicate visual hierarchy. A visitor who lands on your page should be able to scan the headings and understand the structure of the content before reading a word of body text.

Heading size

Headings should be noticeably larger than body text. A common approach is to use a heading size that is at least 1.5 times the body text size. If your body text is 16px, your main headings might be 28–36px. Subheadings might be 20–24px.

Heading weight

Headings are typically set in a heavier weight (bold or semi-bold) than body text. This weight difference reinforces the visual hierarchy and makes headings easy to identify when scanning.

Heading hierarchy

Use heading levels consistently. Your page title is the most important heading (H1). Section headings are H2. Subsections within those sections are H3. Do not skip levels or use headings purely for visual effect — heading structure also affects how screen readers and search engines understand your content.

Body Text

Body text is the main content of your page — the paragraphs, descriptions, and explanations that visitors actually read. Getting body text right is the most important typography decision you will make.

Size

The minimum recommended body text size for websites is 16px. Many designers now use 17px or 18px as a default, particularly for content-heavy pages. Smaller text is harder to read, especially on mobile devices.

Avoid the temptation to use small text to fit more content on a page. Readable text that visitors actually read is more valuable than dense text that they skip.

Colour and contrast

Body text should have strong contrast against its background. Dark text on a light background is the most readable combination. The most common mistake is using medium grey text on a white background — it looks subtle and refined on a designer's monitor but fails for many users in real-world conditions.

For more on contrast, see Colour Contrast Explained.

Line length

Very long lines of text are harder to read because the eye has to travel further across the page and then find the beginning of the next line. A comfortable line length for body text is roughly 60–80 characters per line. On wide screens, this often means constraining the content column width rather than letting text stretch across the full page.

Readability Fundamentals

Readability is how easy it is to read and understand text. It is affected by font choice, size, spacing, contrast, and line length working together.

Good readability looks like

• Body text at 16px or larger
• Strong contrast between text and background (dark text on light background)
• Comfortable line spacing (not too tight, not too loose)
• Reasonable line length (not stretching across a very wide screen)
• Consistent font use (not too many different fonts)
• Adequate space between paragraphs

Poor readability looks like

• Text smaller than 14px for body content
• Light grey text on white backgrounds
• Lines of text that stretch across a full wide-screen monitor
• Very tight line spacing that makes paragraphs feel cramped
• Multiple decorative fonts used together
• All-caps body text (fine for short labels, difficult for paragraphs)

Spacing

Spacing in typography refers to the space between lines (line height), between letters (letter spacing), and between paragraphs. Getting spacing right makes text feel comfortable to read.

Line height

Line height is the vertical space between lines of text. Too little space makes text feel cramped and difficult to follow from one line to the next. Too much space makes text feel disconnected and hard to read as a continuous flow.

A good starting point for body text is a line height of 1.5 to 1.7 times the font size. If your body text is 16px, a line height of 24px to 27px is generally comfortable.

Letter spacing

Letter spacing (also called tracking) is the space between individual characters. For body text, the default letter spacing of most fonts is usually appropriate. Avoid tightening letter spacing on body text — it reduces readability. Slightly increased letter spacing can work well for headings and labels.

Paragraph spacing

Paragraphs should have clear visual separation. A common approach is to add space below each paragraph equal to roughly one line of text. This creates breathing room and makes it easy to identify where one thought ends and another begins.

Font Weights

Font weight refers to how thick or thin the strokes of a font are. Most font families include multiple weights: thin, light, regular, medium, semi-bold, bold, and extra-bold.

Weight creates hierarchy and emphasis. Heavy weights draw attention. Light weights recede. Using weight intentionally helps guide readers through your content.

Practical weight guidance

• Use regular or medium weight for body text
• Use semi-bold or bold for headings and important labels
• Avoid thin or light weights for body text — they are difficult to read at small sizes and in low-contrast situations
• Use bold sparingly within body text for emphasis — if everything is bold, nothing is emphasized

Common Mistakes

These are the typography errors that most commonly make websites look unprofessional or difficult to use. For a complete list, see Typography Mistakes To Avoid.

Using too many fonts

Using three or more different font families on a single website creates visual noise and inconsistency. Most websites work well with one or two font families — one for headings and one for body text, or a single versatile font used at different weights and sizes.

Body text that is too small

Text smaller than 16px is difficult to read on screens, particularly on mobile devices. This is one of the most common mistakes on small business websites built with templates that default to smaller text sizes.

Low contrast text

Light grey text on white backgrounds is the most common contrast failure. It looks refined in design software but fails for many users in real conditions. Always verify contrast ratios rather than relying on visual judgment.

Inconsistent heading hierarchy

Using heading tags (H1, H2, H3) for visual effect rather than structural meaning creates confusion for screen readers and search engines. Use headings to organize content logically, not just to make text larger.

All-caps body text

All-caps text is appropriate for short labels, buttons, and section markers. It is very difficult to read in paragraphs because the uniform height of capital letters removes the visual cues that help readers recognize words quickly.

Decorative fonts for body text

Script, handwritten, and highly decorative fonts can work well for logos, headings, and short display text. They are generally not appropriate for body text because they sacrifice readability for visual interest.