Typography

The Gaudi UI type scale, 13 text styles, each set with one class.

A type class sets size and line height. Add weight separately:

<h2 className="text-title-2 font-semibold">Billing</h2>
<p className="text-body">Manage your plan and invoices.</p>

How it works

Each style is a --text-{style} variable in @theme, used as text-{style}. Captions also set letter spacing.

styles/typography.css

@theme {
  --text-body: 0.875rem;
  --text-body--line-height: 1.25rem;

  --text-caption-1: 0.75rem;
  --text-caption-1--line-height: 1rem;
  --text-caption-1--letter-spacing: 0.0125em;
}

Type scale

PreviewStyleClassSizeLine heightTracking
Large TitleHero numbers.text-large-title4rem64px5rem80px—
Display 1Hero headings.text-display-13.5rem56px4.5rem72px—
Display 2Landing page headings.text-display-23rem48px4rem64px—
Display 3Large section headings.text-display-32.5rem40px3.375rem54px—
Display 4Page titles.text-display-42rem32px2.75rem44px—
Title 1Dialog and card headings.text-title-11.5rem24px2.125rem34px—
Title 2Section headings.text-title-21.25rem20px1.625rem26px—
Title 3Panel headings.text-title-31.125rem18px1.625rem26px—
HeadlineLead paragraphs.text-headline1rem16px1.375rem22px—
BodyDefault UI text.text-body0.875rem14px1.25rem20px—
Body 2Dense UI and tables.text-body-20.8125rem13px1.125rem18px—
Caption 1Helper text and timestamps.text-caption-10.75rem12px1rem16px0.0125em
Caption 2Fine print and chart labels.text-caption-20.6875rem11px0.9375rem15px0.018em

Font

The scale is set in Inter, the theme's --font-sans. See Theming.

Typography CSS

The complete file. gaudi-ui init writes it to styles/typography.css, and Installation shows how to import it.

styles/typography.css

@theme {
  --text-large-title: 4rem;
  --text-large-title--line-height: 5rem;

  --text-display-1: 3.5rem;
  --text-display-1--line-height: 4.5rem;

  --text-display-2: 3rem;
  --text-display-2--line-height: 4rem;

  --text-display-3: 2.5rem;
  --text-display-3--line-height: 3.375rem;

  --text-display-4: 2rem;
  --text-display-4--line-height: 2.75rem;

  --text-title-1: 1.5rem;
  --text-title-1--line-height: 2.125rem;

  --text-title-2: 1.25rem;
  --text-title-2--line-height: 1.625rem;

  --text-title-3: 1.125rem;
  --text-title-3--line-height: 1.625rem;

  --text-headline: 1rem;
  --text-headline--line-height: 1.375rem;

  --text-body: 0.875rem;
  --text-body--line-height: 1.25rem;

  --text-body-2: 0.8125rem;
  --text-body-2--line-height: 1.125rem;

  --text-caption-1: 0.75rem;
  --text-caption-1--line-height: 1rem;
  --text-caption-1--letter-spacing: 0.0125em;

  --text-caption-2: 0.6875rem;
  --text-caption-2--line-height: 0.9375rem;
  --text-caption-2--letter-spacing: 0.018em;
}