Typography

The Catalyst UI library uses a consistent typography system to ensure readability and visual hierarchy across all applications. These default styles establish the foundation for clear communication in the interface.

To maintain consistency across Catalyst applications, these styles should not be overwritten without careful consideration.

Font Family

Catalyst UI uses the Inter font family, a clean and modern sans-serif typeface designed for excellent readability in user interfaces.

Type Scale

The typography system follows a structured scale for different text elements, ensuring proper visual hierarchy.

Base Styling

body {
    color: var(--color-grey-900);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

a, a:visited, a:focus, a:hover {
    color: inherit;
    font-size: inherit;
    text-decoration: none;
}

p {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 30px;
    line-height: 36px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

h3 {
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

h4 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

h5 {
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

h6 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

Typography Usage Guidelines

Headings

• h2: Use for main page titles and major section headings
• h3: Use for section subheadings and primary content divisions
• h4: Use for subsection titles and content groupings
• h5: Use for minor section headers and highlighted content
• h6: Use for the smallest heading level, typically for small widget titles

Body Text

• Standard body text uses the default 14px size for optimal readability
• Maintain line height proportions for comfortable reading across different screen sizes