Typography
Open Sans carries everything: light for large headings, regular for reading, semibold for labels. Body text is 14px with a 1.6 line height, as on jsonresume.org.
In use
Overline, light title, muted lede, then body copy: the opening of every jsonresume.org page.
Getting started
Command Line Tool
We've built a CLI that runs on macOS, Linux and Windows. Use it to validate, export and serve your resume.
Install it globally with npm, then run it from the folder that holds your resume.json. Every theme on the theme gallery works with it.
import { Heading, Link, Stack, Text } from '@jsonresume/ui';
// A docs page opening: overline, light title, lede, body, link.
export default function TypographyComposition() {
return (
<Stack gap={3}>
<Text caps tone="muted">
Getting started
</Text>
<Heading level={2} size="title">
Command Line Tool
</Heading>
<Text size="md" tone="muted" measure>
We've built a CLI that runs on macOS, Linux and Windows. Use it to
validate, export and serve your resume.
</Text>
<Text measure>
Install it globally with npm, then run it from the folder that holds
your resume.json. Every theme on the{' '}
<Link href="#typography">theme gallery</Link> works with it.
</Text>
</Stack>
);
}Line length
Running text keeps a 72-character measure. Use the measure prop on Text, or Prose.
Do: measure
JSON Resume is a community driven open-source initiative to create a JSON-based standard for resumes. We believe the strengths of the JSON format make it a good fit for resumes: it is lightweight, easy to read, and easy to build tools for.
Don't: full width
JSON Resume is a community driven open-source initiative to create a JSON-based standard for resumes. We believe the strengths of the JSON format make it a good fit for resumes: it is lightweight, easy to read, and easy to build tools for.
Show code
import { Stack, Text } from '@jsonresume/ui';
const copy =
'JSON Resume is a community driven open-source initiative to create a JSON-based standard for resumes. We believe the strengths of the JSON format make it a good fit for resumes: it is lightweight, easy to read, and easy to build tools for.';
// Keep running text to about 72 characters per line. Wider lines make the
// eye lose its place when it returns to the start of the next line.
export default function TypographyMeasure() {
return (
<Stack gap={6}>
<Stack gap={1}>
<Text caps tone="muted">
Do: measure
</Text>
<Text size="md" measure>
{copy}
</Text>
</Stack>
<Stack gap={1}>
<Text caps tone="muted">
Don't: full width
</Text>
<Text size="md">{copy}</Text>
</Stack>
</Stack>
);
}Guidelines
Do
- Use light (300) only at 22px and up; it gets thin and faint below that.
- Write headings and labels in sentence case; CSS uppercases buttons.
- Use one h1 per page, and pick heading sizes with the size prop, not the level.
- Keep body text at 14px; step up to md (16px) for long reading.
Don’t
- Bold large headings.
- Set paragraphs in uppercase or letter-spaced type.
- Use the wordmark face (Ubuntu) for anything but the logo.
- Center long paragraphs.
Families
| Token | Stack | Use |
|---|---|---|
| font.family.sans | 'Open Sans' | Everything |
| font.family.wordmark | 'Ubuntu' | The JSON Resume wordmark only |
| font.family.mono | ui-monospace | Code, tokens, file names |
Heading sizes
Resumes as JSON
size="display" · 3.25rem · Light · Landing pagesResumes as JSON
size="title" · 2.5rem · Light · Page titles (h1)Resumes as JSON
size="section" · 1.75rem · Light · SectionsResumes as JSON
size="subsection" · 1.375rem · Regular · Sub-sectionsResumes as JSON
size="group" · 1.125rem · Semibold · Groups and card titlesResumes as JSON
size="label" · 1rem · Semibold · Small headingsType scale
Weights and line heights
| font.weight.light | Open Sans 300 |
| font.weight.regular | Open Sans 400 |
| font.weight.semibold | Open Sans 600 |
| font.weight.bold | Open Sans 700 |
| font.lineHeight.tight | 1.15 |
| font.lineHeight.snug | 1.35 |
| font.lineHeight.normal | 1.6 |
Letter-spaced uppercase (tracking.caps, 0.09em) is for buttons and short labels only.