Font Face

The global font face for HPU website is Inter.

Inter font face is under SIL Open Font License v1.1 - 26 February 2007.

Headings

The HTML heading levels from h1 through h6.

NOTE: Avoid skipping a heading level. Maintaining a sequential heading structure is vital for ensuring accessibility, improving usability, enhancing SEO, and adhering to web standards. It ensures that all users, regardless of their abilities or the tools they use, can navigate and understand the content effectively.

<h1>Heading 1 <small class="hpu-text-gray hpu-pl-1">h1 small</small></h1>
<h2>Heading 2 <small class="hpu-text-gray hpu-pl-1">h2 small</small></h2>
<h3>Heading 3 <small class="hpu-text-gray hpu-pl-1">h3 small</small></h3>
<h4>Heading 4 <small class="hpu-text-gray hpu-pl-1">h4 small</small></h4>
<h5>Heading 5 <small class="hpu-text-gray hpu-pl-1">h5 small</small></h5>
<h6>Heading 6 <small class="hpu-text-gray hpu-pl-1">h6 small</small></h6>

Heading as classes are also available to use in case the same size text as a heading is desired, or the heading tags are not available to use for certain reasons.

<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h3">Heading 3</p>
<p class="h4">Heading 4</p>
<p class="h5">Heading 5</p>
<p class="h6">Heading 6</p>

Display Headings

Sometimes, the default sizes of heading elements are so similar that users might be tempted to skip a heading level to create visual distinction. For instance, if h1 is used for the page title, and h2 for section titles, the size difference might be minimal, making these headings appear almost identical. This visual similarity can lead users to bypass intermediate heading levels, such as jumping from h1 to h3, which compromises both accessibility and the semantic structure of the content. To avoid this issue, the Display Headings classes must be used to adjust the size of the headings and to create a clear distinction between the heading levels, while maintaining the correct semantic order and being accessible.

<p class="display-1">Display 1</p>
<p class="display-2">Display 2</p>
<p class="display-3">Display 3</p>
<p class="display-4">Display 4</p>
<p class="display-5">Display 5</p>
<p class="display-6">Display 6</p>

The Hawaiian Okina (Inverted Apostrophe)

There are 2 ways to add the Hawaiian ʻOkina:

• Use an HTML Entity: Use ʻ HTML entity.
• Call the ʻOkina Class: Use the .hpu-okina class to produce the ʻokina.

When to use HTML Entity Over the CSS Class to Produce ʻOkina?

• Use the ʻ HTML entity if the ʻokina should appear as an actual content on the page.
  • This approach is more recommended because the ʻokina is included directly in the webpage content. This ensures that assistive devices won't skip reading it, ensuring accessibility compliance.
  • Also, doing it this way ensures the copy-paste friendliness, since it's an actual content in a webpage.
• Use the .hpu-okina class if the purpose of the web content is decorative only, such as symbols or stylistic embellishment, which is not a core document content.
  • Use only if the ʻokina symbol is used visually but not semantically.
  • This is great for icons, bullets lists, quote marks, etc.
  • This class uses a CSS property ::before, which is only for visuals. Assistive devices will skip reading this.

In the examples for each of the ʻokina type below, try selecting each text to see the difference between them.

<p>Hawai&#699;i Pacific University</p>
<p>Kalaniana&#699;ole Highway</p>
<p>&#699;Ōlelo Hawai&#699;i</p>
<p>O&#699;ahu Island</p>

<p>Hawai<span class="hpu-okina"></span>i Pacific University</p>
<p>Kalaniana<span class="hpu-okina"></span>ole Highway</p>
<p><span class="hpu-okina"></span>Ōlelo Hawai<span class="hpu-okina"></span>i</p>
<p>O<span class="hpu-okina"></span>ahu Island</p>

Font Weight

Quickly change font weight with font weight utility classes: .hpu-font-{light | medium | bold | black}.

<p class="hpu-font-light">Light</p>
<p>Normal</p>
<p class="hpu-font-medium">Medium</p>
<p class="hpu-font-bold">Bold</p>
<p class="hpu-font-black">Black</p>

Use strong to define text with strong importance:

<p>This text is super <strong>strong</strong>!</p>

Text Alignment

Positioning of text within a block or a line in a webpage: .hpu-text-{left | center | right}.

<p>Left</p>
<p class="hpu-text-center">Center</p>
<p class="hpu-text-right">Right</p>

Word Break

Handle long words by breaking them at arbitrary points if necessary to prevent overflow: .hpu-text-break.

<p class="hpu-text-break">mmmmmmmmmmmmmnmnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbmbmbnmbbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmbnmmbnmbnmbnmbnmbnmbnmbnmmbnmbnmbnmbnmbnmbnmbnm</p>

Text Transform

Used to control the capitalization of text within an element.

<p class="hpu-text-lowercase">LOWERCASED TEXT!</p>
<p class="hpu-text-uppercase">uppercased text</p>
<p class="hpu-text-capitalize">capitalize each word here.</p>

Text Indent

Adds indentation to a paragraph: .hpu-text-indent. This class provides 3rem of text-indent value.

<p class="hpu-text-indent">...</p>

Text Emphasis

Use the HTML <em> tag to italicize or provide emphasis to any text.

<p>You <em>have</em> to hurry up!</p>
<p>We <em>cannot</em> live like this!</p>

Lists

By default, ol and ul only provides either bullets or numbers on a list without indentation due to CSS reset. Use .hpu-list class to add 40px of indentation to either ul or ol.

<ul class="hpu-list">...</ul>

<ol class="hpu-list">...</ol>

To remove the bullets for ul, simply add the unbulleted class.

<ul class="unbulleted hpu-list">...</ul>

Links

Add behavior to your links rather than using the default.

<p>
    <a href="...">
        Hover Me
    </a>
</p>

<p>
    <a href="..." class="underline">
        Hover Me
    </a>
</p>

<p>
    <a href="..." class="underline-hover">
        Hover Me
    </a>
</p>

<p>
    <a href="...">Link 1</a>
    <a href="..." class="active">Active Link</a>
    <a href="...">Link 3</a>
    <a href="...">Link 4</a>
</p>

<p>
    <a href="..." class="active active-link-1st">Teal</a>
    <a href="..." class="active active-link-2nd">Light Teal</a>
    <a href="..." class="active active-link-3rd">Blue Gray</a>
    <a href="..." class="active active-link-4th">Ocean Blue</a>
</p>