Typography System

Tokens composite de tipografía como custom properties (font shorthand). Cada muestra renderiza con el token real y es verificable en DevTools.

Cómo consumir

Los tokens composite se aplican con la propiedad font (shorthand). También puedes componer manualmente con los primitivos de tamaño / peso / line-height.

<h1 style={{ font: 'var(--text-heading-large)' }}>Title</h1>
<p style={{ font: 'var(--text-regular-normal)' }}>Body</p>

Headings

Titles and headers with clear visual hierarchy (bold weight)

The quick brown fox

Heading XXLarge

56px

var(--text-heading-xxlarge)

Bold (700)

Hero sections, main page titles

The quick brown fox

Heading XLarge

48px

var(--text-heading-xlarge)

Bold (700)

Main section titles

The quick brown fox

Heading Large

40px

var(--text-heading-large)

Bold (700)

Subsection titles, dashboard metrics

The quick brown fox

Heading Medium

32px

var(--text-heading-medium)

Bold (700)

Large component titles

The quick brown fox

Heading Small

24px

var(--text-heading-small)

Bold (700)

Card titles, modal headers

The quick brown fox

Heading XSmall

20px

var(--text-heading-xsmall)

Bold (700)

Subtitles, form section labels

Large Text (20px)

Large body text for subtitles and emphasized content

The quick brown fox

Large Extrabold

20px

var(--text-large-extrabold)

Extrabold (700)

Strong emphasis at large size

The quick brown fox

Large Bold

20px

var(--text-large-bold)

Bold (700)

Bold subtitles

The quick brown fox

Large Semibold

20px

var(--text-large-semibold)

Semibold (500)

Sheet titles, dialog titles

The quick brown fox

Large Medium

20px

var(--text-large-medium)

Medium (500)

Emphasized body text

The quick brown fox

Large Normal

20px

var(--text-large-normal)

Normal (400)

Landing page descriptions

The quick brown fox

Large Light

20px

var(--text-large-light)

Light (300)

Subtle large text

Regular Text (16px)

Standard body text for main content

The quick brown fox

Regular Extrabold

16px

var(--text-regular-extrabold)

Extrabold (700)

Strong emphasis in body

The quick brown fox

Regular Bold

16px

var(--text-regular-bold)

Bold (700)

Bold body text

The quick brown fox

Regular Semibold

16px

var(--text-regular-semibold)

Semibold (500)

Card titles, emphasized content

The quick brown fox

Regular Medium

16px

var(--text-regular-medium)

Medium (500)

Table cell primary text, DataTable names

The quick brown fox

Regular Normal

16px

var(--text-regular-normal)

Normal (400)

Standard body text, paragraphs

The quick brown fox

Regular Light

16px

var(--text-regular-light)

Light (300)

Subtle body text

Tiny Text (12px)

Tiny text for badges, metadata, and minimal UI elements

The quick brown fox

Tiny Extrabold

12px

var(--text-tiny-extrabold)

Extrabold (700)

Strong micro-labels

The quick brown fox

Tiny Bold

12px

var(--text-tiny-bold)

Bold (700)

Bold badges

The quick brown fox

Tiny Semibold

12px

var(--text-tiny-semibold)

Semibold (500)

Section labels

The quick brown fox

Tiny Medium

12px

var(--text-tiny-medium)

Medium (500)

Badge text, tags

The quick brown fox

Tiny Normal

12px

var(--text-tiny-normal)

Normal (400)

Timestamps, footnotes, emails

The quick brown fox

Tiny Light

12px

var(--text-tiny-light)

Light (300)

Subtle metadata

Font sizes

--font-size-tiny12px

--font-size-regular16px

--font-size-large20px

--font-size-xl24px

--font-size-2xl32px

--font-size-3xl40px

--font-size-4xl48px

--font-size-5xl56px

Font weights

--font-weight-light300

--font-weight-normal400

--font-weight-medium500

--font-weight-semibold500 (Ubuntu has no 600)

--font-weight-bold700

--font-weight-extrabold700 (Ubuntu has no 800)

Line heights

--line-height-tight1.2

--line-height-snug1.3

--line-height-normal1.4

--line-height-relaxed1.5

--line-height-tiny-normal1.37

Ubuntu Font Specimen

Ubuntu Light (300)

Ubuntu Regular (400)

Ubuntu Medium (500)

Ubuntu Semibold (600)*

Ubuntu Bold (700)

* Ubuntu no tiene peso 600/800; los tokens semibold/extrabold renderizan como 500/700.

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

Documentation

Tokens definidos en src/styles/typography.css. Más detalles en docs/TYPOGRAPHY_GUIDELINES.md.