{"id":2,"date":"2026-01-20T18:15:57","date_gmt":"2026-01-20T18:15:57","guid":{"rendered":"https:\/\/thrakon.devlh.com\/?page_id=2"},"modified":"2026-02-28T17:35:30","modified_gmt":"2026-02-28T15:35:30","slug":"typography","status":"publish","type":"page","link":"https:\/\/thrakon.devlh.com\/en\/typography\/","title":{"rendered":"Typography Demo"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction Paragraph<\/h2>\n\n\n\n<p>This page is a complete <strong>typography testing layout<\/strong> designed to help you configure fonts, spacing, line heights, and visual hierarchy inside Gutenberg. It includes headings, paragraphs, lists, tables, quotes, buttons, and more.<\/p>\n\n\n\n<p>You can use this page to fine-tune:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Font family<\/li>\n\n\n\n<li>Font sizes<\/li>\n\n\n\n<li>Line height<\/li>\n\n\n\n<li>Letter spacing<\/li>\n\n\n\n<li>Block spacing<\/li>\n\n\n\n<li>Button styles<\/li>\n\n\n\n<li>Link appearance<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Heading Level 2 \u2013 Section Title<\/h2>\n\n\n\n<p>This is a standard paragraph under an H2 heading. It contains <strong>bold text<\/strong>, <em>italic text<\/em>, and a sample <a href=\"#\">inline link<\/a> to test link color and hover behavior.<\/p>\n\n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Heading Level 3 \u2013 Subsection<\/h3>\n\n\n\n<p>This paragraph helps test spacing between H3 and body text.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Heading Level 4 \u2013 Smaller Title<\/h4>\n\n\n\n<p>This paragraph helps test spacing between H4 and body text.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Heading Level 5 \u2013 Minor Title<\/h5>\n\n\n\n<p>This paragraph helps test spacing between H5 and body text.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Heading Level 6 \u2013 Smallest Heading<\/h6>\n\n\n\n<p>This paragraph helps test spacing between H6 and body text.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Long Form Content Paragraph<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Unordered List (Bullets)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First bullet item<\/li>\n\n\n\n<li>Second bullet item<\/li>\n\n\n\n<li>Third bullet item\n<ul class=\"wp-block-list\">\n<li>Nested bullet<\/li>\n\n\n\n<li>Nested bullet<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Fourth bullet item<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Ordered List (Numbers)<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>First numbered item<\/li>\n\n\n\n<li>Second numbered item<\/li>\n\n\n\n<li>Third numbered item<\/li>\n\n\n\n<li>Fourth numbered item<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Blockquote<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cGood typography is invisible. When done right, the reader focuses on the content \u2014 not the design.\u201d<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Pull Quote<\/h2>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>\u201cTypography is what language looks like.\u201d<\/p><cite>A random designer<\/cite><\/blockquote><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Table Example<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Feature<\/th><th>Value<\/th><th>Status<\/th><\/tr><\/thead><tbody><tr><td>Font Family<\/td><td>Inter<\/td><td>Active<\/td><\/tr><tr><td>Base Size<\/td><td>16px<\/td><td>Default<\/td><\/tr><tr><td>Line Height<\/td><td>1.6<\/td><td>Optimized<\/td><\/tr><tr><td>Letter Spacing<\/td><td>0.2px<\/td><td>Enabled<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Buttons Section<\/h2>\n\n\n\n<p>Add two Gutenberg buttons:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Fill Button<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\">Outline Button<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Code Block<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>body {<br>  font-family: \"Inter\", sans-serif;<br>  font-size: 16px;<br>  line-height: 1.6;<br>}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Preformatted Text<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted\">This is preformatted text.<br>Spacing and line breaks<br>should remain exactly<br>as written.<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Separator<\/h2>\n\n\n\n<p>Add a separator block here to test spacing between sections.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Image Block Placeholder<\/h2>\n\n\n\n<p>Insert an image here and test:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Caption style<\/li>\n\n\n\n<li>Image border radius<\/li>\n\n\n\n<li>Alignment (left \/ center \/ right)<\/li>\n\n\n\n<li>Full width display<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/placehold.co\/1200x600\" alt=\"This is an image alt text example.\" title=\"\"><figcaption class=\"wp-element-caption\">\u201cThis is an image caption example.\u201d<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Final Paragraph<\/h2>\n\n\n\n<p>This concludes the typography testing article.<br>Use this page to finalize your:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Heading scale<\/li>\n\n\n\n<li>Paragraph spacing<\/li>\n\n\n\n<li>Button styling<\/li>\n\n\n\n<li>Link appearance<\/li>\n\n\n\n<li>Table formatting<\/li>\n\n\n\n<li>Quote styling<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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: Heading Level 2 \u2013 Section Title This is a standard paragraph under an H2 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/thrakon.devlh.com\/en\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thrakon.devlh.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thrakon.devlh.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thrakon.devlh.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thrakon.devlh.com\/en\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":8,"href":"https:\/\/thrakon.devlh.com\/en\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":807,"href":"https:\/\/thrakon.devlh.com\/en\/wp-json\/wp\/v2\/pages\/2\/revisions\/807"}],"wp:attachment":[{"href":"https:\/\/thrakon.devlh.com\/en\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}