AvesraAvesrabeta

Typography

Semantic typography for headings, body copy, and inline code. Apply type tokens on the host element you choose — attribute selectors and convenience primitives.

Usage

import { AvTypographyImports } from '@avesra/angular';

Build better interfaces

Typography that stays semantic

Composable by default

Small heading

Avesra Typography applies semantic type tokens on host elements you choose.

Smaller muted body copy for secondary descriptions.

npm install @avesra/angular
import { Component } from '@angular/core';
import { AvTypographyImports } from '@avesra/angular';

@Component({
  selector: 'app-typography-basic-demo',
  imports: [AvTypographyImports],
  template: `<div class="flex max-w-xl flex-col gap-4">
  <h1 av-typography type="h1">Build better interfaces</h1>
  <h2 av-typography type="h2">Typography that stays semantic</h2>
  <h3 av-typography type="h3">Composable by default</h3>
  <h4 av-typography type="h4">Small heading</h4>
  <p av-typography>
    Avesra Typography applies semantic type tokens on host elements you choose.
  </p>
  <p av-typography color="muted" type="body-sm">
    Smaller muted body copy for secondary descriptions.
  </p>
  <code av-typography type="code">npm install &#64;avesra/angular</code>
</div>`,
})
export class TypographyBasicDemo {}

Anatomy

<h1 av-typography type="h1"></h1>
<p av-typography></p>
<code av-typography type="code"></code>
<h2 av-typography-heading></h2>
<p av-typography-paragraph></p>
<code av-typography-code></code>
<div av-typography-prose></div>

Typography styles the host element you attach it to. Use av-typography with an explicit type, or reach for primitives — av-typography-heading, av-typography-paragraph, av-typography-code, and av-typography-prose — when the markup is already semantic.

Examples

Default

Headings, body, muted secondary copy, and inline code on semantic host tags.

Build better interfaces

Typography that stays semantic

Composable by default

Small heading

Avesra Typography applies semantic type tokens on host elements you choose.

Smaller muted body copy for secondary descriptions.

npm install @avesra/angular
import { Component } from '@angular/core';
import { AvTypographyImports } from '@avesra/angular';

@Component({
  selector: 'app-typography-basic-demo',
  imports: [AvTypographyImports],
  template: `<div class="flex max-w-xl flex-col gap-4">
  <h1 av-typography type="h1">Build better interfaces</h1>
  <h2 av-typography type="h2">Typography that stays semantic</h2>
  <h3 av-typography type="h3">Composable by default</h3>
  <h4 av-typography type="h4">Small heading</h4>
  <p av-typography>
    Avesra Typography applies semantic type tokens on host elements you choose.
  </p>
  <p av-typography color="muted" type="body-sm">
    Smaller muted body copy for secondary descriptions.
  </p>
  <code av-typography type="code">npm install &#64;avesra/angular</code>
</div>`,
})
export class TypographyBasicDemo {}

Primitives

Convenience wrappers infer heading level from the host tag and map paragraph size to body tokens.

  • av-typography-heading — infers level from h1–h6 (or optional level)
  • av-typography-paragraph — maps size="base" | "sm" | "xs" to body styles
  • av-typography-code — inline code treatment
  • av-typography-prose — styles rich nested HTML without per-child directives

Dashboard

Convenience primitives are thin wrappers over Typography.

Paragraph supports base, sm, and xs sizes.

av-typography-code
import { Component } from '@angular/core';
import { AvTypographyImports } from '@avesra/angular';

@Component({
  selector: 'app-typography-primitives-demo',
  imports: [AvTypographyImports],
  template: `<div class="flex max-w-xl flex-col gap-4">
  <h1 av-typography-heading>Dashboard</h1>
  <p av-typography-paragraph>
    Convenience primitives are thin wrappers over Typography.
  </p>
  <p av-typography-paragraph color="muted" size="sm">
    Paragraph supports base, sm, and xs sizes.
  </p>
  <code av-typography-code>av-typography-code</code>
</div>`,
})
export class TypographyPrimitivesDemo {}

