Typography
The typography system for the Archimede Design System.
Typography Philosophy
Our typography system is designed to create clear hierarchies, organize information, and guide users through the interface. We use a limited set of type sizes and weights to maintain consistency and establish a clear visual hierarchy.
Font Families
Archimede uses two font families: Geist Sans for general UI text and Geist Mono for code and technical content.
Geist Sans
var(--font-geist-sans)
Regular
400
The quick brown fox jumps over the lazy dog
Medium
500
The quick brown fox jumps over the lazy dog
Bold
700
The quick brown fox jumps over the lazy dog
Geist Mono
var(--font-geist-mono)
Regular
400
const greeting = 'Hello, world!';
Medium
500
const greeting = 'Hello, world!';
Bold
700
const greeting = 'Hello, world!';
Type Scale
Our type scale is designed to provide a harmonious progression of sizes that work well together.
Display (48px / 3rem)
Display Heading
H1 (36px / 2.25rem)
Heading 1
H2 (30px / 1.875rem)
Heading 2
H3 (24px / 1.5rem)
Heading 3
H4 (20px / 1.25rem)
Heading 4
Body (16px / 1rem)
Body text is used for the main content of the page. It should be easy to read and have good contrast.
Small (14px / 0.875rem)
Small text is used for secondary information, captions, and helper text.
XS (12px / 0.75rem)
Extra small text is used for legal text, footnotes, and other tertiary information.
Usage
Typography is implemented using Tailwind CSS classes. Here's how to use them:
Heading 1
Heading 2
Heading 3
This is a paragraph of body text.
This is small text for secondary information.
Example
Accessibility Guidelines
When using typography, ensure that:
- Text is large enough to be legible (minimum 16px for body text)
- Line height is sufficient for readability (1.5 times the font size is a good rule of thumb)
- There is enough contrast between text and background
- Headings are used to create a clear document structure