Typography
One typeface, Inter, does all the work. Hierarchy comes from size, weight and space, so the page reads calmly and the background can be loud.
- CSS
css/base.css- Tokens
--font-*, --text-*, --leading-*, --tracking-*
01 — Typeface
Inter
Every heading, label and paragraph is set in Inter. Code uses the system’s monospace font.
Principles
- Hierarchy comes from size, weight and space, never from a second typeface.
- One family, many voices: Inter at four weights covers display, headings, body and labels.
- Body copy is 16px with a 1.6 line height, and lines stop at 64 characters.
- Links carry a hairline underline that tightens on hover. Nothing else moves.
- Captions and metadata step down in size and color, not in family.
- Labels are small, uppercase and widely tracked, so they read as metadata at a glance.
Load the font
Add these lines to the <head>, before jewel.css.
02 — Type scale
Styles
Every text style, largest first. Sizes are fluid: the first number is a 360px phone, the second a 1280px screen.
Quick brown fox
The quick brown fox
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. Sphinx of black quartz, judge my vow.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
03 — Weights
Four weights
Bold is for the display size only. Headings are semibold; labels are medium.
Regular 400
Quiet type
Medium 500
Quiet type
Semibold 600
Quiet type
Bold 700
Quiet type
04 — Text colors
On glass and on solid
Four text colors, set with data-text or the --text-* tokens. The same names work on both surfaces: on a solid panel the muted gray steps down a little, because nothing shows through. See Panels and surfaces for when to use each surface.
Glass panel (default)
Default: the reading color.
Muted: captions and metadata.
Accent: links and emphasis.
Inverse on a light fill
Solid panel
Default: the reading color.
Muted: captions and metadata.
Accent: links and emphasis.
Inverse on a light fill
05 — Links and inline text
In running text
Links are the text color with a hairline underline; on hover the underline tightens and the color moves to the accent. .link-quiet hides the underline until hover, for wordmarks and lists of links.
Read the guide to tokens, or browse the component list. Link css/jewel.css, then press / to search. Use strong for the one phrase that matters, and emphasis sparingly.
06 — Usage
Use it for
- One
h1per page, then headings in order. If a heading needs to look smaller, keep the right level and add.h3or.h4. .ledefor the paragraph that introduces a page..labelfor metadata: dates, categories, numbered section heads..captionfor notes under figures, tables and forms.
Avoid
- A second typeface, or a weight outside 400 to 700.
- Color for emphasis. The accent is for links and focus, not for highlighting words.
- Uppercase paragraphs. Uppercase is for short labels only.
- Picking a heading level for its size. Screen readers use the levels to navigate.
07 — Tokens
| Token | Value | What it’s for |
|---|---|---|
--font-sans | Everything except code | |
--font-mono | Code, keys, samples | |
--weight-regular | Body | |
--weight-medium | Labels | |
--weight-semibold | Headings | |
--weight-bold | Display | |
--text-2xs | Micro badges only | |
--text-xs | Labels | |
--text-sm | Captions | |
--text-base | Body | |
--text-lg | Lede, h4 | |
--text-xl | h3 | |
--text-2xl | h2 | |
--text-3xl | h1 | |
--text-display | Display | |
--text-code | Monospace size | |
--leading-display | Display | |
--leading-tight | h1 | |
--leading-heading | h2 | |
--leading-snug | h3, h4 | |
--leading-label | Labels | |
--leading-compact | Lede, captions | |
--leading-body | Body | |
--tracking-display | Display, h1 | |
--tracking-heading | h2, h3 | |
--tracking-subheading | h4 | |
--tracking-body | Body | |
--tracking-label | Labels | |
--tracking-tag | Tags | |
--measure | Longest line of body text |