Interface typography

1) Role of typography in the product

• speeds up scanning and reduces cognitive load,
• forms a hierarchy and helps navigate the state,
• increases conversion (CTA, forms) and reduces errors,
• makes the interface accessible and resistant to localization.

2) Basic parameters

Pin (body text): 16-18 px on desktop, 15-16 px on mobile.
Line-height: 1. 45–1. 6 for text, 1. 2–1. 35 for titles.
Line length (measure): 45-80 characters; in sidebars - 36-60.
Tracking: 0-1% for plain text; for capsules - + 2-4%.
Contrast (WCAG) -Plain text ≥ 4. 5:1, coarse/fatty ≥ 3:1.
Register: avoid permanent ALL CAPS; use for tags/chips, compensate for tracking.

3) Hierarchy and size scale

We recommend a modular approach: 8-pt grid + typographic scale.

• Display: 40/48 (LH 1. 15)
• H1: 32/40 (1. 25)
• H2: 24/32 (1. 25)
• H3: 20/28 (1. 3)
• H4: 18/26 (1. 4)
• Body/L: 18/28 (1. 55)
• Body/M: 16/26 (1. 55)
• Body/S: 14/22 (1. 5)
• Caption: 12/18 (1. 5)
• Mono/UI: 12–14/18–20

• Between neighboring levels - a noticeable step (at least 12-16%).
• The hierarchy is built by a combination of size, weight, leading, color (taking into account contrast) and distances to neighboring blocks.

4) Cap height, baseline and optics

Align the elements to the cap height of the headers (convenient with icons).
Maintain a 4/8-pt text baseline - even rhythms make it easier to read.
Optical indents: the headings above the block are larger than below it (for example, + 4-8 px above).

5) Styles and variable fonts

Minimum set: Regular, Medium, SemiBold (Bold optional).
Do not use Ultra-Light/Thin in UI.

• Body: 420-470 (optically flatter than 400).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• If the size decreases, slightly increase the weight (compensation).
• Disable decorative ligatures in UI numbers; hold standard Cyrillic/Latin ligatures.

6) Numbers, tables and dates

Include tabular figures for amounts, coefficients, timers, ratings.
+/ − signs are always visible and with sufficient contrast; highlight negative values ​ ​ not only in color (icon/arrow/bold).
For monetary values, use a narrow space as a thin bit separator (or local format).
In tables, align to the decimal point; for mono columns - monospaced font.
The axis signature graphs ≥ 12 px (mobile) and ≥ 13-14 px (desktop), LH 1. 3; legends ≥ 4. 5:1 to the background.

7) Forms, inputs, messages

Labels 12-14 px, LH 1. 3–1. 4, regular or medium.
Placeholder should not be "gray air" - the goal is 3:1 to the background, visually distinguishable from the text.
Errors/success/help text 12-14 px; do not rely only on color (icon/text).

8) Dark/Light Themes

In a dark topic, avoid # FFF on # 000: raise the background to L≈0. 14–0. 18, and lower the text to L≈0. 9 - less glare.
Leading in dark can be + 0. 05 above for comfort.
Links/accents in dark - reduce saturation and increase lightness by 0. 02–0. 04.

9) Localization and multilingualism

Choose families with full Cyrillic/Latin/Greek, accent mark and currency support.
RTL: mirror icons/alignments, but not numbers and Latin; Test transfers.
Auto transfers ('hyphens: auto') to include only in long content zones; in UI buttons - prohibit transfer.
For Turkish/Azerbaijani, check the "İ/ı" forms.
For Georgian and Thai, raise the base pin by 1 px (style features).

10) Availability (A11y)

Text contrast: see § 2.
Focus styles - visible without color: underline, border, shadow, offset.
The font size is systemically scaled (OS text size support).
Do not encode meaning only through color/weight - add explicit captions and icons.

11) Font loading and performance

Objectives: to minimize blockages, provide predictable FOUT and stable CLS.

Subsets: Latin, Cyrillic, numbers/symbols - individual files.
Formats: 'woff2' (main), 'woff' as fallback.
'font-display: swap '(or'optional' for secondary families).

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

Variable font instead of 3-4 statics - often more profitable in weight.
Budget: ≤ 150-200 KB in total for the critical path (after gzip/brotli).
Render: Avoid multiple shadows/masks on text; use system effects sparingly.

12) Typography tokens (design system)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) Layout and rhythm

8-pt vertical module; distance between paragraphs = 1 × base step.
Lists-The indentation of the marker is aligned with the baseline of the text.
Buttons and fields - Heights are multiples of the baseline grid line (for example, 40/48/56 px).

14) Specificity of iGaming (workshop)

Odds/odds, balances, timers - use tabular numbers, monospaced in critical columns.

Leaders/ratings: leveling by category, unified currency format, explicit "↑/↓."

Critical notifications (18 +, limits, risks) - minimum AAA in contrast, do not use ALL CAPS.
Promo banners: Text only on contrast-controlled slips/overlays.

15) Anti-patterns

Light/Thin on small pins.
Gray text on a colored background without contrast checking.

Two or more headsets "for beauty."

Long lines (> 90 characters) and dense line-height <1. 35.
Proportional width numbers in tables/" jumping "sums.
Push transfers in buttons/labels.

16) Review checklist

Readability

• Bodysuits 16-18 px; LH ≥ 1. 45.
• String length is 45-80 characters.

Hierarchy

• Scale in increments ≥ 12%; indents consistent with grid.

Numbers/Tables

• Tabular-nums for sums/coefficients; decimal alignment.

Availability

• WCAG contrast achieved; focus styles are visible without color.

Performance

• Subset/woff2; `font-display: swap`; budget ≤ 200 KB.

Localization

• Cyrillic/Latin/RTL support; hyphenation/diacritics checked.

17) A/B and metrics

Test: Body ± 1 px pin, heading scale pitch, CTA weight, leading.
Measure: read time, scroll depth, CTR CTA, form errors, CLS (text stability).

Brief Summary

Typography is the skeleton of the interface. Set a predictable scale, keep contrast and rhythm, use variable fonts and tabular numbers, optimize loading. Then the UI will be read quickly, work stably and scale to themes and languages.