Typography

Font families, sizes, weights, and line heights as design tokens.

Overview

Byteion's typography system is designed for dense product interfaces such as SaaS dashboards, admin panels, forms, tables, settings pages, ERP/POS screens, ecommerce back offices, internal tools, starter kits, and documentation. The goal is readable, consistent, compact dashboard typography balanced with comfortable long-form reading.

Inter as the primary UI font
a 7-step type scale
3 core font weights
token-paired line heights

Font family

Inter is the default sans-serif UI font, with system fonts acting as fallbacks for initial loading states and system integrations.

// packages/tokens/typography.js
fontFamily: {
  sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'sans-serif'],
}

Production apps may load Inter from Google Fonts, rsms.me, local files, or self-hosted assets depending on performance and privacy needs.

Type scale

Byteion relies on a 7-step type scale to establish hierarchical consistency across all application UI states. Each step is paired with its baseline use cases and practical product layouts.

Token	Size	Line height	Use case	Product examples
xs	0.75rem (12px)	1rem	badges, captions, timestamps	table metadata, chart legends, micro-labels
sm	0.875rem (14px)	1.25rem	form labels, helper text, nav items	secondary table cells, sub-navigation links
base	1rem (16px)	1.5rem	body text, input text	paragraph text, text area values
lg	1.125rem (18px)	1.75rem	lead text, empty-state copy	card intro text, feature descriptions
xl	1.25rem (20px)	1.75rem	card titles, panel headings	compact section titles, sidebar headings
2xl	1.5rem (24px)	2rem	dashboard section headings	settings page headings, wizard subheadings
3xl	1.875rem (30px)	2.25rem	page titles, docs page headers	analytics dashboard titles, system status titles

Heading hierarchy

When structuring pages, prioritize semantic HTML order for accessibility. Heading levels (H1 through H6) should reflect the document structure, not visual styles alone. Pair these levels with appropriate type scale tokens to match density goals:

H1 (Page titles): Use exactly one H1 per page, typically styled with text-3xl font-bold.
H2 (Major sections): Use H2 for major sections, typically styled with text-2xl font-semibold.
H3 (Cards and panels): Use H3 for cards and panels, typically styled with text-xl or text-lg font-semibold.
H4–H6 (Nested groups): Use H4–H6 for nested groups, typically styled with text-base or text-sm font-semibold.

Do not choose heading tags only for visual size. Preserve semantic HTML order. If a section requires H2 semantics but needs a smaller size, use the appropriate Tailwind utility classes (e.g., <h2 class="text-lg font-semibold">).

UI text patterns

Common interface patterns should follow standardized, semantic combinations. Below are the recommended default styling choices for building form controls, tables, and actions:

Pattern	Utility classes	Recommended semantics
Form label	text-sm font-medium text-foreground	`<label>` tags linked to input IDs
Helper text	text-sm text-muted-foreground	Description blocks, aria-describedby targets
Button text	text-sm font-semibold	Standard controls, primary and secondary buttons
Badge text	text-xs font-medium	Status indicators, small counters
Table cell	text-sm or text-base depending on density	Standard rows inside data tables
Table metadata	text-xs text-muted-foreground	Secondary context, relative dates, inactive rows
Error text	text-sm text-danger	Form validation errors, inline alerts
Empty-state body	text-sm or text-base text-muted-foreground	Explanatory blocks in empty panels/cards

Font weights

Three weights cover all use cases:

Token	Value
medium	500 — Labels and subtle emphasis
semibold	600 — Headings, buttons, and actions
bold	700 — Page titles and strong emphasis

Avoid too many weights in dense dashboard screens to prevent visual noise and maintain a clean layout.

Line heights

Line heights in Byteion are pre-paired with their respective font-size tokens in the Tailwind configuration. Because of this integration, developers generally do not need to apply custom leading-* classes in standard views.

Long documentation or body text should remain comfortable to read by keeping default scale proportions. Dense tables and forms should use the default scale (e.g., text-sm or text-xs) to automatically apply proportional line-height compression before resorting to custom leading overrides.

Code and monospace text

While Inter is the primary product UI font, code blocks, inline code, design tokens, keyboard shortcuts, database IDs, and technical values may use JetBrains Mono or a monospace stack.

Monospace should only be used for code, tokens, keyboard shortcuts, IDs, and technical values. Do not use monospace for normal dashboard labels or body text.

Do and Don't

Do

Use the token scale instead of arbitrary text sizes.
Use semantic text color tokens like text-foreground and text-muted-foreground.
Use font-medium for labels and font-semibold for headings/actions.
Preserve semantic heading order.
Keep dense dashboard typography consistent.

Don't

Use text-[13px] or one-off sizes.
Use more than the approved weights in shared components.
Use font-bold for normal body text.
Use heading tags only for visual size.
Use monospace for regular UI text.

Developer tips

• Use text size tokens with their built-in line heights. Avoid adding separate line-height overrides unless you are building custom display layouts. • Prefer token-level changes for global typography changes. To change the default font or size mappings, modify variables at the Tailwind configuration or theme layer instead of changing individual components. • Keep app, docs, React, Vue, and HTML examples aligned. Document layout styles using Tailwind typography helper primitives consistently across all framework templates. • Self-host fonts when production performance/privacy requires it. Load font files locally to minimize DNS requests and meet stricter privacy, compliance, or performance requirements. • Test dense table/form screens at smaller viewport widths. Make sure long labels and text cell values wrap gracefully without breaking layouts or overlapping.

Heading Component — h1-h6 hierarchy
Paragraph Component — body text styling
Design Tokens — source of typography tokens
Theming Guide — changing font variables and brand typography

Unlock Premium Patterns

Get access to copy-paste ready Pro blocks, SaaS templates, and advanced component patterns.

Explore Pro Components