Typography

Use typography to present your design and content as clearly and efficiently as possible.

Welcome to Material Design

Typography creates clear hierarchies, organizes information, and guides users through your content. 

<div style="display: flex; flex-direction: column; gap: 1rem;">
    <x-mbc::typography variant="h4">Welcome to Material Design</x-mbc::typography>
    <x-mbc::typography variant="body1">
        Typography creates clear hierarchies, organizes information, and guides users through your content.
    </x-mbc::typography>
</div>

The Typography component provides a consistent way to display text content with different styles and semantic meanings according to Material Design specifications.

This is a heading (h4 variant)

This is body text with the default body1 variant. 

<div style="display: flex; flex-direction: column; gap: 1rem;">
    <x-mbc::typography variant="h4">Welcome to Material Design</x-mbc::typography>
    <x-mbc::typography variant="body1">
        Typography creates clear hierarchies, organizes information, and guides users through your content.
    </x-mbc::typography>
</div>

Variants link

Typography supports various variants that follow Material Design typography system. Each variant has its own style and semantic meaning.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Subtitle 1
Subtitle 2

Body 1 text

Body 2 text

BUTTON TEXT

Caption text

OVERLINE TEXT 

<div style="display: flex; flex-direction: column; gap: 1rem;">
    <x-mbc::typography variant="h1">Heading 1</x-mbc::typography>
    <x-mbc::typography variant="h2">Heading 2</x-mbc::typography>
    <x-mbc::typography variant="h3">Heading 3</x-mbc::typography>
    <x-mbc::typography variant="h4">Heading 4</x-mbc::typography>
    <x-mbc::typography variant="h5">Heading 5</x-mbc::typography>
    <x-mbc::typography variant="h6">Heading 6</x-mbc::typography>
    <x-mbc::typography variant="subtitle1">Subtitle 1</x-mbc::typography>
    <x-mbc::typography variant="subtitle2">Subtitle 2</x-mbc::typography>
    <x-mbc::typography variant="body1">Body 1 text</x-mbc::typography>
    <x-mbc::typography variant="body2">Body 2 text</x-mbc::typography>
    <x-mbc::typography variant="button">BUTTON TEXT</x-mbc::typography>
    <x-mbc::typography variant="caption">Caption text</x-mbc::typography>
    <x-mbc::typography variant="overline">OVERLINE TEXT</x-mbc::typography>
</div>

Headings link

Heading variants (h1-h6) are used for page and section titles. They automatically render as the corresponding HTML heading element.

H1 - Display Large (57px)

For main page titles or hero sections. Largest size.

H2 - Display Medium (45px)

For important section headings or secondary hero.

H3 - Display Small (36px)

For sub-sections or prominent card headers.

H4 - Headline Large (32px)

For section titles in content area.

H5 - Headline Medium (28px)

For subsection titles or card headers.

H6 - Headline Small (24px)

For minor headings or prominent labels. 

<div style="display: flex; flex-direction: column; gap: 1.5rem;">
    <div>
        <x-mbc::typography variant="h1">H1 - Display Large (57px)</x-mbc::typography>
        <x-mbc::typography variant="body2">
            For main page titles or hero sections. Largest size.
        </x-mbc::typography>
    </div>
    
    <div>
        <x-mbc::typography variant="h2">H2 - Display Medium (45px)</x-mbc::typography>
        <x-mbc::typography variant="body2">
            For important section headings or secondary hero.
        </x-mbc::typography>
    </div>
    
    <div>
        <x-mbc::typography variant="h3">H3 - Display Small (36px)</x-mbc::typography>
        <x-mbc::typography variant="body2">
            For sub-sections or prominent card headers.
        </x-mbc::typography>
    </div>
    
    <div>
        <x-mbc::typography variant="h4">H4 - Headline Large (32px)</x-mbc::typography>
        <x-mbc::typography variant="body2">
            For section titles in content area.
        </x-mbc::typography>
    </div>
    
    <div>
        <x-mbc::typography variant="h5">H5 - Headline Medium (28px)</x-mbc::typography>
        <x-mbc::typography variant="body2">
            For subsection titles or card headers.
        </x-mbc::typography>
    </div>
    
    <div>
        <x-mbc::typography variant="h6">H6 - Headline Small (24px)</x-mbc::typography>
        <x-mbc::typography variant="body2">
            For minor headings or prominent labels.
        </x-mbc::typography>
    </div>
</div>

Body Text link

Body variants are used for regular paragraph text. body1 is the default variant and is suitable for most text content.

Body 1 is the default style for paragraph text. It's 16px with comfortable line-height for reading. Use for main article content or long descriptions.

