Typography
Typography in the Design System is structured around two families of styles: Titles carry headings and the hierarchy of a page, Body carries paragraphs, descriptions, and functional interface copy. Each family is defined as a set of predefined styles covering every breakpoint and, where needed, emphasis variations — so a layout keeps one typographic voice from mobile to desktop.
Each family covers responsive needs across breakpoints (Desktop, Tablet and Mobile) and specific emphasis variations when needed (e.g. default, emphasis, heavy). The goal of this setup is to:
- Ensure visual consistency across products and platforms.
- Provide a clear typographic hierarchy for readability and accessibility.
- Enable flexibility across breakpoints without maintaining multiple disconnected systems.
- Make typography token-driven and scalable, allowing efficient updates and brand adaptations.
Available styles
Section titled “Available styles”Title styles
Section titled “Title styles”The Title system defines the visual hierarchy of page structure and content sections.
There are 10 title levels, from Title 1 (largest) to Title 10 (smallest).
Every level is available for Desktop, Tablet and Mobile. Some levels include:
- Default variants
- Emphasis variants, used when extra prominence or focus is required.
Title styles are intended for:
- Page headings (hero titles, main page headers)
- Section headers
- Content grouping titles
- Featured or promotional headlines
- Card and module titles
The descending scale ensures a clear typographic hierarchy, making layouts readable and scannable across all screen sizes.
- Title 1
- Title 2
- Title 3
- Title 4
- Title 5
- Title 6
- Title 7
- Title 8
- Title 9
- Title 10
Body styles
Section titled “Body styles”Body styles are designed for reading content and functional interface text.
- The system includes 8 body sizes (Body 1 to Body 8).
- Each size is available in multiple weight variants:
- Default: standard reading weight for most use cases
- Emphasis: for highlighting key phrases or important text
- Heavy: for high-contrast or strong visual emphasis
Body styles are used for:
- Paragraphs and long-form content
- Descriptions, subtitles and secondary information
- UI copy such as labels, hints and helper text
- Legal or meta content
- Dense or compact interfaces where smaller text sizes are required
Together, these variants provide flexibility while maintaining consistent typography rules.
- Body 1
- Body 2
- Body 3
- Body 4
- Body 5
- Body 6
- Body 7
- Body 8
Using typography
Section titled “Using typography”Typography styles in the Design System are applied through predefined text styles in Figma, rather than selecting individual tokens manually.
Each text style is built by grouping several typography tokens into a single, reusable style definition, typically combining a font family, font size, font weight, line height and letter spacing token.
Designers should never apply typography by manually selecting individual tokens. The correct workflow is to select a predefined text style and apply it directly.
Why styles instead of individual tokens?
Section titled “Why styles instead of individual tokens?”Using styles instead of individual tokens guarantees:
- Consistency: All screens follow the same typographic rules.
- Efficiency: Designers apply one style instead of managing multiple properties.
- Maintainability: Global updates happen at the token level and flow automatically into all styles.
- Brand scalability: Typography can be adjusted for different brands or themes without redefining styles manually.
Follow hierarchical intent
Section titled “Follow hierarchical intent”Use styles according to their semantic role:
- Higher Title levels (Title 1 – Title 3): Page headers, major sections
- Mid Title levels (Title 4 – Title 6): Content group sections, component-level titles
- Lower Title levels (Title 7 – Title 10): Subsections, small UI or card titles
Body styles should be selected depending on content density:
- Larger body sizes: Long-form text, important supporting copy
- Medium body sizes: Standard paragraph text, descriptions and subtitles
- Smaller body sizes: Metadata, labels, secondary or helper text
Respect responsive scaling
Section titled “Respect responsive scaling”Each title style is already adapted for Desktop, Tablet and Mobile.
Designers must not choose a larger or smaller style manually for mobile or tablet to “fake” scaling. Instead, apply the same semantic style and allow the responsive token definitions to handle size adjustments automatically.
Use emphasis strategically
Section titled “Use emphasis strategically”- Emphasis variants: Highlight keywords inside sentences. Provide subtle hierarchy without introducing new text styles.
- Heavy variants: Draw strong attention to key UI data. Use sparingly to avoid visual overload.
Emphasis should support content hierarchy, not replace proper use of Title and Body levels.
Size guidelines
Section titled “Size guidelines”Title sizes
Section titled “Title sizes”Title levels follow a progressive descending scale. Always move down the hierarchy one level at a time. Avoid skipping more than 2 levels unless a clear structural separation is required.
Example: Title 1 → Title 2 → Title 3. Avoid jumping directly from Title 1 to Title 5 without an intermediate title.
Body sizes
Section titled “Body sizes”Choose size according to content density and reading comfort. Maintain at least one size step difference between visually adjacent body blocks to ensure legibility and hierarchy.
Tokens
Section titled “Tokens”These tokens define the typography primitives the text styles above are composed from. In code, reach for the typography classes rather than the tokens directly — the classes already bundle the right combination per breakpoint.
Font family
Section titled “Font family”--tng-font-font-family-kinto--tng-font-font-family-lexus--tng-font-font-family-lexus-decorative--tng-font-font-family-toyota--tng-font-font-family-kinto--tng-font-font-family-lexus--tng-font-font-family-lexus-decorative--tng-font-font-family-toyota--tng-font-font-family-kinto--tng-font-font-family-lexus--tng-font-font-family-lexus-decorative--tng-font-font-family-toyotaFont size
Section titled “Font size”--tng-font-font-size-12--tng-font-font-size-14--tng-font-font-size-16--tng-font-font-size-18--tng-font-font-size-20--tng-font-font-size-22--tng-font-font-size-24--tng-font-font-size-28--tng-font-font-size-32--tng-font-font-size-34--tng-font-font-size-36--tng-font-font-size-38--tng-font-font-size-40--tng-font-font-size-44--tng-font-font-size-48--tng-font-font-size-56--tng-font-font-size-64--tng-font-font-size-68--tng-font-font-size-70--tng-font-font-size-80--tng-font-font-size-90--tng-font-font-size-96--tng-font-font-size-100--tng-font-font-size-110--tng-font-font-size-120--tng-font-font-size-128--tng-font-font-size-130--tng-font-font-size-140--tng-font-font-size-150--tng-font-font-size-160--tng-font-font-size-170--tng-font-font-size-176--tng-font-font-size-180--tng-font-font-size-190--tng-font-font-size-200--tng-font-font-size-210--tng-font-font-size-220--tng-font-font-size-230--tng-font-font-size-240--tng-font-font-size-256--tng-font-font-size-12--tng-font-font-size-14--tng-font-font-size-16--tng-font-font-size-18--tng-font-font-size-20--tng-font-font-size-22--tng-font-font-size-24--tng-font-font-size-28--tng-font-font-size-32--tng-font-font-size-34--tng-font-font-size-36--tng-font-font-size-38--tng-font-font-size-40--tng-font-font-size-44--tng-font-font-size-48--tng-font-font-size-56--tng-font-font-size-64--tng-font-font-size-68--tng-font-font-size-70--tng-font-font-size-80--tng-font-font-size-90--tng-font-font-size-96--tng-font-font-size-100--tng-font-font-size-110--tng-font-font-size-120--tng-font-font-size-128--tng-font-font-size-130--tng-font-font-size-140--tng-font-font-size-150--tng-font-font-size-160--tng-font-font-size-170--tng-font-font-size-176--tng-font-font-size-180--tng-font-font-size-190--tng-font-font-size-200--tng-font-font-size-210--tng-font-font-size-220--tng-font-font-size-230--tng-font-font-size-240--tng-font-font-size-256--tng-font-font-size-12--tng-font-font-size-14--tng-font-font-size-16--tng-font-font-size-18--tng-font-font-size-20--tng-font-font-size-22--tng-font-font-size-24--tng-font-font-size-28--tng-font-font-size-32--tng-font-font-size-34--tng-font-font-size-36--tng-font-font-size-38--tng-font-font-size-40--tng-font-font-size-44--tng-font-font-size-48--tng-font-font-size-56--tng-font-font-size-64--tng-font-font-size-68--tng-font-font-size-70--tng-font-font-size-80--tng-font-font-size-90--tng-font-font-size-96--tng-font-font-size-100--tng-font-font-size-110--tng-font-font-size-120--tng-font-font-size-128--tng-font-font-size-130--tng-font-font-size-140--tng-font-font-size-150--tng-font-font-size-160--tng-font-font-size-170--tng-font-font-size-176--tng-font-font-size-180--tng-font-font-size-190--tng-font-font-size-200--tng-font-font-size-210--tng-font-font-size-220--tng-font-font-size-230--tng-font-font-size-240--tng-font-font-size-256Font weight
Section titled “Font weight”--tng-font-font-weight-bold--tng-font-font-weight-bold-italic--tng-font-font-weight-italic--tng-font-font-weight-light--tng-font-font-weight-light-italic--tng-font-font-weight-medium--tng-font-font-weight-regular--tng-font-font-weight-regular-italic--tng-font-font-weight-semibold--tng-font-font-weight-semibold-italic--tng-font-font-weight-bold--tng-font-font-weight-bold-italic--tng-font-font-weight-italic--tng-font-font-weight-light--tng-font-font-weight-light-italic--tng-font-font-weight-medium--tng-font-font-weight-regular--tng-font-font-weight-regular-italic--tng-font-font-weight-semibold--tng-font-font-weight-semibold-italic--tng-font-font-weight-bold--tng-font-font-weight-bold-italic--tng-font-font-weight-italic--tng-font-font-weight-light--tng-font-font-weight-light-italic--tng-font-font-weight-medium--tng-font-font-weight-regular--tng-font-font-weight-regular-italic--tng-font-font-weight-semibold--tng-font-font-weight-semibold-italicLetter spacing
Section titled “Letter spacing”--tng-font-letter-spacing-none--tng-font-letter-spacing-tight--tng-font-letter-spacing-wide--tng-font-letter-spacing-wider--tng-font-letter-spacing-widest--tng-font-letter-spacing-none--tng-font-letter-spacing-tight--tng-font-letter-spacing-wide--tng-font-letter-spacing-wider--tng-font-letter-spacing-widest--tng-font-letter-spacing-none--tng-font-letter-spacing-tight--tng-font-letter-spacing-wide--tng-font-letter-spacing-wider--tng-font-letter-spacing-widestLine height
Section titled “Line height”--tng-font-line-height-12--tng-font-line-height-14--tng-font-line-height-16--tng-font-line-height-18--tng-font-line-height-20--tng-font-line-height-22--tng-font-line-height-24--tng-font-line-height-26--tng-font-line-height-28--tng-font-line-height-30--tng-font-line-height-32--tng-font-line-height-34--tng-font-line-height-36--tng-font-line-height-38--tng-font-line-height-40--tng-font-line-height-42--tng-font-line-height-44--tng-font-line-height-46--tng-font-line-height-48--tng-font-line-height-56--tng-font-line-height-64--tng-font-line-height-70--tng-font-line-height-72--tng-font-line-height-80--tng-font-line-height-88--tng-font-line-height-96--tng-font-line-height-102--tng-font-line-height-104--tng-font-line-height-106--tng-font-line-height-116--tng-font-line-height-128--tng-font-line-height-136--tng-font-line-height-140--tng-font-line-height-160--tng-font-line-height-172--tng-font-line-height-174--tng-font-line-height-190--tng-font-line-height-211--tng-font-line-height-256--tng-font-line-height-276--tng-font-line-height-12--tng-font-line-height-14--tng-font-line-height-16--tng-font-line-height-18--tng-font-line-height-20--tng-font-line-height-22--tng-font-line-height-24--tng-font-line-height-26--tng-font-line-height-28--tng-font-line-height-30--tng-font-line-height-32--tng-font-line-height-34--tng-font-line-height-36--tng-font-line-height-38--tng-font-line-height-40--tng-font-line-height-42--tng-font-line-height-44--tng-font-line-height-46--tng-font-line-height-48--tng-font-line-height-56--tng-font-line-height-64--tng-font-line-height-70--tng-font-line-height-72--tng-font-line-height-80--tng-font-line-height-88--tng-font-line-height-96--tng-font-line-height-102--tng-font-line-height-104--tng-font-line-height-106--tng-font-line-height-116--tng-font-line-height-128--tng-font-line-height-136--tng-font-line-height-140--tng-font-line-height-160--tng-font-line-height-172--tng-font-line-height-174--tng-font-line-height-190--tng-font-line-height-211--tng-font-line-height-256--tng-font-line-height-276--tng-font-line-height-12--tng-font-line-height-14--tng-font-line-height-16--tng-font-line-height-18--tng-font-line-height-20--tng-font-line-height-22--tng-font-line-height-24--tng-font-line-height-26--tng-font-line-height-28--tng-font-line-height-30--tng-font-line-height-32--tng-font-line-height-34--tng-font-line-height-36--tng-font-line-height-38--tng-font-line-height-40--tng-font-line-height-42--tng-font-line-height-44--tng-font-line-height-46--tng-font-line-height-48--tng-font-line-height-56--tng-font-line-height-64--tng-font-line-height-70--tng-font-line-height-72--tng-font-line-height-80--tng-font-line-height-88--tng-font-line-height-96--tng-font-line-height-102--tng-font-line-height-104--tng-font-line-height-106--tng-font-line-height-116--tng-font-line-height-128--tng-font-line-height-136--tng-font-line-height-140--tng-font-line-height-160--tng-font-line-height-172--tng-font-line-height-174--tng-font-line-height-190--tng-font-line-height-211--tng-font-line-height-256--tng-font-line-height-276<p class="tng-text-body">…</p>Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
The default ordinal is 6. Use ordinals 1 through 8 to match typography tokens directly.
<p class="tng-text-body is-1">…</p><p class="tng-text-body is-2">…</p><p class="tng-text-body is-3">…</p><p class="tng-text-body is-4">…</p><p class="tng-text-body is-5">…</p><p class="tng-text-body is-6">…</p><p class="tng-text-body is-7">…</p><p class="tng-text-body is-8">…</p>Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Emphasis
Section titled “Emphasis”Use .is-emphasis for any size to increase its font weight.
<p class="tng-text-body">…</p><p class="tng-text-body is-emphasis">…</p>Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Use .is-heavy for bodies 4 through 8 to increase font weight even further.
<p class="tng-text-body is-4">…</p><p class="tng-text-body is-4 is-heavy">…</p><p class="tng-text-body is-5">…</p><p class="tng-text-body is-5 is-heavy">…</p><p class="tng-text-body is-6">…</p><p class="tng-text-body is-6 is-heavy">…</p><p class="tng-text-body is-7">…</p><p class="tng-text-body is-7 is-heavy">…</p><p class="tng-text-body is-8">…</p><p class="tng-text-body is-8 is-heavy">…</p>Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.
Supports responsive sizing for titles on mobile, tablet, and desktop breakpoints.
Inferred Sizes
Section titled “Inferred Sizes”Omit the size modifier to match the HTML heading levels h1 through h6 respectively to title sizes 4 through 9.
<h1 class="tng-text-title">Title 1</h1><h2 class="tng-text-title">Title 2</h2><h3 class="tng-text-title">Title 3</h3><h4 class="tng-text-title">Title 4</h4><h5 class="tng-text-title">Title 5</h5><h6 class="tng-text-title">Title 6</h6>Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Explicit Sizes
Section titled “Explicit Sizes”Use ordinals 1 through 10 to match typography tokens directly.
<p class="tng-text-title is-1">Title 1</p><p class="tng-text-title is-2">Title 2</p><p class="tng-text-title is-3">Title 3</p><p class="tng-text-title is-4">Title 4</p><p class="tng-text-title is-5">Title 5</p><p class="tng-text-title is-6">Title 6</p><p class="tng-text-title is-7">Title 7</p><p class="tng-text-title is-8">Title 8</p><p class="tng-text-title is-9">Title 9</p><p class="tng-text-title is-10">Title 10</p>Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Title 7
Title 8
Title 9
Title 10
Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Title 7
Title 8
Title 9
Title 10
Emphasis
Section titled “Emphasis”Use .is-emphasis to increase font weight.
<p class="tng-text-title is-1 is-emphasis">Title 1</p><p class="tng-text-title is-2 is-emphasis">Title 2</p><p class="tng-text-title is-3 is-emphasis">Title 3</p><p class="tng-text-title is-4 is-emphasis">Title 4</p><p class="tng-text-title is-5 is-emphasis">Title 5</p><p class="tng-text-title is-6 is-emphasis">Title 6</p><p class="tng-text-title is-7 is-emphasis">Title 7</p><p class="tng-text-title is-8 is-emphasis">Title 8</p><p class="tng-text-title is-9 is-emphasis">Title 9</p><p class="tng-text-title is-10 is-emphasis">Title 10</p>Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Title 7
Title 8
Title 9
Title 10
Title 1
Title 2
Title 3
Title 4
Title 5
Title 6
Title 7
Title 8
Title 9
Title 10
Readable type is the largest single lever on the accessibility of a page, and the type ramp only holds up if the smaller end of it is used for the right things. The rules below are size floors — meeting them is necessary, not sufficient; contrast, line length and reflow still apply.
Minimum font sizes
Section titled “Minimum font sizes”Reading text
Section titled “Reading text”Any text intended for continuous reading or primary content must not be smaller than:
- 14 px on Mobile
- 16 px on Desktop and Tablet
This includes paragraphs, descriptions, main UI instructions, and helper or explanatory text.
In practice, this means:
- Use Body 4 or larger on Desktop & Tablet
- Use Body 5 or larger on Mobile
Microcopy and auxiliary text
Section titled “Microcopy and auxiliary text”The system includes smaller sizes (down to 12 px) for specific, limited use cases. 12 px text is allowed only for non-interactive UI elements:
- Captions
- Legal disclaimers
- Image credits
- Metadata
- Supporting labels
- Non-critical secondary information
This text must:
- Not contain essential information required to complete a task
- Never be used for paragraphs or long reading blocks
- Always maintain WCAG contrast compliance
- Be used sparingly to avoid compromising general readability
Small text exists to support dense layouts where visual economy is necessary, but must not replace standard body text for meaningful content.