Skip to main content

Typography

The AWE Typography system provides a consistent and accessible way to style text across your application. It includes a set of components for different typography needs, from headings to body text, labels, and more.

Basic Usage​

The typography system includes several components that can be used individually or together to create a cohesive text hierarchy:

<awe-heading variant="h1" type="bold">This is a Heading 1</awe-heading>
<awe-body-text type="body-test">This is standard body text used for paragraphs and general content.</awe-body-text>

<awe-heading variant="h4" type="regular">Subtitle Example</awe-heading>
<awe-labels type="label">Form Field Label</awe-labels>

<awe-caption label="A caption for an image or figure" inputId="example-caption" ariaLabel="example caption"></awe-caption>

Headings​

Headings help establish a clear content hierarchy. AWE provides heading components from H1 to H6, plus display headings and subtitles.

<!-- Heading Levels -->
<awe-heading variant="h1" type="bold">Heading 1 Bold</awe-heading>
<awe-heading variant="h1" type="regular">Heading 1 Regular</awe-heading>

<awe-heading variant="h2" type="bold">Heading 2 Bold</awe-heading>
<awe-heading variant="h2" type="regular">Heading 2 Regular</awe-heading>

<!-- Additional headings h3-h6 -->

<!-- Display and Subtitle Headings -->
<awe-heading variant="display" type="bold">Display Heading Bold</awe-heading>
<awe-heading variant="display" type="regular">Display Heading Regular</awe-heading>

<awe-heading variant="s1" type="regular">Subtitle 1</awe-heading>
<awe-heading variant="s2" type="regular">Subtitle 2</awe-heading>

Heading Properties​

PropertyTypeDefaultDescription
variant'display' | 's1' | 's2' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''h1'The heading level or style
type'regular' | 'bold''regular'The weight of the heading text

Body Text​

Body text is used for main content, paragraphs, and general text elements.

<awe-body-text type="body-test">
  This is a standard paragraph of body text. The body text component is used for the main content of your application. 
  It provides consistent styling for paragraphs and general text content.
</awe-body-text>

<!-- Additional paragraphs as needed -->

Body Text Properties​

PropertyTypeDefaultDescription
typestring'body-test'The type of body text

Inline Text Elements​

Inline elements provide special formatting within text, such as links, emphasized text, and more.

<awe-body-text type="body-test">
  Standard text can include 
  <awe-inline-element label="Linked Text" inputId="demo-link">
    <a href="javascript:void(0)" class="link">hyperlinks</a>
  </awe-inline-element> 
  to navigate to other pages or resources.
</awe-body-text>

<!-- Additional inline element examples -->

Inline Element Properties​

PropertyTypeDefaultDescription
labelstring''Describes the inline element (used for accessibility)
inputIdstring''Unique identifier for the element

Captions and Labels​

Captions and labels provide supporting text for UI elements, form fields, images, and other content.

<!-- Caption Examples -->
<awe-caption label="Figure 1: Data visualization chart" inputId="chart-caption" ariaLabel="chart caption"></awe-caption>

<!-- Label Examples -->
<awe-labels type="label">Username</awe-labels>

Caption Properties​

PropertyTypeDefaultDescription
labelstring''The caption text
inputIdstring''Unique identifier for the caption
ariaLabelstring''Accessible label for screen readers

Label Properties​

PropertyTypeDefaultDescription
typestring'label'The type of label

Typography Usage Guidelines​

Hierarchy​

  • Use heading levels (H1-H6) consistently to establish a clear content hierarchy
  • Limit the use of Display headings to main page titles or hero sections
  • Reserve Subtitle components for secondary information below main headings

Readability​

  • Maintain proper contrast between text and backgrounds (minimum 4.5:1 ratio for normal text)
  • Use body text for paragraphs and main content
  • Limit line length to 60-80 characters for optimal readability
  • Use captions for supplementary information like image descriptions

Accessibility​

  • Use semantic heading levels in the correct order (H1, H2, H3, etc.)
  • Provide descriptive ariaLabel properties for non-text elements
  • Ensure interactive text (like links) has sufficient visual distinction
  • Use labels for form fields with clear descriptions

Consistency​

  • Use the typography components consistently across your application
  • Avoid mixing too many font weights, sizes, or styles
  • Follow established patterns for similar content types

Advanced Typography Customization​

While the AWE Typography components provide a consistent system, you may need to customize typography for specific needs. Consider these approaches:

  • Use the available component properties for standard adjustments
  • Apply CSS classes for specialized formatting needs
  • Create composite components for repeated typography patterns
  • Use theme variables when available for systematic changes