Headings create structure and guide the reader through your content.
Each level has its own visual weight and spacing — check that the scale feels balanced and that headings stand out clearly from the body text.

Example hierarchy:

H1 – Page Title

H2 – Main Section

H3 – Subsection

H4 – Minor Heading

H5 – Small Heading

H6 – Caption Heading

Your paragraph text should be comfortable to read, with precise spacing and good contrast.

Body Text

Your paragraph text should be comfortable to read, with clear spacing and good contrast.

Lead Paragraph:
This introductory paragraph is slightly larger and more open, used at the beginning of a page or section.

Regular Paragraph:
Typography is the voice of your brand in written form. It gives rhythm and character to your content. Use bold for emphasis, italics for tone, and links to guide readers. Avoid overusing stylistic elements, and keep line lengths moderate for better readability.

Emphasis & Highlights

Use highlights and inline styles sparingly but purposefully:

Bold: for strong emphasis.
Italic: for nuance or titles.
<u>Underline</u>: for specific terms, not links.
<s>Strikethrough</s>: for edits or obsolete information.
<mark>Highlight</mark>: for key ideas or callouts.

Lists

Lists are ideal for structuring information.

Unordered list:

Point one
Point two
Nested item
- Sub-item A
- Sub-item B

Ordered list:

Step one
Step two
1. Sub-step A
2. Sub-step B
Step three

Definition list:
Kerning — Adjusting the spacing between characters.
Leading — The vertical distance between lines of text.

Quotes

“Good design is as little design as possible.”
— Dieter Rams

Pull quotes can be used to highlight key insights:

“Typography is the craft of giving language a visual voice.”

Code & Technical Text

Inline code, such as npm run build, should stand out clearly.
Preformatted blocks are useful for tutorials or snippets:

function greet(name) {
  return `Hello, ${name}!`;
}

Tables

Style Token	Example	Notes
Font Size Base	16px	Adjusts paragraph size
Line Height	1.6	Controls reading rhythm
Heading Scale	1.25	Defines modular hierarchy

Images & Captions

Images should include meaningful captions for context and accessibility.

Example:
Figure 1: Example image caption with descriptive text.

Buttons

Buttons communicate action.
Ensure colour contrast, size, and spacing are consistent.

Primary Button — used for main calls to action.
Secondary (Ghost) Button — for less prominent actions.
Text Link — for inline actions or navigation.

Forms

Forms should be clear, well-spaced, and easy to navigate.

Example fields:

Name
Email address
Topic selection
Message box
Submit button

Text Alignment

Test each alignment to confirm spacing and readability:

Left-aligned: standard for long text.
Centred: good for headings or short phrases.
Right-aligned: occasional stylistic use.
Justified: neat columns but can affect legibility.

Miscellaneous Styles

Keyboard input: Press ⌘ + S to save.
Abbreviation: CSS = Cascading Style Sheets.
Citation: Bringhurst, The Elements of Typographic Style.
Small caps: Ideal for acronyms or formal titles.

Closing Note

Typography is not just decoration — it’s the structure and tone of your message.
Use this page to test every typographic detail, refine your brand’s visual voice, and ensure your content reads beautifully on every device.

H1 – Page Title

H2 – Main Section

The Blender Animation Bootcamp is a meticulously structured Blender animation course that combines focused lessons with 12 practical exercises to help students grasp vital animation concepts. The course covers essential principles such as timing and spacing, squash and stretch, overlap and drag, and creating walk cycles. By the end of the course, learners will be able to understand the foundations of crafting compelling animations and apply these principles to complex projects. The Blender Animation Bootcamp is a meticulously structured Blender animation course that combines focused lessons with 12 practical exercises to help students grasp vital animation concepts. The course covers essential principles such as timing and spacing, squash and stretch, overlap and drag, and creating walk cycles. By the end of the course, learners will be able to understand the foundations of crafting compelling animations and apply these principles to complex projects.

H2 – Main Section

H3 – Subsection

The Blender Animation Bootcamp is a meticulously structured Blender animation course that combines focused lessons with 12 practical exercises to help students grasp vital animation concepts. The course covers essential principles such as timing and spacing, squash and stretch, overlap and drag, and creating walk cycles. By the end of the course, learners will be able to understand the foundations of crafting compelling animations and apply these principles to complex projects. The Blender Animation Bootcamp is a meticulously structured Blender animation course that combines focused lessons with 12 practical exercises to help students grasp vital animation concepts. The course covers essential principles such as timing and spacing, squash and stretch, overlap and drag, and creating walk cycles. By the end of the course, learners will be able to understand the foundations of crafting compelling animations and apply these principles to complex projects.