Avenir

Avenir is a functional typeface that best represents the voice of the university and enhances the strength of FAU’s brand with consistent use.

Different sizes and weights allow for various uses without degrading the FAU brand. Correct and consistent use of this official typeface helps reinforce the university’s identity.

Avenir-Light SHOW CODE
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”
Avenir-Book SHOW CODE
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”
Avenir-Roman SHOW CODE
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”
Avenir-Heavy SHOW CODE
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”
 

Secondary

Superclarendon

Superclarendon is a secondary typeface that is available for specialty use and helps enhance the strength of our brand when paired with Avenir.

Different sizes and weights allow for various uses without degrading the FAU brand. Correct and consistent use of this official typeface helps reinforce the university’s identity. Superclarendon may only be used on landing pages as headings and designed assets.

Superclarendon-Light SHOW CODE

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”

Superclarendon-Light Italic SHOW CODE

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”

Superclarendon-Regular SHOW CODE

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”

Superclarendon-Regular Italic SHOW CODE

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”

Superclarendon-Bold SHOW CODE

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”

Superclarendon-Bold Italic SHOW CODE

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”

Superclarendon-Black SHOW CODE

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”

Superclarendon-Black Italic SHOW CODE

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWYZ
1234567890!@#$%^*()_+:;”

 

Hierarchy

Prioritize all messaging on the page by designating appropriate headings H1-H6.

There can only be one H1, followed by H2, H3 and so on, including designation of paragraphs and lists.

Page/Post Heading h1 SHOW CODE

H1 tags should be reserved for page titles.

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT. VEL QUOD ALIAS IPSUM ILLUM IURE DOLORE INCIDUNT DISTINCTIO MODI.

If you need to use multiple H1 on a page, use the class .h1 instead. SHOW CODE
H1 class works
Page/Post Heading h2 SHOW CODE

To be used as subheadings for content on the page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel quod alias ipsum illum iure dolore incidunt distinctio modi, esse, minima mollitia in deleniti, ducimus, ipsam repellendus similique fuga hic veniam.

Page/Post Heading h3 SHOW CODE

Best used as paragraph titles.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel quod alias ipsum illum iure dolore incidunt distinctio modi, esse, minima mollitia in deleniti, ducimus, ipsam repellendus similique fuga hic.

Page/Post Heading h4 SHOW CODE

Best used as paragraph titles.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel quod alias ipsum illum iure dolore incidunt distinctio modi, esse, minima mollitia in deleniti, ducimus, ipsam repellendus similique fuga hic.

Tag: p SHOW CODE

To be used for body copy. Most of the type used throughout the website is in this tag.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ab, sequi dolor reiciendis obcaecati odio eveniet veritatis rerum illo, quisquam. Consequuntur voluptas animi praesentium fugiat, neque laboriosam quaerat maiores at.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptate facilis sint voluptas illo ex possimus nam sapiente rem rerum, explicabo natus molestiae, illum expedita hic, eius ipsam? Ad, facilis.

Tag: ul SHOW CODE

To be used for unordered lists (lists with bullet points)

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus minima asperiores incidunt libero itaque.
  • Omnis et ex, voluptatum maxime ab excepturi praesentium corporis ratione id perspiciatis nesciunt.
  • Nostrum sint at temporibus impedit molestias voluptas in debitis earum dolorum numquam harum est iusto ipsam, fuga iste provident odit, quas recusandae fugit sit a possimus et eius consectetur! Id.
Tag: ol SHOW CODE

To be used for ordered lists (lists with numbers).

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus minima asperiores incidunt libero itaque.
  2. Omnis et ex, voluptatum maxime ab excepturi praesentium corporis ratione id perspiciatis nesciunt.
  3. Nostrum sint at temporibus impedit molestias voluptas in debitis earum dolorum numquam harum est iusto ipsam, fuga iste provident odit, quas recusandae fugit sit a possimus et eius consectetur! Id.
Tag: small SHOW CODE

To be used for image descriptions, credits, or information that does not need to be prominently displayed.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ab, sequi dolor reiciendis obcaecati odio eveniet veritatis rerum illo, quisquam. Consequuntur voluptas animi praesentium fugiat, neque laboriosam quaerat maiores at.
Blockquote SHOW CODE

To be used for quotes.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ab, sequi dolor reiciendis obcaecati odio eveniet veritatis rerum illo, quisquam. Consequuntur voluptas animi praesentium fugiat, neque laboriosam quaerat maiores at.
Separator SHOW CODE

The page separator is a solid blue line that is used to divide widget titles from their content. Can also be used to separate content on a webpage


Separator Small SHOW CODE