Typography ShowcaseLink to section

This page demonstrates all the typographic elements and prose styling available in the markdown system.

HeadingsLink to section

The site supports all heading levels with carefully crafted typography:

Heading Level 1Link to section

Heading Level 2Link to section

Heading Level 3Link to section

Heading Level 4Link to section

Heading Level 5Link to section

Heading Level 6Link to section

Paragraph TextLink to section

Regular paragraphs use optimized line height and spacing for readability. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Multiple paragraphs are separated with appropriate spacing. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text FormattingLink to section

Inline StylesLink to section

• Bold text for emphasis
• Italic text for subtle emphasis
• Bold and italic for strong emphasis
• Strikethrough for deleted content
• Inline code for technical terms

LinksLink to section

For comprehensive link examples, see the Links documentation.

ListsLink to section

Unordered ListsLink to section

• First level item
• Another first level item
  • Second level item
  • Another second level item
    • Third level item
    • Another third level item
• Back to first level

Ordered ListsLink to section

1. First item
2. Second item
   1. Nested item
   2. Another nested item
3. Third item
   1. Sub-item A
   2. Sub-item B
      1. Deep nesting
      2. Works well

Task ListsLink to section

• Completed task
• Pending task
• Another completed task
  • Nested completed
  • Nested pending

BlockquotesLink to section

For comprehensive blockquote examples, see the Blockquotes & Callouts documentation.

Horizontal RulesLink to section

Use three or more hyphens, asterisks, or underscores:

Line BreaksLink to section

Text with
two spaces at the end
creates line breaks.

Or use
backslash
for the same effect.

Special CharactersLink to section

• Em dash — like this
• En dash – like this
• Ellipsis… like this
• Copyright © 2024
• Trademark™ and Registered®
• Smart quotes: “double” and ‘single’

Emphasis CombinationsLink to section

This paragraph combines bold text, italic text, bold italic text, inline code, and links all in one sentence to show how they work together harmoniously.

Long-form ContentLink to section

Reading ExperienceLink to section

The typography system is optimized for long-form reading. Font sizes, line heights, and margins are carefully balanced to reduce eye strain and improve comprehension.

Paragraphs maintain an optimal line length (65-75 characters) for comfortable reading. This is achieved through the prose container which limits the maximum width while remaining responsive.

Dark Mode SupportLink to section

All typographic elements are optimized for both light and dark themes. Colors automatically adjust to maintain proper contrast ratios and readability in any lighting condition.

Edge CasesLink to section

Very Long WordsLink to section

Supercalifragilisticexpialidocious and pneumonoultramicroscopicsilicovolcanoconiosis handle gracefully with proper word breaking.

Mixed ScriptsLink to section

The system handles mixed scripts well: Hello 你好 مرحبا שלום こんにちは 안녕하세요

Special FormattingLink to section

Typography Best PracticesLink to section

1. Use semantic headings - Don’t skip heading levels
2. Keep paragraphs concise - Aim for 3-5 sentences
3. Use lists for clarity - Break up complex information
4. Emphasize sparingly - Too much bold text loses impact
5. Link descriptively - Avoid “click here” links

ConclusionLink to section

This typography system provides a solid foundation for creating beautiful, readable content. The careful attention to spacing, sizing, and styling ensures your content looks professional and is enjoyable to read.