Skip to content

Typography & Markdown Demo

This post serves as a comprehensive test case for all typography styles and markdown formatting features available on this blog.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Formatting

This is bold text using double asterisks.

This is italic text using single asterisks.

This is bold and italic using triple asterisks.

This is strikethrough text using double tildes.

This is inline code using backticks.

Font Weight Demonstrations

Regular Paragraph Text

This is standard paragraph text with normal weight. The quick brown fox jumps over the lazy dog. This sentence contains all letters of the alphabet and demonstrates standard text rendering.

Light Text (if available)

This is lighter weight text for comparison. Typography plays a crucial role in readability and visual hierarchy.

Medium Text

This is medium weight text for emphasis. It provides stronger visual presence while maintaining readability.

Bold Text

This is bold text for strong emphasis. It should be noticeably heavier and draw more attention.

Extra Bold (if available)

This is extra bold text for maximum emphasis. Use sparingly for headlines and important statements.

Lists

Unordered Lists

  • First item
  • Second item
    • Nested item 1
    • Nested item 2
      • Deeply nested item
  • Third item
  • Fourth item

Ordered Lists

  1. First step
  2. Second step
    1. Substep 2.1
    2. Substep 2.2
  3. Third step
  4. Fourth step

Task Lists

  • Completed task
  • Incomplete task
  • Another completed task
  • Pending task with bold text

External link to Google

Internal link (if other posts exist)

Link with title attribute

Blockquotes

This is a simple blockquote. It’s used for quoting text or highlighting important information.

This is a longer blockquote that spans multiple lines. It demonstrates how blockquotes handle line breaks and longer text content. Blockquotes are particularly useful for:

  • Citing sources
  • Highlighting key points
  • Setting apart important information
  • Adding visual variety to long posts

Blockquotes can contain formatting too!

This includes italic, bold, and inline code elements.

Code Blocks

Inline Code

Here’s some inline code: console.log('Hello, World!')

JavaScript Code Block

function greetUser(name) {
  const greeting = `Hello, ${name}!`;
  console.log(greeting);
  return greeting;
}

// Example usage
const message = greetUser("Kierr");

Python Code Block

def fibonacci(n):
    """Generate Fibonacci sequence up to n."""
    sequence = [0, 1]
    while len(sequence) < n:
        sequence.append(sequence[-1] + sequence[-2])
    return sequence

# Example usage
fib_numbers = fibonacci(10)
print(fib_numbers)

CSS Code Block

.typography-demo {
  font-family: "Inconsolata", monospace;
  line-height: 1.6;
  color: #333;
}

.weight-demo {
  font-weight: var(--font-weight-medium);
  margin: 1rem 0;
}

Tables

NameAgeOccupationStatus
Alice28DeveloperActive
Bob35DesignerInactive
Charlie42Product ManagerActive
Diana31Data ScientistActive

Complex Table with Alignment

Left AlignCenter AlignRight Align
TextTextText
Longer textMedium123
ShortVery long text here456789

Horizontal Rules

This text is above the horizontal rule.


This text is below the horizontal rule.

Images

Placeholder Image

Caption: This is a placeholder image with caption.

HTML Elements

You can also use raw HTML in markdown:

This text is highlighted

Ctrl + C to copy

Superscript and subscript

Click to expand details

This is hidden content that appears when you click the summary. It’s great for additional information that users might not need to see immediately.

Mathematical Expressions

Inline math: $E = mc^2$

Block math:

$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$

Character Entities

© Copyright ® Registered ™ Trademark

< > & ” ‘

Emphasis Combinations

You can combine bold and italic together.

Or all bold and italic.

You can also combine strikethrough and italic.

Typography Testing Paragraphs

Readability Test

The quick brown fox jumps over the lazy dog. This pangram sentence contains every letter of the English alphabet at least once. Pack my box with five dozen liquor jugs. The five boxing wizards jump quickly. How vexingly quick daft zebras jump!

Line Height Test

This paragraph tests line height and spacing. Proper line height is crucial for readability, especially in longer blocks of text. The ideal line height is typically 1.5-1.7 times the font size, depending on the typeface and line length. This ensures that readers can easily find the beginning of the next line without losing their place.

Character Spacing Test

AVAILABILITY WIDE LETTERS. narrownarrowletters. Mixed spacing requires careful attention to kerning and tracking to ensure visual consistency and readability across different character combinations.

Color and Contrast

Note: This section tests any custom color classes available.

This is custom red text.

This is custom teal text.

Final Notes

This demo post should help you verify that:

  1. All heading levels render correctly
  2. Font weights display properly (Light, Regular, Medium, Bold)
  3. Markdown formatting works as expected
  4. Code blocks have proper syntax highlighting
  5. Tables render with correct alignment
  6. Links and other interactive elements function properly
  7. The overall typography creates good visual hierarchy

Feel free to use this as a reference when testing new themes or styling changes!

Edit page
Previous Post
Scroll Spy Torture Test