Typography Test and Examples

This post is a full length post to test typographical elements. It will show every common markdown element, custom elements specific to the theme, and potential elements used by others. Let’s start with Headers.

Header Spacing can look odd when headers are stacked since this is not a normal use case. Also, this style of note is created using a paragraph tag with a note class.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

This is a basic paragraph of text that will demonstrate the default font-size, line-heights, and other settings that allow for extremely readable text. This is a basic paragraph of text that will demonstrate the default font-size, line-heights, and other settings that allow for extremely readable text. This is a basic paragraph of text that will demonstrate the default font-size, line-heights, and other settings that allow for extremely readable text. This is a basic paragraph of text that will demonstrate the default font-size, line-heights, and other settings that allow for extremely readable text.

At times, you can use bold or italics for emphasis.

You can even highlight text as well.

And what blog post doesn’t have links?

This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote.

This is a standard, commonly used blockquote. This is a standard, commonly used blockquote. This is a standard, commonly used blockquote. This is a standard, commonly used blockquote. This is a standard, commonly used blockquote. This is a standard, commonly used blockquote.

But if you use HTML, you can create a blockquote that includes citations such as this one.- Quote Source
You can even make blockquotes large by adding a .large class to your blockquote html. And it works with references as well!Yes, it does!

Let’s talk about code. You can have inline code or you can have code blocks:

<div>
<p>This is some basic HTML demonstrated in a code block.</p>
</div>

This is a paragraph with a note class.

This is a paragraph with an alert class.

This is a paragraph with an aside class.

This is a paragraph with a callout class.

There is another powerful element you can use with Sumo called a page fold. All you need to do is create a div with the class .page-fold and the magic will happen. Here’s an example:

You Can Use Headers

Anything you add will be properly formatted and aligned on desktop and mobile. It's perfect for extremely important contend, advertisements, or anything else that deserves extra attention. Creating this requires HTML that will be documented.

Here’s a random long length header to transition us to lists

  1. This is a numbered list
  2. Items will show up as expected
  3. Throughout the list

Here’s some random text to break up the two lists.

  • This is an unordered list
  • Items will show up as expected
  • Throughout the list

Footnotes can be important1, so here’s a test of a couple2 of those directly in line.

And who could forget tables? They’re seldom used, but can still be vital to presenting data. Below is a basic table with dummy content. Tables are not fully styled by default due to the extremely wide variance in use cases.

Header 1 Header 2 Header 3
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3
Row 4, Col 1 Row 4, Col 2 Row 4, Col 3

Lastly, just some more text to break up things. Thanks for checking this out!


  1. Footnotes text 1 ↩︎

  2. A little bit longer text for footnotes 2 that also includes a link↩︎

Meanwhile Apple Music on my Apple Watch can’t remember what it was playing when it gets kicked out of memory. Which happens with every day with every workout.

It’s never going to happen, but our industry would be much better served by making basic things work really well instead of constant, and often half-assed, innovation. mastodon.online/@9to5Mac/11280

This post has a quoteback followed by lead out text.

This post has lead-in text following by a quoteback.

Meanwhile Apple Music on my Apple Watch can’t remember what it was playing when it gets kicked out of memory. Which happens with every day with every workout.

It’s never going to happen, but our industry would be much better served by making basic things work really well instead of constant, and often half-assed, innovation. mastodon.online/@9to5Mac/11280

Video Embed Test

This is a full length post with a title. The purpose of this post is to test multiple video embeds both on the home page and on individual posts. Above each embed, I’ll document the source and the method used.

First, this embed is directly from the Micro.blog Uploads page.

Next, this embed is from YouTube and uses their default embed code.

The following is the same video using embed responsively.

This is a micropost with an image. The image code is using figure tags and includes a caption.

Auto-generated description: A person stands on a blue railing, smiling, in front of a coastline with rocks and waves in the background.
Caption for the image

This is a micropost with an image. The image code is copied from the Micro.blog uploads page. In this case, the image code is pasted directly inline with the text. This is a common end-user mistake that must be accomodated. There will be less space between text and photo. Auto-generated description: A person stands on a blue railing, smiling, in front of a coastline with rocks and waves in the background.

This is a micropost with an image added via the Copy HTML button on the Micro.blog uploads page. The code will be placed on a new line.

Auto-generated description: A person stands on a blue railing, smiling, in front of a coastline with rocks and waves in the background.

This is a micropost with an included image. In this case, image was added using the default image selector for Micro.blog.

This is a 300 character micropost without a title, the maximum length shown on the micro.blog timeline. This is a 300 character micropost without a title, the maximum length shown on the micro.blog timeline. This is a 300 character micropost without a title, it’s the max length shown on Mb timeline.