Responsive type, in context

Review how FX Replay text roles read from phone to large screens. All copy is illustrative; sizes on this page are candidates, not a rollout.
Measuring viewportMobile below 768 · tablet 768–1279 · desktop 1280+
54 specimens30 shrink when wider2 below review floor
Pending approval · global-scale proposal

One display ceiling for large screens

Current Product globals sit beside the proposed values. The sample below each name responds to your live viewport, but only inside this lander. The smaller heading steps also have a +1px mobile proposal; the separate Body roles trial appears below.

Display Large is the largest proposed step. On mobile it is 28px, 3.5px above Heading XL. On tablet it is 37px, 7px above Heading XL. At 1280px Display Large reaches 41px, 6px above Heading XL at 35px, then grows smoothly to 49.5px at 1920px and stops. The 1280–1920px fluid band is a proposed exception to approved fixed-breakpoint Decision 3, not an approved global rule. If approved, this would be one global class with responsive token values, not page overrides.

Heading Large

heading-lg

Keep the setup criteria visible

Preview now Measuring
Mobile · 390px
Current 26pxProposed 21px
Tablet · 1024px
Current 30pxProposed 28px
Desktop · 1280px
Current 32pxProposed 30.5px
Large · 1920px
Current 32pxProposed 30.5px

Heading XL

heading-xl

Review decisions across sessions

Preview now Measuring
Mobile · 390px
Current 25pxProposed 24.5px
Tablet · 1024px
Current 31pxProposed 30px
Desktop · 1280px
Current 40pxProposed 35px
Large · 1920px
Current 40pxProposed 35px

Display Large

display-lg

Know what your sample says

Preview now Measuring
Mobile · 390px
Current 36pxProposed 28px
Tablet · 1024px
Current 44pxProposed 37px
Desktop · 1280px
Current 48pxProposed 41px
Large · 1920px
Current 48pxProposed 49.5px

The affected Heading scale rows below now show the same proposal as the comparison above. The smaller heading rows propose 22 / 20 / 18px on mobile against the approved current 21 / 19 / 17px. None of these rules have been promoted. “Now” measures each specimen’s computed font size and line height. A slash in Tablet shows 768–1023 / 1024–1279. Review flags use a 14px floor for readable body text and 12px for true labels and captions; these are review heuristics, not approved accessibility criteria.

Type specimens

Heading scale

Six heading steps have proposed values, including +1px mobile for heading-md/sm/xs.

display-lgProposed
display-lg

Know what your sample says

NowMeasuring
Mobile28px
Tablet37px
Desktop ref41px
Large · 1920px49.5px
heading-xlProposed
heading-xl

Review decisions across sessions

NowMeasuring
Mobile24.5px
Tablet30px
Desktop ref35px
Large · 1920px35px
heading-lgProposed
heading-lg

Keep the setup criteria visible

NowMeasuring
Mobile21px
Tablet28px
Desktop ref30.5px
Large · 1920px30.5px
heading-mdProposed
heading-md

Check the session context

NowMeasuring
Mobile22px
Tablet24.5px
Desktop ref26px
Large · 1920px26px
heading-smProposed
heading-sm

Write the invalidation first

NowMeasuring
Mobile20px
Tablet22px
Desktop ref22px
Large · 1920px22px
heading-xsProposed
heading-xs

A private review note

NowMeasuring
Mobile18px
Tablet18px
Desktop ref18px
Large · 1920px18px
Type specimens

Rich text headings

Current article selectors, including the existing H5/H6 issue. The 1024px tablet change is visible separately.

Rich text H1Observed
fxr-rich-content

Test the thesis against more than one session

NowMeasuring
Mobile26px
Tablet30 / 34px
Desktop ref34px
Rich text H2Observed
fxr-rich-content

Separate the setup from the outcome

NowMeasuring
Mobile22px
Tablet24 / 26px
Desktop ref26px
Rich text H3Observed
fxr-rich-content

Record the market condition

NowMeasuring
Mobile17px
Tablet18px
Desktop ref18px
Rich text H4Observed
fxr-rich-content

Keep the rules in view

NowMeasuring
Mobile15.5px
Tablet16.5px
Desktop ref16.5px
Rich text H5Observed
fxr-rich-content

Existing H5/H6 defect; shown unchanged for review.

Smaller at a wider breakpointBelow review floor
Session note
NowMeasuring
Mobile12px
Tablet10.5px
Desktop ref10.5px
Rich text H6Observed
fxr-rich-content
Smaller at a wider breakpointBelow review floor
Review label
NowMeasuring
Mobile12px
Tablet10.5px
Desktop ref10.5px
Type specimens

Body roles

