Typography Demo

Technical Support +30 800 100 14 14 Mon - Fri: 9:00 - 17:00

Introduction Paragraph

This page is a complete typography testing layout designed to help you configure fonts, spacing, line heights, and visual hierarchy inside Gutenberg. It includes headings, paragraphs, lists, tables, quotes, buttons, and more.

You can use this page to fine-tune:

  • Font family
  • Font sizes
  • Line height
  • Letter spacing
  • Block spacing
  • Button styles
  • Link appearance

Heading Level 2 – Section Title

This is a standard paragraph under an H2 heading. It contains bold text, italic text, and a sample inline link to test link color and hover behavior.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Heading Level 3 – Subsection

This paragraph helps test spacing between H3 and body text.

Heading Level 4 – Smaller Title

This paragraph helps test spacing between H4 and body text.

Heading Level 5 – Minor Title

This paragraph helps test spacing between H5 and body text.

Heading Level 6 – Smallest Heading

This paragraph helps test spacing between H6 and body text.

Long Form Content Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio.

Unordered List (Bullets)

  • First bullet item
  • Second bullet item
  • Third bullet item
    • Nested bullet
    • Nested bullet
  • Fourth bullet item

Ordered List (Numbers)

  1. First numbered item
  2. Second numbered item
  3. Third numbered item
  4. Fourth numbered item

Blockquote

“Good typography is invisible. When done right, the reader focuses on the content — not the design.”

Pull Quote

“Typography is what language looks like.”

A random designer

Table Example

FeatureValueStatus
Font FamilyInterActive
Base Size16pxDefault
Line Height1.6Optimized
Letter Spacing0.2pxEnabled

Buttons Section

Add two Gutenberg buttons:

Fill Button
Outline Button

Code Block

body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

Preformatted Text

This is preformatted text.
Spacing and line breaks
should remain exactly
as written.

Separator

Add a separator block here to test spacing between sections.

Image Block Placeholder

Insert an image here and test:

  • Caption style
  • Image border radius
  • Alignment (left / center / right)
  • Full width display
This is an image alt text example.
“This is an image caption example.”

Final Paragraph

This concludes the typography testing article.
Use this page to finalize your:

  • Heading scale
  • Paragraph spacing
  • Button styling
  • Link appearance
  • Table formatting
  • Quote styling