UW Credit Union
  • Web Branch
  • Public Site
  • Legacy
  • Docs
  • Base
  • Components
  • Template
  • Share
  • Base
  • Typography
    • Headings
    • Font Sizes
    • Font Styling
    • Line Height
    • Text Alignment
    • Lists
    • Symbols

Base

Typography

UW Credit Union's Marketing-approved fonts for the Web are Adelle (serif) Gotham Narrow (sans-serif). Our fallback font stack is Arial, Helvetica, sans-serif. Our base font size is 16px.

Headings

UW Credit Union sets font sizes for headings <h1> through <h6> and increases top margins if they fall directly after a paragraph.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dolor nisi, sed lobortis neque convallis a. Sed sodales vitae nibh sed mattis.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
View Code Hide Code

Font Sizes

You can override the default font size on any element using the font size utility classes.

Note: Font sizes classes should be applied to block elements only, such as <p> or <div>. Applying these classes to inline elements, such as <span>, will result in incorrect line height.

XLarge

Large

Default Size

Small

XSmall

XXSmall

View Code Hide Code
Show Classes Hide Classes
Element
Class
<h2>
.txt-xlarge
<h3>
.txt-large
<h4>
<h5>
<h6>
.txt-default-size
<small>
.txt-small
Using .txt-caps with this class improves readability.
.txt-xsmall
This class is for special cases only. It's small size affects readability. Using .txt-caps with this class improves readability.
.txt-xxsmall
This class is for special cases only. It's small size affects readability. Using .txt-caps with this class improves readability.

Font Styling

You can override the default font styling on any element using the font style utility classes.

Bold

Semibold

Normal

Normal Italic*

Light


Capital

Small Capital

Xsmall Capital

*Note: Our current web font package only provides italic for the normal font weight.

View Code Hide Code
Show Classes Hide Classes
Class
.txt-bold
Bold text
.txt-semibold
Semibold text
.txt-normal
Normal text; Useful when an element would be light, bold or semibold text by default
.txt-light
Light text
.txt-italic
Italic text
.txt-caps
When displaying a word in all caps, such as on or off, it is important to use this class rather than typing the text in capital letters. A screenreader will spell out a word typed in capital letters, such as "O" "N", instead of reading the word "on".
.txt-caps-small
Small caps; This is a shortcut for class="txt-caps txt-small"
.txt-caps-xsmall
Extra small caps; This is a shortcut for class="txt-caps txt-xsmall"

Line Height

UW Credit Union sets a standard line height for copy. You can override the standard line height for elements that require more compact spacing using the .txt-line-normal class.

A paragraph with standard line height. Cupcake ipsum dolor sit amet cake sweet liquorice marzipan. Donut pie apple pie topping sweet. Lemon drops marshmallow pie halvah marshmallow soufflé cotton candy. Chupa chups pudding pie wafer cheesecake caramels dragée halvah danish.

Text with Less
Line Spacing

View Code Hide Code
Show Classes Hide Classes
Class
.txt-line-normal
This should not be used for a large body of text, but only in special cases where reduced spacing is necessary. This class must be applied to a block element, such as a <p> or <div>, to have the desired effect.

Text Alignment

Left-aligned text.
Center-aligned text.
Right-aligned text.
View Code Hide Code
Show Classes Hide Classes
Class
.txt-left
Left-aligned text
.txt-center
Center-aligned text
.txt-right
Right-aligned text

Lists

Ordered Lists:

  1. Numbered Item 1
    1. Nested
  2. Numbered Item 2
  3. Numbered Item 3

Unordered Lists:

  • Item 1
    • Nested
  • Item 2
  • Item 3
View Code Hide Code
Show Classes Hide Classes
Classes
.rte
Required
A container around any content generated by the rich content editor in the Umbraco back office.

Symbols

Registered symbol can be used in headings and body copy. TM symbol can be used in small headings (h3) and body copy. Note: we are using the actual character in the font for these symbols to provide better screen reader accessibility.

Heading®

Heading®

Heading®

Body Copy®

Heading™

Body Copy™

View Code Hide Code
Show Classes Hide Classes
Classes
.registered
Required for ®
Provides size and placment for the registered symbol; Use this with a <span> instead of a <sup> for easier entry in the Umbraco back office