Typography verification

This is paragraph text under H1. Heading font should be: weight 500, size 2rem (32px), line-height 2.5rem (40px).

Testing Setup

Important: This typography verification should be tested at 1K screen resolution (1920x1080 pixels).

To set your browser viewport to 1K resolution using Developer Tools:

Chrome:

  1. Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) to open DevTools

  2. Click the Toggle device toolbar icon (or press Ctrl+Shift+M / Cmd+Shift+M)

  3. In the device toolbar, select Responsive from the dropdown

  4. Set dimensions to 1920 x 1080

  5. Ensure zoom is set to 100%

Firefox:

  1. Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) to open DevTools

  2. Click the Responsive Design Mode icon (or press Ctrl+Shift+M / Cmd+Option+M)

  3. Set dimensions to 1920 x 1080

  4. Ensure zoom is set to 100%

Typography Specifications

This document verifies that all RST components follow the typography specifications defined in _vanilla-settings.scss:

  • H1: weight 500, size 2rem (32px), line-height 2.5rem (40px)

  • H2: weight 300, size 2rem (32px), line-height 2.5rem (40px)

  • H3: weight 500, size 1.5rem (24px), line-height 2rem (32px)

  • H4: weight 300, size 1.5rem (24px), line-height 2rem (32px)

  • H5: weight 600, size 1.125rem (18px), line-height 1.5rem (24px)

  • H6: weight 400, size 1.125rem (18px), line-height 1.5rem (24px)

  • P: weight 400, size 0.875rem (14px), line-height 1.25rem (20px)

The table below shows the actual computed values at the current viewport width and updates as you resize the window:

Element Font size Font weight Line height
Loading…

H2 Heading Level

This is paragraph text under H2. Heading font should be: weight 300, size 2rem (32px), line-height 2.5rem (40px).

H3 Heading Level

This is paragraph text under H3. Heading font should be: weight 500, size 1.5rem (24px), line-height 2rem (32px).

H4 Heading Level

This is paragraph text under H4. Heading font should be: weight 300, size 1.5rem (24px), line-height 2rem (32px).

H5 Heading Level

This is paragraph text under H5. Heading font should be: weight 600, size 1.125rem (18px), line-height 1.5rem (24px).

H6 Heading Level

This is paragraph text under H6. Heading font should be: weight 400, size 1.125rem (18px), line-height 1.5rem (24px).

Inline Formatting Verification

Typography should remain consistent with inline formatting:

  • UI element in paragraph text

  • code in paragraph text

  • file path in paragraph text

  • sudo apt update in paragraph text

  • Ctrl+C in paragraph text

  • Italic in paragraph text

  • Bold in paragraph text

All the above should maintain the base paragraph typography of weight 400, size 0.875rem (14px), line-height 1.25rem (20px).

Code Blocks Typography

Code blocks should use monospace font: "Ubuntu Mono", Consolas, Monaco, Courier, monospace

# Code block example
def example():
    return "Typography test"

Terminal Block Typography

Terminal blocks should also use monospace font:

ubuntu@test:~$
make run

Lists Typography

List items should use paragraph typography (weight 400, size 0.875rem, line-height 1.25rem):

  1. First item with paragraph text

  2. Second item with paragraph text

    • Nested item A

    • Nested item B

  3. Third item with paragraph text

Definition Lists Typography

Definition lists should maintain proper typography:

Term 1:

Definition text should use paragraph typography (weight 400, size 0.875rem, line-height 1.25rem).

Term 2:

Another definition maintaining the same typography.

Table Typography

Table content should use paragraph typography:

Header Column 1

Header Column 2

Cell content with paragraph text

Cell content with paragraph text

More cell content

More cell content

Grid Table Typography

Header 1

Header 2

Cell content

Second paragraph

Cell content

in cell

More cells

More content

Notes and Admonitions Typography

Note

Note content should use paragraph typography (weight 400, size 0.875rem, line-height 1.25rem).

Tip

Tip content should use paragraph typography (weight 400, size 0.875rem, line-height 1.25rem).

Important

Important content should use paragraph typography (weight 400, size 0.875rem, line-height 1.25rem).

Caution

Caution content should use paragraph typography (weight 400, size 0.875rem, line-height 1.25rem).

Tabs Typography

Tab content should use paragraph typography:

Content in tab 1 with paragraph text maintaining weight 400, size 0.875rem, line-height 1.25rem.

Glossary Typography

test term

Glossary definition should use paragraph typography (weight 400, size 0.875rem, line-height 1.25rem).

another term

Another definition maintaining the same typography.

Reference to test term in paragraph text.

Multi-level Heading Hierarchy Test

H3 Level Test

Paragraph under H3.

H4 Level Test

Paragraph under H4.

H5 Level Test

Paragraph under H5.

Verification Checklist

When reviewing this page in the browser:

  • Inspect H1 - Should be weight 500, size 32px, line-height 40px
  • Inspect H2 - Should be weight 300, size 32px, line-height 40px
  • Inspect H3 - Should be weight 500, size 24px, line-height 32px
  • Inspect H4 - Should be weight 300, size 24px, line-height 32px
  • Inspect H5 - Should be weight 600, size 18px, line-height 24px
  • Inspect H6 - Should be weight 400, size 18px, line-height 24px
  • Inspect paragraphs - Should be weight 400, size 14px, line-height 20px
  • Inspect code blocks - Should use Ubuntu Mono font family
  • Inspect inline code - Should use Ubuntu Mono font family
  • Inspect all admonitions - Paragraph text should maintain base typography
  • Inspect table cells - Should maintain paragraph typography
  • Inspect list items - Should maintain paragraph typography
  • Inspect definition lists - Should maintain paragraph typography
  • Inspect tab content - Should maintain paragraph typography