For a better experience, click the Compatibility Mode icon above to turn off Compatibility Mode, which is only for viewing older websites.

Fonts for Digital Media

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 can not 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

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%

Paragraphs

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

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

<blockquote>
Hurricane Sandy is a wake-up call for the urban Northeast
<span>- Cynthia Rosenzweig</span>
</blockquote>

Buttons

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.

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

1. H1: Futura Bold Condensed, #07294D, 36px, uppercase
2. H2: Futura Bold Condensed, #07294D, 1.6em, uppercase
3. H3: Arial Bold, #000000, 1.1em
4. H4: Arial, #000000, 14px, italic
5. H5: Arial, #000000, 14px, uppercase
6. H6: Arial, #000000, 100%

1. Quote
2. Title
3. Quote Element

1. Arrow Icon
2. Text