@umbra-ui/typography

Typography components and utilities for Umbra UI, based on Apple's text styles for Sonoma with Inter and JetBrains Mono font support.

Installation

This package is part of the Umbra UI monorepo and is automatically available when using @umbra-ui/core.

Font Support

This package includes embedded font files for optimal typography:

• Inter Variable Font - Modern, highly legible sans-serif font for UI text
• JetBrains Mono - Monospace font optimized for code and technical content

The fonts are automatically loaded when you import the typography CSS.

Usage

CSS Classes (Recommended)

Import the CSS file to get all typography classes and font loading:

import "@umbra-ui/typography/typography.css";

Then use the CSS classes in your HTML:

<!-- Regular typography with Inter font -->
<h1 class="largeTitle">Large Title</h1>
<h2 class="title1">Title 1</h2>
<h3 class="title2">Title 2</h3>
<h4 class="title3">Title 3</h4>
<p class="headline">Headline Text</p>
<p class="body">Body text for regular content</p>
<p class="callout">Callout text</p>
<p class="subheadline">Subheadline text</p>
<p class="footnote">Footnote text</p>
<p class="caption">Caption text</p>

<!-- Monospace typography with JetBrains Mono -->
<code class="body-mono">const example = "code";</code>
<pre class="caption-mono">console.log("monospace text");</pre>
<p class="headline-mono">Monospace Headline</p>

TypeScript Scale

For programmatic access to typography values:

import {
  defaultTypographyScale,
  monospaceTypographyScale,
  TypographyVariantName,
} from "@umbra-ui/typography";

// Use the default typography scale (Inter font)
const headlineStyles = defaultTypographyScale.headline;

// Use the monospace typography scale (JetBrains Mono font)
const codeStyles = monospaceTypographyScale.body;

// Type-safe typography variant names
const variant: TypographyVariantName = "headline";

API

CSS Classes

Regular Typography (Inter Font)

• .largeTitle - Large title text (24px, bold)
• .title1 - Title 1 text (20px, semibold)
• .title2 - Title 2 text (16px, semibold)
• .title3 - Title 3 text (14px, medium)
• .headline - Headline text (13px, semibold)
• .body - Body text (13px, regular)
• .callout - Callout text (12px, regular)
• .subheadline - Subheadline text (11px, regular)
• .footnote - Footnote text (11px, regular)
• .caption - Caption text (11px, regular)

Monospace Typography (JetBrains Mono)

• .largeTitle-mono - Large title text (24px, semibold)
• .title1-mono - Title 1 text (20px, medium)
• .title2-mono - Title 2 text (16px, medium)
• .title3-mono - Title 3 text (14px, medium)
• .headline-mono - Headline text (13px, medium)
• .body-mono - Body text (13px, regular)
• .callout-mono - Callout text (12px, regular)
• .subheadline-mono - Subheadline text (11px, regular)
• .footnote-mono - Footnote text (11px, regular)
• .caption-mono - Caption text (11px, regular)

Font Weight Utilities

• .font-thin - Thin weight (100)
• .font-light - Light weight (300)
• .font-regular - Regular weight (400)
• .font-medium - Medium weight (500)
• .font-semibold - Semibold weight (600)
• .font-bold - Bold weight (700)
• .font-black - Black weight (900)

Text Color Utilities

• .text-primary - Primary text color
• .text-secondary - Secondary text color
• .text-tertiary - Tertiary text color
• .text-disabled - Disabled text color

Text Alignment Utilities

• .text-left - Left alignment
• .text-center - Center alignment
• .text-right - Right alignment
• .text-justify - Justified alignment

TypeScript Types

• TypographyVariant: Interface for individual typography variants
• TypographyScale: Interface for the complete typography scale
• TypographyVariantName: Union type of all available variant names

Exports

• defaultTypographyScale: Typography scale object with CSS custom properties
• monospaceTypographyScale: Monospace typography scale object
• All type definitions for TypeScript support
• CSS file with all typography classes and font loading

CSS Custom Properties

The typography system uses CSS custom properties based on a base font size of 13px:

:root {
  --base-font-size: 13px;

  /* Title hierarchy - using perfect fourth scale (1.333) */
  --large-title: calc(1.846 * var(--base-font-size)); /* 24px */
  --title1: calc(1.538 * var(--base-font-size)); /* 20px */
  --title2: calc(1.231 * var(--base-font-size)); /* 16px */
  --title3: calc(1.077 * var(--base-font-size)); /* 14px */

  /* Body text styles */
  --headline: var(--base-font-size); /* 13px */
  --body: var(--base-font-size); /* 13px */
  --callout: calc(0.923 * var(--base-font-size)); /* 12px */
  --subheadline: calc(0.846 * var(--base-font-size)); /* 11px */

  /* Small text styles */
  --footnote: calc(0.846 * var(--base-font-size)); /* 11px */
  --caption: calc(0.846 * var(--base-font-size)); /* 11px */

  /* Font weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
}

Font Family

Regular Typography (Inter)

The typography system uses Inter variable font with system font fallbacks:

font-family: "Inter var", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
  "Helvetica Neue", Helvetica, Arial, sans-serif;

Monospace Typography (JetBrains Mono)

The monospace typography uses JetBrains Mono with system monospace fallbacks:

font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
  "Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
  "Liberation Mono", "Courier New", monospace;

Font Features

Inter Variable Font

• Variable font support - Smooth weight interpolation from 100-900
• Optical sizing - Automatically adjusts for different text sizes
• OpenType features - Enhanced ligatures and contextual alternates
• Optimized for screens - Designed specifically for digital interfaces

JetBrains Mono

• Variable font support - Smooth weight interpolation from 100-800
• Programming ligatures - Enhanced readability for code
• Zero slashed - Distinguishes between 0 and O
• Optimized for coding - Designed specifically for developers

Benefits of Embedded Fonts

• Consistent appearance - Same fonts across all platforms
• Better typography - Optimized fonts for specific use cases
• Variable font support - Smooth weight interpolation
• Performance optimized - Fonts are included in the package
• No external dependencies - Self-contained typography system

Dark Mode Support

The typography system automatically adapts to dark mode:

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: rgba(255, 255, 255, 0.92);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --text-disabled: rgba(255, 255, 255, 0.3);
    --background: #0a0a0a;
    --surface: #1a1a1a;
  }
}

Manual dark mode toggle is also supported via .dark or .dark-theme classes.

Use Cases for Monospace Typography

• Code snippets - Inline code and code blocks
• Data tables - Aligned columns and data display
• Terminal output - Command line interfaces
• Documentation - Technical specifications and examples
• Logs and debugging - Structured text output

Typography Scale

The typography scale includes:

• Headings: largeTitle, title1, title2, title3 with decreasing font sizes and appropriate weights
• Body Text: headline, body, callout for main content
• Supporting Text: subheadline, footnote, caption for secondary information

Each variant includes:

• fontSize: CSS font-size value
• fontWeight: CSS font-weight value
• lineHeight: CSS line-height value
• letterSpacing: Optional CSS letter-spacing value
• fontFamily: CSS font-family value