Body 2 is slightly smaller at 14px. Ideal for secondary text, longer captions, or additional notes. 

<div style="display: flex; flex-direction: column; gap: 1.5rem;">
    <div>
        <x-mbc::typography variant="body1">
            Body 1 is the default style for paragraph text. It's 16px with comfortable line-height 
            for reading. Use for main article content or long descriptions.
        </x-mbc::typography>
    </div>
    
    <div>
        <x-mbc::typography variant="body2">
            Body 2 is slightly smaller at 14px. Ideal for secondary text, 
            longer captions, or additional notes.
        </x-mbc::typography>
    </div>
</div>

Special Variants link

Material Design includes special typography variants for specific use cases: subtitle1, subtitle2, button, caption, and overline.

Subtitle 1

Larger subtitle text, often used below headings. 16px, medium weight.

Subtitle 2

Smaller subtitle text. 14px, medium weight.

BUTTON TEXT

Button labels, all caps. 14px, medium weight.

Caption text

Small annotations, image captions. 12px, regular weight.

OVERLINE TEXT

Category labels, all caps with letter spacing. 10px, medium weight. 

<div style="display: flex; flex-direction: column; gap: 1.5rem;">
    <div>
        <x-mbc::typography variant="subtitle1">Subtitle 1</x-mbc::typography>
        <x-mbc::typography variant="body2">
            Larger subtitle text, often used below headings. 16px, medium weight.
        </x-mbc::typography>
    </div>
    
    <div>
        <x-mbc::typography variant="subtitle2">Subtitle 2</x-mbc::typography>
        <x-mbc::typography variant="body2">
            Smaller subtitle text. 14px, medium weight.
        </x-mbc::typography>
    </div>
    
    <div>
        <x-mbc::typography variant="button">BUTTON TEXT</x-mbc::typography>
        <x-mbc::typography variant="body2">
            Button labels, all caps. 14px, medium weight.
        </x-mbc::typography>
    </div>
    
    <div>
        <x-mbc::typography variant="caption">Caption text</x-mbc::typography>
        <x-mbc::typography variant="body2">
            Small annotations, image captions. 12px, regular weight.
        </x-mbc::typography>
    </div>
    
    <div>
        <x-mbc::typography variant="overline">OVERLINE TEXT</x-mbc::typography>
        <x-mbc::typography variant="body2">
            Category labels, all caps with letter spacing. 10px, medium weight.
        </x-mbc::typography>
    </div>
</div>

Custom HTML Element link

Use the element prop to change the rendered HTML element. By default, the component will choose an appropriate element based on the variant (e.g., h1 for h1 variant, p for body1).

Text with H5 styling but H1 HTML element

Body1 text rendered as div, not p
Button text as inline span 
<div style="display: flex; flex-direction: column; gap: 1rem;">
    <x-mbc::typography variant="h5" element="h1">
        Text with H5 styling but H1 HTML element
    </x-mbc::typography>
    
    <x-mbc::typography variant="body1" element="div">
        Body1 text rendered as div, not p
    </x-mbc::typography>
    
    <x-mbc::typography variant="button" element="span">
        Button text as inline span
    </x-mbc::typography>
</div>

Note: Using custom elements is useful for maintaining proper semantic HTML structure while preserving the desired visual style.

Gutter Bottom link

The gutterBottom prop adds bottom margin to text for proper visual spacing between elements. By default, the component has no margin.

Heading with Gutter Bottom

This paragraph has proper spacing from the heading above because the gutterBottom prop is used.

Heading without Gutter Bottom

This paragraph has no spacing from the heading above. Notice the difference. 

<div>
    <x-mbc::typography variant="h4" gutterBottom>
        Heading with Gutter Bottom
    </x-mbc::typography>
    <x-mbc::typography variant="body1">
        This paragraph has proper spacing from the heading above because the gutterBottom prop is used.
    </x-mbc::typography>
    
    <hr style="margin: 2rem 0; border: none; border-top: 1px solid #e0e0e0;">
    
    <x-mbc::typography variant="h4">
        Heading without Gutter Bottom
    </x-mbc::typography>
    <x-mbc::typography variant="body1">
        This paragraph has no spacing from the heading above. Notice the difference.
    </x-mbc::typography>
</div>

Tip: Use gutterBottom on headings and elements that need visual separation from the next content.

Properties link

mbc::typography link

Name Type Default Description
children string | html Required. The content of the typography.
element string auto The HTML element to render (e.g., p, span, div, h1-h6). Auto-detected based on variant if not specified.
gutterBottom bool false If true, adds bottom margin to the typography.
slot string Content passed via slot attribute instead of children.
variant 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'button' | 'caption' | 'overline' body1 The typographic variant to use.

References link

Edit this page