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

H1 Title

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

H2 Title

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

H3 Title

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

H4 Title

<!-- Desktop & Mobile: font-size: 1.25rem; line-height: 1.125; -->
<h4>H4 Title</h4>
<!-- Class name styles inheritance -->
<!-- <p class="h4">H4 Title</p> -->
H5 Title
<!-- Desktop & Mobile: font-size: 1rem; line-height: 1.125; -->
<h5>H5 Title</h5>
<!-- Class name styles inheritance -->
<!-- <p class="h5">H5 Title</p> -->
H6 Title
<!-- Desktop & Mobile: font-size: 0.8rem; line-height: 1.125; -->
<h6>H6 Title</h6>
<!-- Class name styles inheritance -->
<!-- <p class="h6">H6 Title</p> -->