{"id":77,"date":"2026-09-03T01:21:53","date_gmt":"2026-09-03T01:21:53","guid":{"rendered":"https:\/\/pulsar.ispazio.net\/auto\/2026\/09\/03\/typography-and-post-elements\/"},"modified":"2026-09-03T01:21:53","modified_gmt":"2026-09-03T01:21:53","slug":"typography-and-post-elements","status":"publish","type":"post","link":"https:\/\/pulsar.ispazio.net\/auto\/2026\/09\/03\/typography-and-post-elements\/","title":{"rendered":"Typography and Post Elements"},"content":{"rendered":"\r\n<p class=\"has-drop-cap wp-block-paragraph\">Every theme claims to be readable. This article is where you check ours. Below is one of each: the headings, the quotations, the lists, the tables, the code, the images and the rules that separate them \u2014 set the way Pulsar sets them, at the measure it uses, with the spacing it puts between them. Nothing here is a picture of a demo: it is the theme drawing its own text.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">The body you are reading is the size you chose in <strong>Colours and typography<\/strong>. Inside it live the ordinary things: <strong>bold for the word that carries the sentence<\/strong>, <em>italic for a title or a foreign term<\/em>, <a href=\"#\">a link that has to be visible without shouting<\/a>, <code>inline code<\/code> for the name of a file or a function, and the occasional <mark>highlighted phrase<\/mark> when something must not be missed.<\/p>\r\n<h1>Headings, from the loudest to the quietest<\/h1>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Heading 2 &#8211; A second level, for a section inside an article<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Four levels, each a step down from the one above. The distance from the paragraph that precedes a heading is deliberately larger than the distance to the one that follows it: a heading belongs to the text underneath, not to the text before.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Heading 3 &#8211; A third level, for a section inside a section<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Use this one when a long piece needs signposts. Three or four of them turn a wall of text into something a reader can scan before deciding to read.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Heading 4 &#8211; And a fourth, quieter still<\/h4>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Below this level a heading stops looking like a heading and starts looking like bold text, which is why the theme offers four and not six.<\/p>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Quotations<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Five shapes, and they are not interchangeable. A quotation is somebody else&#8217;s words, kept in the flow of the article. A pull quote is your own sentence, lifted out of the flow to be read before the paragraph it came from.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Quotation<\/h3>\r\n\r\n\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\r\n<p class=\"wp-block-paragraph\">A page of text is a page of decisions. How wide the line, how far apart the lines, where the eye rests: none of it is decoration, all of it is whether the piece gets read to the end.<\/p>\r\n<cite>A typographer, on being asked what typography is for<\/cite><\/blockquote>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">The bar down the side is the brand colour and the panel behind it the same colour at a fraction of its strength, so a quotation belongs to the site it appears on. The line under it is the attribution, which can be left out.<\/p>\r\n\r\n\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\r\n<p class=\"wp-block-paragraph\">Without an attribution the box closes on the last word, and nothing is left hanging under it.<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Pull quote, centred<\/h3>\r\n\r\n\r\n\r\n<figure class=\"wp-block-pullquote\"><blockquote><p>The pull quote says the one thing you would want a reader to remember if they read nothing else.<\/p><cite>Every editor, eventually<\/cite><\/blockquote><\/figure>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Pull quote, to one side<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">It can also stand beside the article, with the text running past it. At this width it holds one sentence: a side quote that needs three lines has stopped being a quote and become a paragraph in a costume.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-pullquote alignleft\"><blockquote><p>A quote set beside the text is read before it, so it had better be worth arriving early for.<\/p><cite>The rule nobody writes down<\/cite><\/blockquote><\/figure>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">This one is on the left, and the text keeps its measure and flows around it the way it does around a picture. On a phone there is no room to set anything beside anything, so the quote takes the full width and the paragraphs go back to being paragraphs.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Give it a second paragraph so the wrap has something to wrap around. When the words run out before the quote does, whatever comes next clears it on its own: you never find a heading pinned to the side of a sentence in large type.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-pullquote alignright\"><blockquote><p>And this one is on the right, which is where a quote goes when the paragraph beside it starts a new idea.<\/p><cite>The same rule, mirrored<\/cite><\/blockquote><\/figure>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Left and right behave identically, only mirrored: the same maximum width, the same space between the quote and the words, the same surrender to a single column when the screen is narrow. Which side to use is a question of where the reader&#8217;s eye already is.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Two side quotes in the same article are usually one too many. Three is a magazine spread, and this is a web page.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Pull quote, coloured<\/h3>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Any colour from the editor&#8217;s palette can go behind it. The rules above and below step aside when there is a panel of colour to hold the words instead.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-pullquote has-pale-cyan-blue-background-color has-background\"><blockquote><p>Colour is the loudest thing on a page, which is why a quote gets one only when it is the point of the section.<\/p><cite>Shane Doe<\/cite><\/blockquote><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Lists<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Bulleted where the order does not matter, numbered where it does, and nested when one point contains others.<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>A first point, short enough to be read at a glance.<\/li>\r\n\r\n\r\n\r\n<li>A second one, long enough to wrap onto a second line, so you can see how the indent behaves when the text runs on and the bullet stays where it was.<\/li>\r\n\r\n\r\n\r\n<li>A third, with children:\r\n<ul class=\"wp-block-list\">\r\n<li>a nested item<\/li>\r\n\r\n\r\n\r\n<li>and another, to show the second level<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li>Write the piece.<\/li>\r\n\r\n\r\n\r\n<li>Read it out loud and cut what you stumble on.<\/li>\r\n\r\n\r\n\r\n<li>Only then choose the picture.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Pictures<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">An image on its own, with a caption underneath. The caption is smaller and quieter than the body, because it explains the picture rather than competing with it.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-2261235\" src=\"https:\/\/pulsar.ispazio.net\/auto\/wp-content\/uploads\/sites\/3\/2026\/09\/pulsar-demo-51.jpg\" alt=\"\" \/>\r\n<figcaption class=\"wp-element-caption\">A full width picture, with the caption the theme draws under it.<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">An image can also sit beside the text. The paragraph wraps around it and keeps its rhythm; on a phone the picture takes the full width instead, because a column that narrow has no room to wrap.<\/p>\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"alignright size-medium is-resized\"><img decoding=\"async\" class=\"wp-image-2261236\" style=\"width: 320px;\" src=\"https:\/\/pulsar.ispazio.net\/auto\/wp-content\/uploads\/sites\/3\/2026\/09\/pulsar-demo-52.jpg\" alt=\"\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n<p class=\"wp-block-paragraph\">This is the text that runs alongside it. Notice that the space between the picture and the words is the same on every side of the article, and that the first line of the paragraph starts level with the top of the image rather than a few pixels below it. Small things, both, and both the kind of thing you only notice when they are wrong.<\/p>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">A second paragraph, so the wrap has something to wrap around. When the text runs out before the image does, the next block clears it on its own: you never end up with a heading pinned to the side of a photograph.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Tables<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">A table earns its place when two things have to be compared line by line. On a narrow screen it scrolls sideways inside its own box rather than squeezing the columns into unreadable slivers.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table\">\r\n<table>\r\n<thead>\r\n<tr>\r\n<th>Element<\/th>\r\n<th>Where it helps<\/th>\r\n<th>Where it does not<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td>Heading<\/td>\r\n<td>Breaking a long piece into parts<\/td>\r\n<td>Every third paragraph<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Pull quote<\/td>\r\n<td>One sentence worth remembering<\/td>\r\n<td>Repeating what is already above it<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Table<\/td>\r\n<td>Comparing values across rows<\/td>\r\n<td>A list wearing a costume<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Rule<\/td>\r\n<td>A change of subject<\/td>\r\n<td>Decoration between paragraphs<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<figcaption class=\"wp-element-caption\">Four elements, and the honest answer about each.<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Code<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Inline, as in <code>wp_enqueue_style()<\/code>, or as a block when the reader is meant to copy it. The block keeps its own spacing and never wraps a line in the middle of a token.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>add_filter( 'pulsar_most_viewed_ids', function ( $ids ) {\r\n    \/\/ Hand the widget your own list, and it stops guessing.\r\n    return [ 12, 34, 56 ];\r\n} );<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Buttons<\/h2>\r\n\r\n\r\n\r\n<p class=\"wp-block-paragraph\">Two of them, filled and outlined, in the colour of the palette in use.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Read the documentation<\/a><\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">See every shortcode<\/a><\/div>\r\n<\/div>\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\r\n\r\n\r\n<p class=\"wp-block-paragraph\">That is the whole vocabulary. If a piece of writing needs something that is not on this page, it probably needs an editor rather than a block.<\/p>\r\n\r\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>One of each: headings, quotations, lists, tables, code, pictures and rules, set the way the theme sets them.<\/p>\n","protected":false},"author":1,"featured_media":78,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-77","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides"],"comment_count":0,"author_name":"Fabiano Confuorto","author_avatar_url":"https:\/\/pulsar.ispazio.net\/auto\/wp-content\/uploads\/sites\/3\/2026\/09\/ea384402b159db230514f08d0a2a08c621e459edbd096d9df6bab6b29cf46f5a-150x150.jpg","_links":{"self":[{"href":"https:\/\/pulsar.ispazio.net\/auto\/wp-json\/wp\/v2\/posts\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pulsar.ispazio.net\/auto\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pulsar.ispazio.net\/auto\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pulsar.ispazio.net\/auto\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pulsar.ispazio.net\/auto\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":0,"href":"https:\/\/pulsar.ispazio.net\/auto\/wp-json\/wp\/v2\/posts\/77\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pulsar.ispazio.net\/auto\/wp-json\/wp\/v2\/media\/78"}],"wp:attachment":[{"href":"https:\/\/pulsar.ispazio.net\/auto\/wp-json\/wp\/v2\/media?parent=77"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pulsar.ispazio.net\/auto\/wp-json\/wp\/v2\/categories?post=77"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pulsar.ispazio.net\/auto\/wp-json\/wp\/v2\/tags?post=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}