Every typographic element from the redesign reference page. If something looks weird, you found a CSS problem.

Headings

Heading 1 - The quick brown fox

Heading 2 - The quick brown fox

Heading 3 - The quick brown fox

Heading 4 - The quick brown fox

Heading 5 - The quick brown fox

Heading 6 - The quick brown fox

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Another paragraph with bold text, italic text, bold italic, and inline code.

You can also include a link to example.com.

Blockquote

This is a blockquote. It can span multiple paragraphs, each getting the same italic serif treatment.

The second paragraph sits comfortably inside the same left-border container.

• Someone important

Horizontal Rule

Content before the rule.

Content after the rule. The section glyph marks the division.

Lists

Unordered

• Item one
• Item two
• Item three
  • Nested item
  • Nested item
    • Deep nested item

Ordered

1. First item
2. Second item
3. Third item
   1. Nested ordered item
   2. Another nested item

Task List

• Completed task
• Incomplete task
• Another task

Definition List

Term 1

Definition for term 1. This is the explanation of what the term means.

Term 2

Definition for term 2. A little more context about the second concept.

Code

Inline Code

Use npm install to install dependencies. Then run npm run dev.

Code Block - JavaScript

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

Code Block - Python

def fibonacci(n):
  a, b = 0, 1
  for _ in range(n):
    yield a
    a, b = b, a + b

Table

Image

Fig. 01 - Sample image from picsum.photos, filtered to match the paper palette.

Inline Elements

This sentence contains bold, italic, strikethrough, inline code, and a link. All coexist inside a single paragraph.

Footnotes

Here is a statement with a footnote.¹ And another claim that needs attribution.²

Details / Collapsible

Keyboard Keys

Press Ctrl + C to copy. Press Cmd + Shift + P to open the command palette.

Abbreviation

HTML is the standard language for web pages. CSS handles the presentation.

Address

Mixed Content

Tip: Good typography makes reading easier.

• Keep line length comfortable - around 60-70 characters
• Use proper spacing between elements
• Choose readable, characterful fonts