CWDS AEM Typography — HTML Reference
Scoping Pattern
All AEM typography styles are scoped inside elements whose class contains ads__. The CSS uses [class*=ads__] as the parent selector. Any element with a class like ads__main-section, ads__hero, ads__text-block, etc. creates the scope.
<!-- The ads__ class on the wrapper activates typography styles for all children -->
<div class="ads__main-section">
<h1>This heading is styled by [class*=ads__] h1</h1>
<p>This paragraph is styled by [class*=ads__] p</p>
</div>
Responsive Breakpoint
Desktop overrides apply at @media screen and (min-width: 985px). Below 985px is mobile. All samples below show mobile-first values with desktop overrides noted.
Invert Color Modifier
Use .invert-color on an element or parent to switch text to white for dark backgrounds:
<div class="ads__main-section" style="background: #071d49;">
<h1 class="invert-color">White heading on dark background</h1>
<p class="invert-color">White body text</p>
</div>
<!-- Or on the parent to invert all children -->
<div class="ads__main-section invert-color" style="background: #071d49;">
<h1>White heading</h1>
<p>White body text</p>
</div>
Headlines
Display
Mobile: 2.25rem/2.5rem, fw 700. Desktop: 3rem/3.375rem.
<div class="ads__main-section">
<p class="display-text">Display headline text</p>
</div>
H1
Mobile: 2rem/2.5rem, fw 700. Desktop: 2.5rem/3rem.
<div class="ads__main-section">
<h1>Heading level 1</h1>
</div>
Utility class alternative (same styles on any element):
<div class="ads__main-section">
<span class="h1">Styled as H1 without semantic h1</span>
</div>
H2
Mobile: 1.75rem/2rem, fw 700. Desktop: 2.125rem/2.25rem.
<div class="ads__main-section">
<h2>Heading level 2</h2>
</div>
H3
Mobile: 1.5rem/1.75rem, fw 700. Desktop: 1.75rem/2rem.
<div class="ads__main-section">
<h3>Heading level 3</h3>
</div>
H4
Mobile: 1.25rem/1.5rem, fw 700. Desktop: 1.5rem/1.75rem.
<div class="ads__main-section">
<h4>Heading level 4</h4>
</div>
H5
Mobile: 1.125rem/1.5rem, fw 700. Desktop: 1.25rem/1.5rem.
<div class="ads__main-section">
<h5>Heading level 5</h5>
</div>
H6
Mobile: 1rem/1.25rem, fw 700. Desktop: 1.125rem/1.5rem.
<div class="ads__main-section">
<h6>Heading level 6</h6>
</div>
Claim
Mobile: 1.375rem/1.75rem, fw 400. Desktop: 1.625rem/1.875rem.
<div class="ads__main-section">
<p class="claim-text">Claim statement text</p>
</div>
Stat
Mobile: 2rem/2.5rem, fw 700. Desktop: 2.5rem/3rem.
<div class="ads__main-section">
<p class="stat-text">85%</p>
</div>
Quote
Mobile: 1.25rem/1.75rem, fw 400. Desktop: 1.5rem/2.25rem.
<div class="ads__main-section">
<p class="quote-text">A meaningful quote from a source.</p>
</div>
Universal
Body Large
1.125rem/1.5rem, fw 400. No responsive change.
<div class="ads__main-section">
<p class="body-text-large">Body large paragraph text.</p>
</div>
Body Regular
Mobile: 0.875rem/1rem, fw 400. Desktop: 1rem/1.25rem.
Default <p> inside an ads__ scope renders as body regular. The explicit class produces the same desktop sizing at all breakpoints:
<!-- Default p tag (responsive: smaller on mobile) -->
<div class="ads__main-section">
<p>Body regular paragraph text.</p>
</div>
<!-- Explicit class (1rem at all breakpoints) -->
<div class="ads__main-section">
<p class="body-text-regular">Body regular paragraph text.</p>
</div>
Body Small
0.875rem/1rem, fw 400. No responsive change.
<div class="ads__main-section">
<p class="body-text-small">Body small paragraph text.</p>
</div>
Eyebrow
0.75rem/1rem, fw 700, uppercase, letter-spacing 0.05em.
<div class="ads__main-section">
<span class="eyebrow-text">Eyebrow label</span>
</div>
The eyebrow component (with background) uses a different class:
<div class="ads__eyebrow">
<span class="eyebrow-text">Eyebrow with background</span>
</div>
<!-- Secondary variant -->
<div class="ads__eyebrow secondary">
<span class="eyebrow-text">Secondary eyebrow</span>
</div>
Caption
0.875rem/1rem, fw 400.
<div class="ads__main-section">
<span class="caption-text">Image caption text</span>
</div>
Footnote
0.75rem/1rem, fw 400, color #5b5b5b.
<div class="ads__main-section">
<p class="footnote-text">Footnote or disclaimer text.</p>
</div>
Bold Variants
The production CSS includes bold body variants:
<div class="ads__main-section">
<p class="body-text-large-bold">Bold body large text.</p>
<p class="body-text-regular-bold">Bold body regular text.</p>
<p class="body-text-small-bold">Bold body small text.</p>
</div>
CSS Source
All styles are defined in public/resources/css/abvdesignsystem-themeless-styles.css. Typography rules start around line 430.