Typography
Typography creates clear visual hierarchy and ensures readability across all Kaharagian government websites. We use Noto Sans as our primary typeface.
Font Family
Noto Sans is chosen for its excellent readability, wide language support, and availability as a free, open-source font. It works well for both headings and body text. See the Fonts page for downloads, installation guidance, and the full Noto font family.
--font-heading: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', 'Consolas', monospace;Heading Styles
Headings use a responsive scale that increases at larger breakpoints. All headings use bold weight (700) for strong visual hierarchy.
Heading hierarchy guidance
H1 should only be used within hero sections or landing page banners. For standard content pages, use H2 as the page title and H3-H6 for subsections. This ensures consistent visual hierarchy across government services.
H1 - Hero sections only (36px mobile → 48px desktop)
The quick brown fox jumps
H2 - Page titles (28px mobile → 36px desktop)
The quick brown fox jumps over
H3 - Section headings (20px mobile → 28px desktop)
The quick brown fox jumps over the lazy dog
H4 - Subsection headings (20px mobile → 24px desktop)
The quick brown fox jumps over the lazy dog
H5 - Small headings (18px)
The quick brown fox jumps over the lazy dog
H6 - Smallest headings (16px)
The quick brown fox jumps over the lazy dog
Body Text
Lead text (20px) - Use for introductory paragraphs
This is lead paragraph text. Use it for introductory content at the top of pages or sections. It's slightly larger than body text to create visual hierarchy.
Body text (18px) - Default paragraph text
This is standard body text at 18px. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!
Small text (16px) - Secondary information
This is small text at 16px. Use for captions, helper text, or secondary information.
Extra small text (14px) - Labels and metadata
This is extra small text at 14px. Use sparingly for labels, timestamps, or metadata.
Font Weights
Regular (400) - Default body text weight
Medium (500) - Slightly emphasised text
Semibold (600) - Buttons and labels
Bold (700) - Headings and strong emphasis
Line Heights
- Tight (1.25) - Large headings (H1, H2)
- Normal (1.5) - Body text and smaller headings
- Relaxed (1.6) - Lists and content with more breathing room
CSS Variables
/* Text Scale */
--text-xs: 0.875rem; /* 14px */
--text-sm: 1rem; /* 16px */
--text-base: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
/* Heading Scale (mobile) */
--heading-2xs: 1rem; /* 16px - h6 */
--heading-xs: 1.125rem; /* 18px - h5 */
--heading-sm: 1.25rem; /* 20px - h4 subsections */
--heading-md: 1.25rem; /* 20px - h3 sections */
--heading-lg: 1.75rem; /* 28px - h2 page titles */
--heading-xl: 2.25rem; /* 36px - h1 hero only */
/* Font Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;