<

Testing Your WordPress Theme Typography

This comprehensive text is designed to test every major typographic element in your WordPress theme. You can copy it into the visual editor (Gutenberg or Classic) and see how headings, paragraphs, lists, tables, blockquotes, code, and other blocks appear. Pay attention to line heights, font sizes, link colours, spacing, and overall harmony.

This paragraph includes bold text, italicised text, underlined text, and combined formatting. We also check how the theme handles internal and external links. It’s also useful to see coloured text and highlighted background – some themes support inline styles, others do not.

---

Headings of All Levels

Headings are crucial for hierarchy. We’ll test every level from H1 to H6.

Heading Level 3 (H3)

Regular text following H3. Note the font size and margins.

Heading Level 4 (H4)

Text after H4. Usually smaller than H3 but larger than a paragraph.

Heading Level 5 (H5)

Text after H5. Used for subsections within smaller sections.

Heading Level 6 (H6)

The smallest heading. Often used for captions or metadata.

Lists: Unordered and Ordered

Lists help structure enumerations. We’ll check nested lists.

Unordered List

• First item of an unordered list
• Second item with longer text to test line wrapping and alignment. You can also include bold inside.
• Third item
  • Nested level 1
  • Another nested item
    • Level 2 – checking indentation and bullet styles
    • Additional element
• Fourth item

Ordered List

1. First step
2. Second step with an explanation that might wrap over several lines. Check how numbering aligns with the text.
3. Third step
   1. Sub-step 1
   2. Sub-step 2
      1. Sub-sub-step
4. Fourth step

Blockquotes and Pull Quotes

This is a blockquote. It should be visually separated from the main text – usually with margins, a different background or colour, sometimes with quotation marks. Inside the quote you can have bold or italic. You can also add a link inside a quote.

Take the Survey

A second paragraph inside the blockquote – checks how multiple paragraphs are handled. You can also use inline code here.

 

— Author of the quote, Source

You can also use the inline short quotation directly in the text.

Tables

Tables are important for data presentation. Let’s see how the theme styles tables, borders, headers, and row striping.

#	Product	Category	Quantity	Price
1	Product A	Electronics	10	$1,200
2	Product B	Clothing	5	$850
3	Product C	Books	20	$320
Total:				$2,370

If the theme does not apply table styles, the table may look plain – this test will reveal that.

Code and Preformatted Text

Code blocks are essential for technical blogs. Let’s check the <code> and <pre> tags.

Inline code: function hello() { echo "Hello, world!"; }

// Example JavaScript code block
const app = (() => {
    let count = 0;
    return {
        increment: () => ++count,
        decrement: () => --count,
        getCount: () => count
    };
})();

console.log(app.increment()); // 1
console.log(app.getCount());  // 1

You can also use <kbd> for keyboard shortcuts: press Ctrl + C to copy.

Images and Media

Image tag with attributes (replace the URL if needed). Check alignment and text wrapping.

This paragraph wraps around the image on the left. The text should flow smoothly around it. Check how the theme handles floats and margins. If the image is too large, it might break the layout. Also check captions (figcaption).

You can also embed video or audio, but we’ll keep it simple with images.

Inline Text Formatting

Here we test various inline elements:

• Bold (b) vs strong (strong) – visually identical but semantically different.
• Italic (i) vs emphasis (em) – similarly.
• Underline (u) – sometimes styled like a link, but it’s just underlined text.
• Strikethrough (s) or deleted (del).
• Inserted (ins) – usually underlined or differently styled.
• Highlighted (mark) – typically with a yellow background.
• Small text (small) – for footnotes.
• ^{Superscript (sup)} and _{subscript (sub)} – e.g., H₂O or E=mc².
• WWW – abbreviation with a tooltip.

Special Characters and Entities

Check HTML entity rendering: & (&), < (<), > (>), ” (“), © (copyright), ® (registered), ™ (trademark), € (euro), £ (pound), ¥ (yen), § (section), † (dagger), and many more.

Currency symbols: $, €, £, ¥, ₽. And mathematical signs: ±, ×, ÷, ≠, ≤, ≥, ∞, π, √.

Arrows: ←, →, ↑, ↓, ↔, ⇒, ⇔.

Horizontal Rules and Empty Elements

---

The horizontal rule (hr) above should be thin but visible.

Test empty paragraphs (containing  ):

 

This paragraph follows an empty one.

Nested Blocks and Complex Structure

Conclusion

This test content covers most typical elements you’ll encounter in blog posts and articles. After pasting into the editor, check the display on different devices (desktop, tablet, mobile). Pay special attention to:

1. Font sizes of headings and paragraphs
2. Line heights and spacing between blocks
3. Link colours and hover states
4. Styles for tables, blockquotes, lists
5. Responsiveness of images and tables

If any element looks off, you may need to tweak your theme’s CSS. Good luck with your testing!