Text Styles

#Headings

One scale for every title. The large steps are expressive (tight tracking + leading) and fluid — heading.lg, heading.xl, and heading.2xl use a clamp() generated from the type scale, so they scale between 360px and 1280px viewports. The small steps (heading.xs–heading.3xs) are compact semibold headers for cards, banners, and dense components.

#Body

#Labels

#Numeric

Tabular figures for currency, counts, percentages, and KPIs. font-variant-numeric: tabular-nums keeps digits aligned and stops them jittering as values update, and lining-nums pins them to cap height in case the face ships oldstyle numerals by default.

numeric.xs is the small end of the set — body-sized figures that sit inline with UI text (table cells, pagination counts, timers, progress readouts) rather than headlining a card.

#Control

Per-size typography for interactive labels (buttons, inputs, badges). These mirror the sizing pattern’s font scale and carry no weight of their own — each control keeps its own.

#Special

#Usage

import { css } from "@pindoba/styled-system/css";

<h1 className={css({ textStyle: "heading.2xl" })}>Hero Heading</h1>
<h2 className={css({ textStyle: "heading.md" })}>Section Title</h2>
<p className={css({ textStyle: "body.md" })}>Paragraph text</p>
<strong className={css({ textStyle: "numeric.lg" })}>R$ 12,840.55</strong>
<label className={css({ textStyle: "label.md" })}>Form Label</label>
<code className={css({ textStyle: "code" })}>npm install</code>

<h1
  className={css({
    textStyle: { base: "heading.md", md: "heading.lg", lg: "heading.2xl" },
  })}
>
  Responsive heading
</h1>

#Best Practices

• Use textStyle instead of setting fontSize, fontWeight, and lineHeight individually
• Maintain hierarchy: heading > body > label > special
• Reach for numeric.* for any prominent figure (currency, stats, counts) so digits stay tabular
• The large headings are fluid out of the box; only reach for usage-site responsive steps when you need discrete jumps