03 · RSX Design

Typography

Type carries RSX interfaces. Three faces, each with one job, set large and heavy for structure and plain for reading. No effects, no decorative faces.

Typefaces

Space Grotesk, Montserrat and JetBrains Mono are the faces every RSX site ships. All three are licensed under the SIL Open Font License 1.1, which permits self-hosting.

Display and headings

Space Grotesk

Built to keep running

Weights: 700 for headings; 500 for a statement line. 400 is loaded but rarely right.
Variable: --font-sg
Stack: var(--font-sg), var(--font-montserrat), ui-sans-serif, system-ui, sans-serif

Body text

Montserrat

One account across everything RSX runs.

Weights: 400 for text; 600 for a row header or an inline term. 500 and 700 sparingly.
Variable: --font-montserrat
Stack: var(--font-montserrat), ui-sans-serif, system-ui, sans-serif

Labels, data and code

JetBrains Mono

RSX-TOS-01 · v1.2

Weights: 400. 500 for a value that must stand out in a dense row.
Variable: --font-jetbrains
Stack: var(--font-jetbrains), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace

Hosting

Load the faces with next/font/google, which downloads them at build time and serves them from the site’s own origin: no request reaches Google when a page is viewed. Load only these three, and only the weights a site uses. A face that is not OFL or otherwise licensed for self-hosting is never added.

The marks are not type

The RSX textmark and the product textmarks are drawn outlines. Their letterforms are not an interface face and are never installed, embedded or imitated. In an interface the name is set in Space Grotesk as part of the lockup.

Roles

Every piece of text has one of these roles. Hierarchy comes from face, size and weight; colour only separates text from muted text.

Type roles: face, weight, size, line height, tracking, case and use
Role	Face	Weight	Size	Line height	Tracking	Case	Use
Statement	Space Grotesk	700	clamp(2.75rem, 9vw, 7rem)	0.88	−0.025em	Upper	One per editorial page: the overview, a 404.
Page title	Space Grotesk	700	clamp(2.25rem, 6vw, 4.5rem)	0.92	−0.025em	Upper	The h1 of a reference page.
Section heading	Space Grotesk	700	24px → 30px at 640px	1.2	−0.025em	Upper	h2.
Subheading	Space Grotesk	700	18px	1.4	−0.025em	Upper	h3, item titles in a list.
Statement line	Space Grotesk	500	20px → 24px	1.375	0	Sentence	A rule or supporting line under a heading.
Lead	Montserrat	400	15px → 16px	1.625	0	Sentence	The paragraph that opens a page or section.
Body	Montserrat	400	14px	1.625	0	Sentence	Running text. 13px in dense lists.
Caption	Montserrat	400	12px – 13px	1.625	0	Sentence	Notes, captions, help text.
Label	JetBrains Mono	400	10px – 11px	1.5	0.1em	Upper	Eyebrows, column heads, navigation, buttons.
Data	JetBrains Mono	400	11px – 12px	1.5	0	As written	References, versions, hosts, hex values.
Code	JetBrains Mono	400	0.85em inline, 13px block	1.6	0	As written	Code, tokens, paths.

Statement
Face
Space Grotesk
Weight
700
Size
clamp(2.75rem, 9vw, 7rem)
Line height
0.88
Tracking
−0.025em
Case
Upper
Use
One per editorial page: the overview, a 404.
Page title
Face
Space Grotesk
Weight
700
Size
clamp(2.25rem, 6vw, 4.5rem)
Line height
0.92
Tracking
−0.025em
Case
Upper
Use
The h1 of a reference page.
Section heading
Face
Space Grotesk
Weight
700
Size
24px → 30px at 640px
Line height
1.2
Tracking
−0.025em
Case
Upper
Use
h2.
Subheading
Face
Space Grotesk
Weight
700
Size
18px
Line height
1.4
Tracking
−0.025em
Case
Upper
Use
h3, item titles in a list.
Statement line
Face
Space Grotesk
Weight
500
Size
20px → 24px
Line height
1.375
Tracking
0
Case
Sentence
Use
A rule or supporting line under a heading.
Lead
Face
Montserrat
Weight
400
Size
15px → 16px
Line height
1.625
Tracking
0
Case
Sentence
Use
The paragraph that opens a page or section.
Body
Face
Montserrat
Weight
400
Size
14px
Line height
1.625
Tracking
0
Case
Sentence
Use
Running text. 13px in dense lists.
Caption
Face
Montserrat
Weight
400
Size
12px – 13px
Line height
1.625
Tracking
0
Case
Sentence
Use
Notes, captions, help text.
Label
Face
JetBrains Mono
Weight
400
Size
10px – 11px
Line height
1.5
Tracking
0.1em
Case
Upper
Use
Eyebrows, column heads, navigation, buttons.
Data
Face
JetBrains Mono
Weight
400
Size
11px – 12px
Line height
1.5
Tracking
0
Case
As written
Use
References, versions, hosts, hex values.
Code
Face
JetBrains Mono
Weight
400
Size
0.85em inline, 13px block
Line height
1.6
Tracking
0
Case
As written
Use
Code, tokens, paths.

