Typography
Aa
Typography is the voice of our interface, speaking in whispers and declarations. Choose fonts that resonate with purpose, for they are the bridge between silence and understanding.— Oracle Pythonica
Inter
Primary Font
font-sans
Normal 400
Medium 500
Semibold 600
Bold 700
Sample Text:
The quick brown fox jumps over the lazy dog.
Used For:
- Body text
- Interface elements
- General content
JetBrains Mono
Technical Font
font-mono
Normal 400
Medium 500
Bold 700
Sample Text:
const hello = “world”;
Used For:
- Code snippets
- Technical content
- Headings (when appropriate)
Implementation Guide
1. Google Fonts Link
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
2. CSS Variables
/* Font Variables */
:root {
--font-inter: 'Inter', system-ui, sans-serif;
--font-jetbrains: 'JetBrains Mono', monospace;
}3. CSS Usage
/* Font Usage */
.body-text {
font-family: var(--font-inter);
}
.code-text {
font-family: var(--font-jetbrains);
}4. Tailwind Configuration
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
},
},
}5. Tailwind Usage
<!-- Tailwind Usage --> <p class="font-sans">Body text using Inter</p> <code class="font-mono">Code using JetBrains Mono</code>