Typography

Consistency in typography helps users navigate content with ease. Always use hierarchy to guide attention and improve readability.

Our typography system is built around a set of predefined text styles that provide consistent visual hierarchy and readability across the application. The Text component is the primary way to implement these typographic styles.

Text Variants

Our typography system is organized into three main categories: Headings, Body text, and Captions. Each category serves different purposes in the UI hierarchy.

Heading Variants

Headings establish the information hierarchy and provide structure to content.

Body Variants

Body text is used for the main content and supports both regular and strong emphasis.

Caption Variants

Captions are used for auxiliary information, labels, and metadata.

Text Colors

Text colors help establish hierarchy, provide emphasis, and communicate status or meaning. The default color is foreground-2.

Text Alignment

Text can be aligned to match different design requirements and content layouts.

Text Wrapping

Control how text wraps and flows within its container.

Text Truncation

When space is limited, text can be truncated with an ellipsis.

Implementation

The typography system is primarily implemented through the Text component:

import { Text } from '@harnessio/ui/components'

// Basic usage
<Text>Default text with body-normal variant</Text>

// With variants
<Text variant="heading-section">Section Heading</Text> // Maps to <h2>
<Text variant="body-strong">Important text with stronger emphasis</Text>

// With colors
<Text color="foreground-1">High-contrast text</Text>
<Text color="success">Success message</Text>

// With custom HTML element
<Text variant="heading-hero" as="h2">Hero heading as H2</Text> //  <h1> => <h2>
<Text<'time'> as="time" dateTime="2025-07-07">July 7</Text>

// With truncation
<Text truncate>This text will be truncated with an ellipsis if it overflows</Text>

// With text wrapping options
<Text wrap="balance">This text will be balanced for better readability</Text>

Best Practices

1. Maintain Hierarchy: Use the appropriate heading levels to establish clear content hierarchy.

2. Readability First: Choose variants and colors that optimize readability. Avoid using low-contrast combinations.

3. Semantic HTML: The Text component automatically maps variants to semantic HTML elements, but you can override with the as prop when needed.

4. 🚨 Consistent Usage: Use the predefined text variants consistently rather than custom styling to ensure UI consistency.