Responsive scale

Set at the size this screen is showing now. The display sizes are fluid between a phone and a wide screen; text sizes step once, at 640px.

Statement

Deliberate.

Page title

Typography

Section heading

Language and fallback

Subheading

The marks are not type

Statement line

Every element has a job.

Lead

The documents that govern the RSX platform, published so they can be read, cited and checked.

Body

Upload a file and get a link that works everywhere: an image tag, a video element, a Discord message.

Caption

Applies to: anyone using the API, webhooks, SDKs, or RSX ID.

Label

RSX · Legal

Data

id.rsx.group · v1.2 · #ff4143

Typesetting

Set headings in uppercase Space Grotesk Bold with tight tracking and tight leading, and balance their lines.
Keep running text to 60–75 characters a line (max-w-2xl at body size).
Put a mono label above a heading to index it, and use mono for anything copied or compared: references, versions, hosts, values.
Write in British English (colour, licence, organisation), sentence case for text, and real typographic quotes and dashes.
Break a long heading by hand where the sense breaks, not where the width happens to fall.

Don't

Uppercase or letter-spaced running text. Uppercase is for headings and short labels.
Centred paragraphs. Text aligns left; centring is for a single short line at most.
Italic or underlined headings, or bold for emphasis inside a sentence when a better word would do.
Body text below 12px, or labels below 10px.
Red running text. Red is for labels, links and the current state.

RSX · CDN

Files,
served.

File hosting and sharing, 10 GB per account.

Permitted

Mono label, uppercase heading, plain lead. Hierarchy from face, size and weight.

Next-gen Files!

Revolutionising the future of storage.

Prohibited

Decorative face, centred text, shadow, colour for hierarchy and hype copy.

Language and fallback

RSX is operated from Poland, and its documents name Polish institutions. Every face must render Polish completely, in every role.

Space Grotesk

Zażółć gęślą jaźń · ŁÓDŹ · ŚLĄSK · GDAŃSK · Urząd Ochrony Danych Osobowych

Montserrat

Zażółć gęślą jaźń · ŁÓDŹ · ŚLĄSK · GDAŃSK · Urząd Ochrony Danych Osobowych

JetBrains Mono

Zażółć gęślą jaźń · ŁÓDŹ · ŚLĄSK · GDAŃSK · Urząd Ochrony Danych Osobowych

Load latin-ext, for every face

All three faces cover Polish, but only in their latin-ext subset. Load it with subsets: ["latin", "latin-ext"] on each face. With latin alone, ą, ę, ł, ń, ś, ź and ż are drawn from the fallback face instead, one letter at a time, in the middle of a word.

Fallback

Faces load with display: swap: text shows at once in the fallback and swaps when the face arrives. next/font generates a size-adjusted local fallback for each face, so the swap does not move the layout. The stacks above are what renders if the face fails to load entirely; the page must still read correctly in them.

Anti-patterns

Prohibited
Decorative and display faces
Script, novelty and display faces. RSX retired its last one with the old splash screen.
Prohibited
Effects on type
Shadows, glows, outlines, gradients, textures or 3D on any text.
Prohibited
A fourth face
No additional face for a single page, a product or a campaign.
Prohibited
Synthesised styles
Faux bold or faux italic from a weight that is not loaded. Load the weight or do without it.
Prohibited
Tracking body text
Letter-spacing is for uppercase labels. Body text is set at the face's own spacing.
Prohibited
Type as the logo
The name set in any font and presented as the RSX logo or a product logo.