Home Articles Sample Article Policies Search

Article Typography Guide

A visual and editorial reference for the complete article content system, including hierarchy, spacing, code, media, tables, callouts, and accessibility notes.

Overview

This guide documents the supported article presentation patterns used inside the publishing section. It is intended to help authors and future contributors produce consistent long-form content without leaving the visual language established by the policy pages.

Content Width

Main article content stays inside a controlled reading width to preserve comfortable line length on desktop and mobile.

Spacing Rhythm

Headings open larger blocks of space, while paragraphs, lists, and supporting elements use measured intervals for steady reading.

Responsive Rules

Tables and code scroll horizontally, media stays fluid, and long words and URLs wrap safely.

Heading Hierarchy

Use one page-level h1 per article. Follow with nested section headings in a logical order.

Heading Level One Example
Heading Level Two Example
Heading Level Three Example
Heading Level Four Example
Heading Level Five Example
Heading Level Six Example

Paragraph and Text Styles

Paragraphs should stay direct, well spaced, and easy to scan. Combine plain prose with strong emphasis, italic emphasis, underline, highlighted text, inline links, inline code, keyboard text, and references such as x2 or H2 only when they improve clarity.

Small text is available for helper notes, captions, short disclosures, or secondary editorial guidance.

Links and States

Links use the same restrained palette as the wider site. Hover and focus states remain subtle but visible to preserve accessibility and calm visual rhythm.

Standard blockquotes are intended for quoted guidance, highlighted findings, or short editorial framing.

Pull quotes may be used sparingly to emphasize a key sentence without introducing a separate visual system.

Lists

Use lists for scanning, process steps, or structured comparisons.

  • Unordered list item one
  • Unordered list item two with nested items
    • Nested unordered child
    • Nested mixed example
      1. Ordered child one
      2. Ordered child two
  • Unordered list item three
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three
Definition term
Definition descriptions can clarify domain-specific language or internal editorial rules.
Reading deck
The short introductory paragraph placed below the article title and above the main content body.

Code and Preformatted Content

Inline code is useful inside running text, while preformatted blocks are used for commands, snippets, configuration, or structured output. 

article:
  featured_image: required
  title: single h1
  metadata:
    - published
    - updated
    - author
    - category
    - reading-time

Tables

Tables are wrapped in a scroll-safe container so wider data stays readable on mobile without breaking layout.

Element Purpose Authoring Guidance
Heading Section hierarchy Keep headings short and descriptive
Paragraph Primary reading flow Use direct language and reasonable paragraph length
Code block Technical examples Prefer concise, legible examples over dense dumps
Use tables only when the content benefits from row-and-column comparison.

Figures, Images, and Captions

Editorial figure example demonstrating responsive image treatment
Figures should include useful alt text and concise captions when the caption adds context.

Embeds and Rich Media

Use the responsive embed wrapper for videos or iframe-based media so it stays contained within the article width.

Callouts and Notes

Info callout

Use for additional context, references, or neutral implementation notes.

Warning callout

Use when the content needs a cautionary note, risk notice, or operational dependency.

Responsive Behavior Notes

  • Long links and technical terms wrap safely.
  • Wide tables and code blocks scroll horizontally.
  • Images and figures never overflow the reading container.
  • Spacing remains open enough for narrow mobile screens.

Best Practices for Authors

  1. Use a single clear h1 and meaningful section headings.
  2. Lead with a short deck that explains why the article matters.
  3. Break complex material into short sections, lists, and examples.
  4. Use tables, figures, and code only when they improve understanding.
  5. Keep captions and metadata accurate and concise.

Accessibility Notes

  • Write descriptive link text instead of generic phrases.
  • Provide useful alt text for meaningful images.
  • Preserve heading order for assistive technologies.
  • Do not rely on color alone to communicate importance.
  • Prefer readable, concise paragraphs over decorative formatting.

This page serves as the editorial and visual reference for future article writing inside the `/article` system.

Back to article index