Large · 1920px is 1.5px above desktop for every body role. The 1280–1920px band and 17.5px named-role ceiling are separate pending approvals; the arbitrary-size guard stays 14.5–16px. No public paragraph rules change.

Reading bodyProposedNew role class
tr-role-reading-body
Smaller at a wider breakpoint

Replay the same setup through quiet and volatile sessions. Record the entry, invalidation, and result before deciding whether the pattern holds across a useful sample.

NowMeasuring
Mobile16.5px
Tablet15.5px
Desktop ref15.5px
Large · 1920px17px
Reading list itemProposedNew role class
tr-role-reading-list
Smaller at a wider breakpoint
  • Mark the entry condition before the replay begins.
  • Compare the result with the same condition in other sessions.
NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
Large · 1920px16.5px
Standard bodyProposedNew role class
tr-role-standard-body
Smaller at a wider breakpoint

Compare the written plan with what actually happened, then keep the decision and its context in the journal.

NowMeasuring
Mobile16.5px
Tablet15.5px
Desktop ref15.5px
Large · 1920px17px
Lead bodyProposedNew role class
tr-role-lead-body
Smaller at a wider breakpoint

Take the strategy you already trade and test it privately across historical conditions before you trust the next decision.

NowMeasuring
Mobile16.5px
Tablet16px
Desktop ref16px
Large · 1920px17.5px
Supporting bodyProposedNew role class
tr-role-supporting-body
Smaller at a wider breakpoint

Evidence stays tied to the rule you tested.

NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
Large · 1920px16.5px
Workflow card bodyProposedNew role class
tr-role-workflow-body
Smaller at a wider breakpoint

Run the same entry criteria through another historical session and note where the setup stops working.

NowMeasuring
Mobile15.5px
Tablet14.5px
Desktop ref14.5px
Large · 1920px16px
Type specimens

Rich text details

Candidate role mapping for article prose; headings above remain an observed comparison.

Rich text paragraphProposedNew role class
tr-role-reading-body
Smaller at a wider breakpoint

Replay the same setup through quiet and volatile sessions. Record the entry, invalidation, and result before deciding whether the pattern holds across a useful sample.

NowMeasuring
Mobile16.5px
Tablet15.5px
Desktop ref15.5px
Rich text list itemProposedNew role class
tr-role-reading-list
Smaller at a wider breakpoint
  • Define the entry and invalidation in advance.
  • Review each decision under the same rules.
NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
Bold list leadProposedNew role class
tr-role-reading-list

The bold lead inherits Reading list item sizing.

Smaller at a wider breakpoint
  • Before replay: write the condition that would invalidate the setup.
NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
BlockquoteProposedNew role class
tr-role-reading-body tr-quote
Smaller at a wider breakpoint
“A good result is one you can trace back to a decision made before the outcome was visible.”
NowMeasuring
Mobile16.5px
Tablet15.5px
Desktop ref15.5px
Inline codeApprovedNew role class
tr-role-inline-code
entry-rule: session-confirmed
NowMeasuring
Mobile14px
Tablet14px
Desktop ref14px
Table headerNew, page-scopedNew role class
tr-role-table-header
SessionSampleReview
NowMeasuring
Mobile12px
Tablet12px
Desktop ref12px
Table cellProposedNew role class
tr-role-supporting-body
Smaller at a wider breakpoint
London42 testsReview context
NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
Figure captionProposedNew role class
tr-role-caption
Smaller at a wider breakpoint
Illustrative session review. No results or performance figures are shown.
NowMeasuring
Mobile14px
Tablet13px
Desktop ref13px
Article excerptProposedNew role class
tr-role-lead-body
Smaller at a wider breakpoint

What changes when you replay a familiar setup through a less forgiving market condition?

NowMeasuring
Mobile16.5px
Tablet16px
Desktop ref16px
Inline linkNew, page-scopedNew role class
tr-role-reading-body

Reading body inheritance; link styling is local to this specimen.

Smaller at a wider breakpoint

Keep the written rules beside the result when you review a session.

NowMeasuring
Mobile16.5px
Tablet15.5px
Desktop ref15.5px
Type specimens

Labels and controls

Actual control, caption, chip, question and field contexts.

UI control labelProposedNew role class
tr-role-ui-label
Smaller at a wider breakpoint
NowMeasuring
Mobile15px
Tablet14px
Desktop ref14px
Caption and metadataProposedNew role class
tr-role-caption
Smaller at a wider breakpoint
Private session notes · saved for review
NowMeasuring
Mobile14px
Tablet13px
Desktop ref13px
Plain section labelProposed
fxr-ds-overline

Page-only trial: +1px at every width, Lato and pure white. Shared overline stays unchanged.

