Typography
Primary Typeface

The primary typeface is Whitney-Light by Hoefler & Frere-Jones (www.typography.com). It is used for headlines, subheads, titles, and calls-to-action on the website. Although the Whitney font family comes with variety of weights, the AAU site only uses Whitney-Light.

Whitney-Light

Secondary Typeface

Merriweather is the secondary typeface and was designed to be a web font that is pleasant to read on-screen. It is chosen to be the partner font to Whitney-Light and it is used in body and other editorial situations. The AAU site only uses two weights: Merriweather-Light and Merriweather-Bold.

Merriweather-Light

Merriweather-Light-Italic

Merriweather-Bold

Merriweather-Bold-Italic

Colors

This color palette was chosen to be softer, more inviting, and less harsh for users. Please use the bolder colors sparingly and for the primary action(s) of a given page/function. Your use of color should accent the student success stories, rather than distract from them.

White

#FFFFFF

Gray Lighter

#F2F2F2

Gray Light

#DEDEDE

Gray Middle

#8C8C8C

Gray

#5A5A5A

Gray Dark

#373737

Gray Darker

#141414

Black

#000000

Gray AAU

#191919

Green

#64C178

Red

#D50013

Red Light

#F00314

Red Dark

#960005

Red AAU

#ED1B2E

Heading

This Is A Title H1 (24px36px48px)

This Is A Title H2 (22px28px42px)

This Is A Title H3 (20px24px32px)

This Is A Title H4 (18px20px24px)

This Is A Title H5 (14px15px16px)
This Is A Title H6 (12px13px14px)

p tag (12px13px14px)

dolor sit amet, consectetur adipiscing elit.

dolor sit amet, consectetur adipiscing elit. Nullam a risus id metus tincidunt fringilla ac in turpis. Mauris viverra magna sit amet elit congue, ut blandit quam fringilla. Nunc congue turpis at nisi commodo venenatis.
Phasellus vulputate eros in est lacinia blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ultrices hendrerit viverra. Nam rhoncus est quis odio interdum consequat id eu diam. Phasellus sagittis, sem eu dictum dignissim, mauris sem ultricies ante, at fermentum erat diam rutrum dui. Curabitur gravida vestibulum ligula, id rhoncus turpis auctor vitae. Duis ac magna sed libero vulputate gravida at vitae metus. Nam et iaculis risus. Integer gravida est nec justo faucibus, non gravida metus elementum.

p.lead tag (14px15px16px)

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sapien ante, feugiat sit amet quam eget, consequat congue arcu. Pellentesque porttitor bibendum aliquet. Donec sit amet leo molestie, sagittis orci quis, malesuada arcu. Sed eleifend ante ac eleifend consectetur. Praesent porttitor id libero et imperdiet. Suspendisse sit amet nisi a urna vehicula blandit. Nunc at lacus eget sapien suscipit gravida ornare vel lorem. Cras pulvinar lectus semper egestas posuere. Nulla elit turpis, faucibus nec ullamcorper quis, egestas vel nibh. Aenean non aliquam dolor.

p.small tag (10px11px12px)

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed sapien ante, feugiat sit amet quam eget, consequat congue arcu. Pellentesque porttitor bibendum aliquet. Donec sit amet leo molestie, sagittis orci quis, malesuada arcu. Sed eleifend ante ac eleifend consectetur. Praesent porttitor id libero et imperdiet. Suspendisse sit amet nisi a urna vehicula blandit. Nunc at lacus eget sapien suscipit gravida ornare vel lorem. Cras pulvinar lectus semper egestas posuere. Nulla elit turpis, faucibus nec ullamcorper quis, egestas vel nibh. Aenean non aliquam dolor.

Strong text

Strong text Italic

Italic text Strong

Italic text

ul tag
  • Pellentesque ullamcorper tortor vitae justo pharetra, nec fringilla nisi varius.
  • Vivamus vehicula erat in quam placerat, id bibendum ipsum aliquet.
  • Duis iaculis metus ut est sodales, eget iaculis tortor adipiscing.
  • Proin nec quam sed neque dignissim feugiat lacinia quis erat.
  • Donec a lectus ut nisi faucibus feugiat.
  • Sed porta nisl sed aliquet elementum.
ol tag
  1. Pellentesque ullamcorper tortor vitae justo pharetra, nec fringilla nisi varius.
  2. Vivamus vehicula erat in quam placerat, id bibendum ipsum aliquet.
  3. Duis iaculis metus ut est sodales, eget iaculis tortor adipiscing.
  4. Proin nec quam sed neque dignissim feugiat lacinia quis erat.
  5. Donec a lectus ut nisi faucibus feugiat.
  6. Sed porta nisl sed aliquet elementum.
list links

sub tag

sup tag

legend tag

Blockquote
Nulla lacinia ipsum quam, non varius libero eleifend id. Ut interdum enim leo, quis accumsan magna sagittis at. Nulla lacinia ipsum quam, non varius libero eleifend id. Ut interdum enim leo, quis accumsan magna sagittis at. Nulla lacinia ipsum quam, non varius libero eleifend id. Ut interdum enim leo, quis accumsan magna sagittis at. Nulla lacinia ipsum quam, non varius libero eleifend id. Ut interdum enim leo, quis accumsan magna sagittis at.
<blockquote> Nulla lacinia ipsum quam, non varius libero eleifend id.</blockquote>
Horizontal line

<div class="hr">
  <hr/>
</div>
logo
large (20px24px32px)
<div class="logo">
  <span class="icon-logo"></span>
  <span class="icon-wordmark"></span>
  <span class="placeholder">Academy of Art University - Founded in San Francisco in 1929</span>
</div>
      
small (20px20px24px)
<div class="logo small">
  <span class="icon-logo"></span>
  <span class="icon-wordmark"></span>
  <span class="placeholder">Academy of Art University - Founded in San Francisco in 1929</span>
</div>

Sign In