UCLA Web Components

Headings

bitbucket Report an Issue Slack Join the Slack Discussion

These are heading styles. The UCLA title headings are Helvetica with bold font-styles applied. This combination is used for high readability across digital devices.

Do’s

  • Use the correct header tags when possible
  • Use the respective “h1” - “h6” classnames to inherit respective header styles (i.e with CMS that makes it hard to customize HTML semantics)

Don’ts

  • Don’t use “h1” - “h6” classnames to incorrectly alter styles astray from the brand guidelines

Heading 1

<!--
Desktop: font-size: 2.25rem; line-height: 1.125;
Mobile: font-size: 1.75rem; line-height: 1.125; -->
<h1>Heading 1</h1>
<!-- Class name styles inheritance -->
<!-- <p class="h1">Heading 1</p> -->

Heading 2

<!--
Desktop: font-size: 1.75rem; line-height: 1.125px;
Mobile: font-size: 1.75rem; line-height: 1.125; -->
<h2>Heading 2</h2>
<!-- Class name styles inheritance -->
<!-- <p class="h2">Heading 2</p> -->

Heading 3

<!-- Desktop & Mobile: font-size: 1.5rem; line-height: 1.125; -->
<h3>Heading 3</h3>
<!-- Class name styles inheritance -->
<!-- <p class="h3">Heading 3</p> -->

Heading 4

<!-- Desktop & Mobile: font-size: 1.25rem; line-height: 1.125; -->
<h4>Heading 4</h4>
<!-- Class name styles inheritance -->
<!-- <p class="h4">Heading 4</p> -->
Heading 5
<!-- Desktop & Mobile: font-size: 1rem; line-height: 1.125; -->
<h5>Heading 5</h5>
<!-- Class name styles inheritance -->
<!-- <p class="h5">Heading 5</p> -->
Heading 6
<!-- Desktop & Mobile: font-size: 0.8rem; line-height: 1.125; -->
<h6>Heading 6</h6>
<!-- Class name styles inheritance -->
<!-- <p class="h6">Heading 6</p> -->