Smaller at a wider breakpoint
Session review
NowMeasuring
Mobile13.5px
Tablet12.5px
Desktop ref12.5px
Eyebrow pillApproved
fxr-eyebrow-pill
Historical market replay
NowMeasuring
Mobile13px
Tablet13px
Desktop ref13px
Strategy chipObservedNew role class
tr-role-strategy-chip

Taxonomy exception, not the canonical eyebrow pill.

Price action
NowMeasuring
Mobile12.5px
Tablet12.5px
Desktop ref12.5px
FAQ questionProposedNew role class
tr-role-faq-question
Smaller at a wider breakpoint
NowMeasuring
Mobile17px
Tablet16px
Desktop ref16px
BadgeNew, page-scopedNew role class
tr-role-badge
Draft review
NowMeasuring
Mobile12px
Tablet12px
Desktop ref12px
TagNew, page-scopedNew role class
tr-role-tag
London session
NowMeasuring
Mobile12px
Tablet12px
Desktop ref12px
Input valueProposedNew role class
tr-role-supporting-body
Smaller at a wider breakpoint
NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
Input placeholderProposedNew role class
tr-role-supporting-body
Smaller at a wider breakpoint
NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
CTA label · lgProposed
fxr-ds-button

Page-only trial: 15px Lato Regular and pure white. Shared Button stays unchanged.

NowMeasuring
Mobile15px
Tablet15px
Desktop ref15px
CTA label · mdProposed
fxr-ds-button

Page-only trial: 15px Lato Regular and pure white. Shared Button stays unchanged.

NowMeasuring
Mobile15px
Tablet15px
Desktop ref15px
CTA label · smProposed
fxr-ds-button

Page-only trial: 15px Lato Regular and pure white. Shared Button stays unchanged.

NowMeasuring
Mobile15px
Tablet15px
Desktop ref15px
Type specimens

Card text

Editorial card copy beside existing Strategy-card metadata values.

Card titleProposed
heading-sm

A repeatable setup starts with rules

NowMeasuring
Mobile20px
Tablet22px
Desktop ref22px
Card descriptionProposedNew role class
tr-role-supporting-body
Smaller at a wider breakpoint

Keep the conditions and invalidation alongside the chart, even when a trade looks obvious in hindsight.

NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
Card metadata labelNew, page-scopedNew role class
tr-role-card-key

Observed Strategy-card key size, isolated here as a named role.

Market
NowMeasuring
Mobile14px
Tablet14px
Desktop ref14px
Card metadata valueNew, page-scopedNew role class
tr-role-card-value

Observed Strategy-card value size, isolated here as a named role.

Major FX pairs
NowMeasuring
Mobile14px
Tablet14px
Desktop ref14px
Card difficulty valueNew, page-scopedNew role class
tr-role-card-difficulty
Intermediate
NowMeasuring
Mobile15px
Tablet15px
Desktop ref15px
Type specimens

Other readable text

Roles not covered by the core list, explicitly named rather than hidden in a component.

Form helper textNew, page-scopedNew role class
tr-role-supporting-body
Smaller at a wider breakpoint

Keep this note private until you choose to share it.

NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
Validation messageNew, page-scopedNew role class
tr-role-supporting-body
Smaller at a wider breakpoint

Write the invalidation rule before continuing.

NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
Tab labelProposedNew role class
tr-role-ui-label
Smaller at a wider breakpoint
By session
NowMeasuring
Mobile15px
Tablet14px
Desktop ref14px
Table numeric valueNew, page-scopedNew role class
tr-role-supporting-body
Smaller at a wider breakpoint
42 observations
NowMeasuring
Mobile16px
Tablet15px
Desktop ref15px
Chart annotationNew, page-scopedNew role class
tr-role-caption
Smaller at a wider breakpoint
Sample size by session
NowMeasuring
Mobile14px
Tablet13px
Desktop ref13px
Empty-state messageNew, page-scopedNew role class
tr-role-standard-body
Smaller at a wider breakpoint

No matching session notes yet. Change the filter to review the full sample.

NowMeasuring
Mobile16.5px
Tablet15.5px
Desktop ref15.5px
Article contents linkNew, page-scopedNew role class
tr-role-ui-label
Smaller at a wider breakpoint
Review the article structure
NowMeasuring
Mobile15px
Tablet14px
Desktop ref14px
Code blockNew, page-scopedNew role class
tr-role-inline-code
entry-rule: session-confirmed
NowMeasuring
Mobile14px
Tablet14px
Desktop ref14px

Review here before promotion

The heading and Body roles proposals above change no global typography, public route, navigation, footer, Ploybook, or checkout type. Approval of these numbers would be a separate step before any global promotion; unrelated roles remain out of scope.