Prose

Wrap authored content where markup is already semantic; nested headings, paragraphs, and inline code receive default typography rhythm.

Prose title

Prose styles nested semantic HTML without av-typography on each child.

Section title

Inline code like render receives code treatment.

import { Component } from '@angular/core';
import { AvTypographyImports } from '@avesra/angular';

@Component({
  selector: 'app-typography-prose-demo',
  imports: [AvTypographyImports],
  template: `<div av-typography-prose class="flex max-w-xl flex-col gap-3">
  <h1>Prose title</h1>
  <p>Prose styles nested semantic HTML without av-typography on each child.</p>
  <h2>Section title</h2>
  <p>Inline code like <code>render</code> receives code treatment.</p>
</div>`,
})
export class TypographyProseDemo {}

Typography Scale

Full type scale from h1 through body-xs and code.

h136px / 600 / 1.11 / tight

Build better interfaces

h230px / 600 / 1.17 / tight

Built for the intelligence age

h324px / 600 / 1.25 / tight

Pricing on your terms

h420px / 600 / 1.33 / tight

Apply to the startup program

h518px / 600 / 1.39 / tight
Card titles
h616px / 600 / 1.50 / tight
Smaller feature headers
body16px / 400 / 1.75

Primary body text used across documentation, marketing copy, and descriptions.

body-sm14px / 400 / 1.50

Secondary body, table cells, navigation, and sidebar items.

body-xs12px / 400 / 1.25

Captions, badges, helper text, and fine print.

code14px / mono
npm install @avesra/angular
import { Component } from '@angular/core';
import { AvTypographyImports, type AvTypographyType } from '@avesra/angular';

interface ScaleRow {
  label: string;
  meta: string;
  sample: string;
  type: AvTypographyType;
}

@Component({
  selector: 'app-typography-typography-scale-demo',
  imports: [AvTypographyImports],
  template: `<div class="flex w-full flex-col divide-y divide-border">
  @for (row of scale; track row.label) {
    <div class="grid grid-cols-[160px_1fr] items-center gap-8 py-5">
      <div class="flex shrink-0 flex-col gap-0.5">
        <span class="text-sm font-semibold text-foreground">{{ row.label }}</span>
        <span class="text-xs whitespace-nowrap text-muted">{{ row.meta }}</span>
      </div>
      @switch (row.type) {
        @case ('h1') {
          <h1 av-typography [type]="row.type">{{ row.sample }}</h1>
        }
        @case ('h2') {
          <h2 av-typography [type]="row.type">{{ row.sample }}</h2>
        }
        @case ('h3') {
          <h3 av-typography [type]="row.type">{{ row.sample }}</h3>
        }
        @case ('h4') {
          <h4 av-typography [type]="row.type">{{ row.sample }}</h4>
        }
        @case ('h5') {
          <h5 av-typography [type]="row.type">{{ row.sample }}</h5>
        }
        @case ('h6') {
          <h6 av-typography [type]="row.type">{{ row.sample }}</h6>
        }
        @case ('code') {
          <code av-typography type="code">{{ row.sample }}</code>
        }
        @default {
          <p av-typography [type]="row.type">{{ row.sample }}</p>
        }
      }
    </div>
  }
</div>`,
})
export class TypographyTypographyScaleDemo {
  readonly scale: ScaleRow[] = [
    {
      label: 'h1',
      meta: '36px / 600 / 1.11 / tight',
      sample: 'Build better interfaces',
      type: 'h1',
    },
    {
      label: 'h2',
      meta: '30px / 600 / 1.17 / tight',
      sample: 'Built for the intelligence age',
      type: 'h2',
    },
    {
      label: 'h3',
      meta: '24px / 600 / 1.25 / tight',
      sample: 'Pricing on your terms',
      type: 'h3',
    },
    {
      label: 'h4',
      meta: '20px / 600 / 1.33 / tight',
      sample: 'Apply to the startup program',
      type: 'h4',
    },
    {
      label: 'h5',
      meta: '18px / 600 / 1.39 / tight',
      sample: 'Card titles',
      type: 'h5',
    },
    {
      label: 'h6',
      meta: '16px / 600 / 1.50 / tight',
      sample: 'Smaller feature headers',
      type: 'h6',
    },
    {
      label: 'body',
      meta: '16px / 400 / 1.75',
      sample: 'Primary body text used across documentation, marketing copy, and descriptions.',
      type: 'body',
    },
    {
      label: 'body-sm',
      meta: '14px / 400 / 1.50',
      sample: 'Secondary body, table cells, navigation, and sidebar items.',
      type: 'body-sm',
    },
    {
      label: 'body-xs',
      meta: '12px / 400 / 1.25',
      sample: 'Captions, badges, helper text, and fine print.',
      type: 'body-xs',
    },
    {
      label: 'code',
      meta: '14px / mono',
      sample: 'npm install @avesra/angular',
      type: 'code',
    },
  ];
}

