Typography

The Typography component provides a reusable pattern for typography in the interface.

Variant

In this case, variant is set to h1 and element parameter is left untouched. This results in a <p> element that looks like h5 element.

Variant h1

Element

When the parameter element is set and the variant element is not, the result is a p element that looks like a <h1> element.

Element h1

Heading Variants

Standard HTML heading levels from h1 to h6. These are semantic elements that define the document structure and hierarchy.

Variant: h1

Variant: h2

Variant: h3

Variant: h4

Variant: h5

Variant: h6

<h1 class="c-typography c-typography__variant--h1" data-uid="6a44fdd1714ae" data-component="typography">
  Variant: h1
</h1><!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="6a44fdd171543" data-component="typography">
  Variant: h2
</h2><!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="6a44fdd1715c2" data-component="typography">
  Variant: h3
</h3><!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6a44fdd17164a" data-component="typography">
  Variant: h4
</h4><!-- typography.blade.php   original: h5 -->
<h5 class="c-typography c-typography__variant--h5" data-uid="6a44fdd1716cd" data-component="typography">
  Variant: h5
</h5><!-- typography.blade.php   original: h6 -->
<h6 class="c-typography c-typography__variant--h6" data-uid="6a44fdd171745" data-component="typography">
  Variant: h6
</h6>

{{-- Document heading levels (h1-h6) --}}
@php
$variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@endphp

@foreach($variants as $variant)
    @typography([
        "element" => $variant,
        "variant" => $variant,
        "useHeadingsContext" => false,
    ])
        Variant: {{ $variant }}
    @endtypography
@endforeach

Display Variants

Large display text variants including headline, title, and subtitle. These are used for prominent text that needs visual emphasis.

Variant: headline

Variant: title

Variant: subtitle

<div class="c-typography c-typography__variant--headline" data-uid="6a44fdd17191e" data-component="typography">
  Variant: headline
</div><!-- typography.blade.php   original: div -->
<div class="c-typography c-typography__variant--title" data-uid="6a44fdd1719b4" data-component="typography">
  Variant: title
</div><!-- typography.blade.php   original: div -->
<div class="c-typography c-typography__variant--subtitle" data-uid="6a44fdd171a82" data-component="typography">
  Variant: subtitle
</div>

{{-- Document display text variants (headline, title, subtitle) --}}
@php
$variants = ['headline', 'title', 'subtitle'];
@endphp

@foreach($variants as $variant)
    @typography([
        "element" => 'div',
        "variant" => $variant,
        "useHeadingsContext" => false,
    ])
        Variant: {{ $variant }}
    @endtypography
@endforeach

Body Text Variants

Standard body text variants including body, paragraph (p), and bold. These are the primary text styles for content.

Variant: body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Variant: p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Variant: bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Variant: lead. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

<p class="c-typography c-typography__variant--body" data-uid="6a44fdd171bf8" data-component="typography">
  Variant: body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p><!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6a44fdd171cb9" data-component="typography">
  Variant: p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p><!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--bold" data-uid="6a44fdd171d36" data-component="typography">
  Variant: bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p><!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--lead" data-uid="6a44fdd171dad" data-component="typography">
  Variant: lead. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>

{{-- Document body text variants (body, p, bold) --}}
@typography(["variant" => "body", "useHeadingsContext" => false])
    Variant: body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
@endtypography

@typography(["variant" => "p", "useHeadingsContext" => false])
    Variant: p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
@endtypography

@typography([ "variant" => "bold", "useHeadingsContext" => false, ])
    Variant: bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
@endtypography

@typography([ "variant" => "lead", "useHeadingsContext" => false, ])
    Variant: lead. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
@endtypography

Small Text Variants

Smaller text variants including caption, byline, and meta. These are used for secondary information and annotations.

Variant: caption

Variant: byline

Variant: meta

<div class="c-typography c-typography__variant--caption" data-uid="6a44fdd171f78" data-component="typography">
  Variant: caption
</div><!-- typography.blade.php   original: div -->
<div class="c-typography c-typography__variant--byline" data-uid="6a44fdd17200f" data-component="typography">
  Variant: byline
</div><!-- typography.blade.php   original: div -->
<div class="c-typography c-typography__variant--meta" data-uid="6a44fdd172098" data-component="typography">
  Variant: meta
</div>

{{-- Document small text variants (caption, byline, meta) --}}
@php
$variants = ['caption', 'byline', 'meta'];
@endphp

@foreach($variants as $variant)
    @typography([
        "element" => 'div',
        "variant" => $variant,
        "useHeadingsContext" => false,
    ])
        Variant: {{ $variant }}
    @endtypography
@endforeach

Specialized Variants

Specialized text variants for specific use cases such as marketing and email content.

Variant: marketing

Variant: email

<div class="c-typography c-typography__variant--marketing" data-uid="6a44fdd18345a" data-component="typography">
  Variant: marketing
</div><!-- typography.blade.php   original: div -->
<div class="c-typography c-typography__variant--email" data-uid="6a44fdd183505" data-component="typography">
  Variant: email
</div>

