Fidus logoFidus Design System

Typography

Typography establishes hierarchy and improves readability across the Fidus interface. Our type system uses Inter as the primary typeface for its excellent legibility and modern aesthetic.

Typeface

We use Inter for all interface text. Inter is a carefully crafted typeface designed for computer screens, featuring excellent legibility at small sizes and a modern, neutral appearance.

Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Type Scale

Our type scale provides a consistent range of font sizes for different levels of hierarchy in the interface.

--font-size-5xl
The quick brown fox
5XL
--font-size-4xl
The quick brown fox
4XL
--font-size-3xl
The quick brown fox jumps
3XL
--font-size-2xl
The quick brown fox jumps over
2XL
--font-size-xl
The quick brown fox jumps over the lazy dog
XL
--font-size-lg
The quick brown fox jumps over the lazy dog
LG
--font-size-md
The quick brown fox jumps over the lazy dog. This is the base font size used for body text.
MD (Base)
--font-size-sm
The quick brown fox jumps over the lazy dog. This size is used for secondary text and captions.
SM
--font-size-xs
The quick brown fox jumps over the lazy dog. This size is used for helper text and footnotes.
XS

Font Weights

Inter supports a range of weights. We primarily use three weights in our interface:

Regular (400) - var(--font-weight-normal)
Used for body text and most interface elements
Medium (500) - var(--font-weight-medium)
Used for emphasized text and active states
Bold (700) - var(--font-weight-bold)
Used for headings and strong emphasis

Line Height

Line height affects readability and vertical rhythm. We use three line heights optimized for different use cases:

Tight (1.25) - var(--line-height-tight)
Used for headings and display text where space is limited. The quick brown fox jumps over the lazy dog.
Normal (1.5) - var(--line-height-normal)
Used for body text and most interface elements. Provides comfortable reading. The quick brown fox jumps over the lazy dog.
Relaxed (1.75) - var(--line-height-relaxed)
Used for long-form content where maximum readability is needed. The quick brown fox jumps over the lazy dog.

Usage Guidelines

Hierarchy

  • •Use larger sizes (2XL-5XL) for page titles and major headings
  • •Use XL-LG for section headings
  • •Use MD (base) for body text
  • •Use SM-XS for secondary information and captions

Readability

  • •Keep line length between 45-75 characters for optimal readability
  • •Use normal or relaxed line height for body text
  • •Ensure sufficient contrast between text and background (4.5:1 minimum)
  • •Avoid using all caps for long passages

Accessibility

  • •Body text should be at least 16px (1rem) for comfortable reading
  • •Use font weight to establish hierarchy, not just size
  • •Ensure text can be resized up to 200% without loss of functionality
  • •Avoid using italics for long passages as they reduce readability