Display
.fxr-type-display
Test with clarity
Internal design system
Font size playground
A restrained responsive type system for Help Center pages. Sizes remain readable without turning documentation into marketing-scale display typography.
Responsive scale
Values are pixels. The rendered specimen automatically follows the current viewport.
| Role | Example | Mobile | Tablet | Desktop | Large | Color | Usage |
|---|---|---|---|---|---|---|---|
| Display | Aa | 32px | 40px | 48px | 52px | Primary | Rare campaign or primary landing statement |
| Page title | Aa | 28px | 32px | 36px | 40px | Primary | One H1 per page |
| Section title | Aa | 22px | 24px | 26px | 28px | Primary | Major H2 content sections |
| Subsection title | Aa | 18px | 19px | 20px | 21px | Primary | H3 and card-group headings |
| FAQ question | Aa | 17px | 18px | 18px | 19px | Primary | Expandable questions and prominent prompts |
| Lead body | Aa | 17px | 18px | 18px | 19px | Primary 85% | Introductory copy beneath a page title |
| Body | Aa | 16px | 17px | 17px | 18px | Primary 80% | Articles, lists, steps, and long-form explanations |
| Description | Aa | 15px | 16px | 16px | 17px | Secondary | Cards, summaries, excerpts, and supporting copy |
| Blockquote | Aa | 17px | 18px | 19px | 19px | Primary | Quoted guidance and editorial emphasis |
| UI text | Aa | 14px | 15px | 15px | 16px | Primary | Navigation, buttons, inputs, and interface text |
| Label | Aa | 12px | 13px | 13px | 14px | Secondary | Category eyebrows, field labels, and compact grouping text |
| Code | Aa | 14px | 15px | 15px | 15px | Primary | Inline code and technical examples |
| Caption | Aa | 13px | 13px | 13px | 13px | Secondary | Dates, captions, legal notes, and tertiary metadata |
Live specimens
Review hierarchy, density, and wrapping at the current viewport—not size in isolation.
Page title
.fxr-type-page-title
Product guides
Section title
.fxr-type-section-title
Available guides
Subsection title
.fxr-type-subsection-title
Account management
FAQ question
.fxr-type-question
How do I review a session?
Lead body
.fxr-type-body-lead
Replay historical markets and build confidence from evidence.
Body
.fxr-type-body
Use historical sessions to test decisions before risking live capital.
Description
.fxr-type-description
A concise explanation that adds context without competing with the title.
Blockquote
.fxr-type-blockquote
A repeatable process is more useful than a lucky result.
UI text
.fxr-type-ui
Search the Help Center
Label
.fxr-type-label
PRODUCT GUIDE
Code
.fxr-type-code
risk_per_trade = account_size * 0.01
Caption
.fxr-type-caption
Updated August 31, 2026
Rich-text flow
Product guide
Build a repeatable review process
Use one consistent workflow to compare sessions, identify recurring decisions, and refine the rules behind your strategy.
Review the evidence
Supporting context uses the secondary text color to stay distinct from the main reading flow.
Start with the same checkpoints after every test. This keeps the analysis focused and makes results easier to compare over time.
- Confirm the market context and session.
- Compare the planned setup with the executed trade.
- Record one change to test in the next replay.
A useful review ends with a rule you can test again.
Use session_notes for concise observations, then link to the full journal entry.
Example content only · Internal typography review