Custom Styles

Pass Tailwind utility classes on the host alongside typography tokens for one-off layouts.

Changelog

Faster search results

Queries now return in under 200ms…

import { Component } from '@angular/core';
import { AvTypographyImports } from '@avesra/angular';

@Component({
  selector: 'app-typography-custom-styles-demo',
  imports: [AvTypographyImports],
  template: `<div class="flex max-w-md flex-col gap-2 rounded-xl border border-border/80 bg-surface-secondary p-4">
  <p av-typography type="body-xs" class="text-xs font-medium tracking-wide text-accent uppercase">Changelog</p>
  <h4 av-typography type="h4" class="font-semibold tracking-tight text-foreground">Faster search results</h4>
  <p av-typography type="body-sm" class="text-sm leading-relaxed text-muted">Queries now return in under 200ms…</p>
</div>`,
})
export class TypographyCustomStylesDemo {}

Customization

Global CSS

To customize Typography classes, use the @layer components directive. Learn more . 

@layer components {
  .av-typography {
    @apply text-foreground;

    &.av-typography--h1 {
      @apply font-extrabold tracking-tight;
    }

    &.av-typography--code {
      @apply rounded-md bg-default font-mono;
    }
  }
}

Styling Reference

Avesra follows the BEM methodology so variants and states are reusable and easy to customize.

CSS Classes

  • .av-typography — Base typography primitive
  • .av-typography-prose — Rich prose container
  • .av-typography--h1 through .av-typography--h6 — Heading scale
  • .av-typography--body, --body-sm, --body-xs — Body sizes
  • .av-typography--code — Inline code
  • .av-typography--align-start, --align-center, --align-end, --align-justify — Alignment
  • .av-typography--color-default, --color-muted — Foreground color
  • .av-typography--weight-normal, --weight-medium, --weight-semibold, --weight-bold — Weight overrides
  • .av-typography--truncate — Single-line ellipsis

API Reference

PropTypeDefaultDescription
type'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'body-sm' | 'body-xs' | 'code''body'Typography scale token (av-typography). Prefer a matching host tag.
align'start' | 'center' | 'end' | 'justify''start'Text alignment.
color'default' | 'muted''default'Foreground color token.
weight'normal' | 'medium' | 'semibold' | 'bold'undefinedOptional font-weight override.
truncatebooleanfalseTruncate overflowing text with an ellipsis.
level (Heading)1 | 2 | 3 | 4 | 5 | 6from host tagOptional style level for av-typography-heading; defaults from h1–h6 tag.
size (Paragraph)'base' | 'sm' | 'xs''base'Paragraph size for av-typography-paragraph.

Made with ❤ by SyntaxHertz. Open source and available on GitHub.