Typography

How it works

Each text style is a font shorthand: weight, size, line height and family come together. So a heading’s size and line height cannot drift apart. In Tailwind each style is a type-* utility, such as type-heading-lg or type-body-md.

The interface family is Inter; fixed-width values such as code and account numbers use JetBrains Mono. If the brand guide picks another family, only the token changes. Body text turns on Inter’s cv11 and ss01 features: a single-storey “a” and open digits.

Large headings take tighter tracking (letter-spacing-* tokens): display and heading-xl −0.02 em, heading-lg −0.015 em, heading-md and heading-sm −0.01 em. The type-* utilities add the tracking themselves. Heading lines are balanced (text-wrap: balance) and paragraphs break so the last line does not hold a single word (text-wrap: pretty). heading-sm is medium weight (500); title-sm has a 20 px line height so Turkish descenders (ğ, ş, ç) are not clipped.

Scale

The value column reads size/line height · weight. Line heights are multiples of 4, so text sits on the spacing grid.

Token	Value	Preview
--bigbang-text-display Dashboard summary figures, welcome screen	40/48 · 600	Payment complete
--bigbang-text-heading-xl Page title	32/40 · 600	Payment complete
--bigbang-text-heading-lg Section heading	24/32 · 600	Payment complete
--bigbang-text-heading-md Card and panel heading	20/28 · 600	Payment complete
--bigbang-text-heading-sm Subheading, dialog title	16/24 · 500	Payment complete
--bigbang-text-title-sm	16/20 · 500	Payment complete
--bigbang-text-body-lg Long-form reading text	16/24 · 400	Payment complete
--bigbang-text-body-md Default interface text, table cells	14/20 · 400	Payment complete
--bigbang-text-body-sm Help text, timestamps	12/16 · 400	Payment complete
--bigbang-text-label-lg Form section legends	16/24 · 500	Payment complete
--bigbang-text-label-md Button and form labels	14/20 · 500	Payment complete
--bigbang-text-label-sm Badges, table headers	12/16 · 500	Payment complete
--bigbang-text-code-md IBAN, transaction number, code	14/20 · 400	Payment complete

Hierarchy

A screen has one heading-xl: the page name. Sections use heading-lg, cards heading-md. Choose the heading level by document structure, not by looks; screen readers move between headings in that order.

Figures

For numbers read in columns, such as amounts and dates, use tabular-nums: digits take equal width and line up. Amounts are right-aligned and written with the <Money> component as ₺1,250.00 (I18N-10). Format rules are on the Formatting and localisation page.

Line length

A line of body text is 45-75 characters; give long text blocks max-width: 65ch. Table cells, labels and short helper text are exempt.

Wrapping and truncation

• When text does not fit, it wraps. Truncation is done only with the Truncate component, and the full text stays in the tooltip and the accessible name (I18N-16).
• Amounts, reference numbers, dates, legal text and error text are never truncated.
• Text boxes never get a fixed height; text is not lost when line height and letter spacing grow (WCAG 1.4.12).
• Use overflow-wrap: anywhere for long words and addresses.

Turkish characters

• The font covers Ç Ğ İ ı Ö Ş Ü and the ₺ sign. A new brand font without these characters is not accepted (I18N-23).
• Upper case is done with toLocaleUpperCase('tr-TR'); CSS text-transform: uppercase is not used.
• Until the font loads, a fallback font with close metrics shows; line height is a number, never normal (FID-06).

Guidelines

Use the style name

type-heading-md

DoThe style carries size, line height and weight together.

text-[19px] leading-[26px] font-bold

Don'tValues set one by one drift apart over time.

Align amounts

1,250.00 TRY18,400.50 TRY311.10 TRY

DoEqual-width digits, right-aligned, put place values under each other.

1,250.00 TRY18,400.50 TRY311.10 TRY

Don'tLeft-aligned proportional digits make amounts hard to compare.