TYPOGRAPHY
Obsidian uses two typefaces in strict roles: JetBrains Mono for all labels, code, data, and interface chrome; Inter for body text and longer-form content. Both are loaded via Google Fonts with optical sizing enabled.
Typefaces
JetBrains Mono
Monospace -- Labels, code, data, navigation, badges
Inter
Sans-serif -- Body text, descriptions, long-form content
Scale
The type scale maps directly to Tailwind's default sizing utilities. Each step is shown with its class name and pixel equivalent.
Size Ramp
Tracking
Letter spacing is used aggressively in the Obsidian system. Wider tracking signals hierarchy and importance: labels use 0.15em, subtitles 0.3em--0.5em.
Letter Spacing
Text Effects
Specialized text treatments for emphasis, branding, and interactive feedback. These are applied sparingly to maintain impact.
Neon Text
Cyan glow for headings and interactive labels
Gradient Text
Animated cyan-to-purple gradient for hero titles
Drop Shadow Glow
Colored drop-shadow filter for text and icons
Rune Decode
Norse rune scramble animation that reveals text character by character