{{-- Document specialized text variants (marketing, email) --}}
@php
$variants = ['marketing', 'email'];
@endphp

@foreach($variants as $variant)
    @typography([
        "element" => 'div',
        "variant" => $variant,
        "useHeadingsContext" => false,
    ])
        Variant: {{ $variant }}
    @endtypography
@endforeach

API

Parameter	Default	Description
element	p	What element the markup will use.
variant	false	Headings (h1, h2...) can only be set to other headings. If left empty it will default to the given element.
slot		The content
autopromote	false	Upgrade element to h1 (from h3 and above), if seen first on page.
useHeadingsContext	true	If a heading should be based off of the context its in.

CSS API

Variable	Default	Type	Values	Description
--c-typography--font-family-base	var(--font-family-base)	font	-	Controls the base typeface used by body, paragraph, lead, small text, and non-heading variants that inherit the base family.
--c-typography--font-family-heading	var(--font-family-heading)	font	-	Controls the typeface used by variants that explicitly switch to the heading family.
--c-typography--font-weight-normal	var(--font-weight-normal)	select	100, 200, 300, 400, 500, 600	Controls the default font weight for variants that keep the base weight.
--c-typography--font-weight-medium	var(--font-weight-medium)	select	400, 500, 600, 700	Controls the shared medium emphasis used by title and lead variants.
--c-typography--font-weight-bold	var(--font-weight-bold)	select	600, 700, 800, 900	Controls the heavier emphasis used by bold and marketing variants.
--c-typography--font-weight-heading	var(--font-weight-heading)	select	400, 500, 600, 700, 800, 900	Controls the default weight used by heading level variants h1 through h6.
--c-typography--line-height-base	var(--line-height-base)	range	-	Controls the reading line height for variants that keep the base line height.
--c-typography--line-height-heading	var(--line-height-heading)	range	-	Controls the shared line height for heading-style variants.
--c-typography--letter-spacing-base	var(--letter-spacing-base)	range	-	Controls the default tracking for variants that inherit the base letter spacing.
--c-typography--letter-spacing-heading	var(--letter-spacing-heading)	range	-	Controls the tracking for heading-style variants that use the heading spacing scale.
--c-typography--space	var(--space)	range	-	Controls the vertical spacing inserted between adjacent heading-style variants.
--c-typography--font-size-90	var(--font-size-90)	range	-	Controls caption, byline, and meta text sizes.
--c-typography--font-size-200	var(--font-size-200)	range	-	Controls the shared size used by lead text and the smaller heading level h6.
--c-typography--font-size-300	var(--font-size-300)	range	-	Controls the default size used by h5 headings.
--c-typography--font-size-400	var(--font-size-400)	range	-	Controls the shared size used by subtitle and h4 variants.
--c-typography--font-size-500	var(--font-size-500)	range	-	Controls the shared size used by title and h3 variants.
--c-typography--font-size-600	var(--font-size-600)	range	-	Controls the shared size used by headline and h2 variants.
--c-typography--font-size-700	var(--font-size-700)	range	-	Controls the default size used by h1 headings.
--c-typography--font-size-800	var(--font-size-800)	range	-	Controls the default size used by the marketing variant.
--c-typography--body-font-size-multiplier	1	range	-	Scales regular body and paragraph text locally without changing the shared type scale.
--c-typography--bold-font-size-multiplier	1	range	-	Scales the bold variant locally without changing other text styles.
--c-typography--lead-font-size-multiplier	1	range	-	Scales lead text locally without changing the shared lead token.
--c-typography--caption-font-size-multiplier	1	range	-	Scales caption text locally without changing the shared small-text token.
--c-typography--byline-font-size-multiplier	1	range	-	Scales byline text locally without changing the shared small-text token.
--c-typography--meta-font-size-multiplier	1	range	-	Scales meta text locally without changing the shared small-text token.
--c-typography--email-font-size-multiplier	1	range	-	Scales email text locally without changing the shared body size.
--c-typography--h1-font-size-multiplier	1	range	-	Scales h1 locally for one placement without changing the global h1 scale.
--c-typography--h2-font-size-multiplier	1	range	-	Scales h2 locally for one placement without changing the global h2 scale.
--c-typography--h3-font-size-multiplier	1	range	-	Scales h3 locally for one placement without changing the global h3 scale.
--c-typography--h4-font-size-multiplier	1	range	-	Scales h4 locally for one placement without changing the global h4 scale.
--c-typography--h5-font-size-multiplier	1	range	-	Scales h5 locally for one placement without changing the global h5 scale.
--c-typography--h6-font-size-multiplier	1	range	-	Scales h6 locally for one placement without changing the global h6 scale.
--c-typography--headline-font-size-multiplier	1	range	-	Scales the headline variant locally without changing the shared display scale.
--c-typography--title-font-size-multiplier	1	range	-	Scales the title variant locally without changing the shared display scale.
--c-typography--subtitle-font-size-multiplier	1	range	-	Scales the subtitle variant locally without changing the shared display scale.
--c-typography--marketing-font-size-multiplier	1	range	-	Scales the marketing variant locally without changing the shared display scale.

Similar components

Progressbar Logotype Grid Group