Drexel University utilizes three primary typefaces on websites:

1. Futura Bold Condensed:

   Sample heading set in Futura Condensed

2. Arial:

   Sample paragraph line set in Arial.

3. Georgia Italic:

   Sample paragraph line set in Georgia Italic.

These typefaces are set automatically in Drexel University's primary stylesheets and cannot be manipulated by the content author.

• Futura should always be display using the condensed weight in uppercase lettering, which is automatically controlled by the primary stylesheets.
• Arial is the default typeface for most page text.
• Georgia must be set in italics, and should be used sparingly.

Font Sizes for Screen

1. Utility links - Arial - 11px
2. Site name - Futura - 22px
3. Navigation bar - Futura - 14px
4. Breadcrumbs - Arial - 11px
5. Navigation section title - Futura - 1.9em
6. Sub navigation - Arial - 12px
7. Content title - Futura - 36px
8. Content sub title - Futura - 1.6em
9. Content copy - Arial - 1.1em
10. Sidebar title - Futura - 1.9em
11. Sidebar copy - Arial - 1.1em
12. Buttons - Futura - 1em
13. Footer links - Arial - 11px
14. Footer address - Arial - 1.1em

Headings are commonly referred to by their HTML element name. For example, the first heading is called an "H1 element."

1. Heading Level 1 - H1 element
   • Font family - Futura
   • Font color - #07294D
   • Font size - 36px
   • Text transform - uppercase
2. Heading Level 2 - H2 element
   • Font family - Futura
   • Font color - #07294D
   • Font size - 1.6em
   • Text transform - uppercase
3. Heading Level 3 - H3 element
   • Font family - Arial
   • Font color - #000000
   • Font size - 1.1em
4. Heading Level 4 - H4 element
   • Font family - Arial
   • Font color - #000000
   • Font size - 14px
   • Font style - italics
5. Heading Level 5 - H5 element
   • Font family - Arial
   • Font color - #000000
   • Font size - 14px
   • Text transform - uppercase
6. Heading Level 6 - H6 element
   • Font family - Arial
   • Font color - #000000
   • Font size - 100%

By default, paragraphs fill the width of their parent content container. The specifications for type within paragraphs on Drexel websites are as follows:

• Font family - Arial
• Font color - #000000
• Font size - 1.1em
• Line height - 1.5em
• Margin bottom - 20px

Call Outs / Pull Quotes can be used to highlight copy within the content area.

• Font family - Futura
• Font color - #07294D
• Text transform - uppercase

1. Quote
   • Font size - 60px
2. Title
   • Font size - 14px
3. Quote Element
   • Inserted using CSS pseudo-elements

Example HTML

Buttons can be used to draw attention to links.

1. Arrow Icon
   • Background color - #FFC600
   • Arrow color - #07294D
   • CSS background image
2. Text
   • Font family - Futura
   • Font size - 1em
   • Font color - #07294D
   • Font hover color - #006699
   • Font hover decoration - underline

Add a class to the link (class="more-button"). Refer to the Advanced Class List for details.