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

Typography

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