Typography

Typography

Renders text with a named typographic variant mapped to the design token scale.

import { Typography } from '@lostgradient/cinder/typography';
typographytext
01

Overview

Renders text with a named typographic variant mapped to the design token scale.

Usage

svelte 
<script lang="ts">
  import { Typography } from '@lostgradient/cinder/typography';
</script>

Guidance

Use When

  • Applying a named typographic style (heading, body, caption) with semantic HTML.

Avoid When

  • Rendering inline text inside a paragraph — use a plain <span> with CSS.
Live preview
02

When to use

Use when
  • Applying a named typographic style (heading, body, caption) with semantic HTML.
Avoid when
  • Rendering inline text inside a paragraph — use a plain <span> with CSS.
03

Examples

Basic typography

Named typographic variants mapped to the design token scale.

04

Props

Props for typography
Name Type Default Required Bindable Description
variant 'h1''h2''h3''h4''h5''h6''subtitle1''subtitle2''body1''body2''caption''overline''label' 'body1' Named typographic style to apply. Controls font size, weight, line height, and letter spacing via design tokens.
as NonVoidHTMLElementTagName Override the rendered HTML element while keeping the variant's visual style. Useful for SEO/semantic control, e.g. variant="h1" as="span" renders a visually h1-styled <span>. Accessibility: rendering a heading variant (h1–h6) on a non-heading element removes the heading role from the document outline. If the text still functions as a heading, add role="heading" and aria-level yourself. Typing: forwarded attributes are typed as the generic HTMLAttributes, so element-specific attributes are not narrowed by as — e.g. as="a" will not accept href through Typography's props. For an interactive element with its own attributes (a real link or button), render that element directly instead.
gutterBottom boolean false When true, adds margin-block-end below the element using the space scale.
noWrap boolean false When true, constrains text to a single line with text-overflow: ellipsis.
children snippet req The text content or composed inline content.