Typography
Complete typography system for the Psilobase including type scales, font weights, line heights, and text styles for consistent content presentation.
Type Scale
Harmonious font size progression based on a modular scale.
Font Weights
Available font weights for emphasis and hierarchy.
Line Heights
Line height variations for different content types and reading comfort.
Text Styles
Pre-defined text styles for common content patterns.
Font Stacks
System font stacks for optimal performance and cross-platform consistency.
Body Text
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
System font stack provides native look on each platform with excellent readability.
Monospace (Code)
font-family: 'Courier New', Courier, monospace;
Monospace font for code blocks, technical content, and data tables.
Font Pairing
Examples of combining different weights and sizes for hierarchy.
Main Heading
Supporting text provides additional context with lighter weight and smaller size.
Overline Label
Section Title
Usage Guidelines
Headings
- H1 - Page title, one per page (36-48px)
- H2 - Major section headings (30px)
- H3 - Subsection headings (24px)
- H4 - Minor headings (20px)
- H5-H6 - Rare, use sparingly (16-18px)
Body Text
- Base size: 16px (1rem) - optimal for readability
- Line length: 45-75 characters per line
- Line height: 1.5-1.75 for body content
- Paragraph spacing: 1em between paragraphs
Accessibility
- Minimum font size: 14px for body text
- Sufficient contrast: 4.5:1 for normal text, 3:1 for large text
- Responsive sizing: Use rem units for scalability
- Clear hierarchy: Visual distinction between heading levels
CSS Variables
Use CSS custom properties for consistent typography:
/* Font Sizes */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
/* Font Weights */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Line Heights */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
--line-height-loose: 2;
/* Usage Example */
.custom-heading {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
}
Responsive Typography
Font sizes adjust for different screen sizes:
/* Base (Mobile) */
h1 { font-size: 2rem; }
body { font-size: 1rem; }
/* Tablet (768px+) */
@media (min-width: 768px) {
h1 { font-size: 2.5rem; }
body { font-size: 1.0625rem; }
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
h1 { font-size: 3rem; }
body { font-size: 1.125rem; }
}