Fonts for Digital Media Drexel University utilizes three primary typefaces on websites: Futura Bold Condensed: Sample heading set in Futura Condensed Arial: Sample paragraph line set in Arial. 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 Utility links - Arial - 11px Site name - Futura - 22px Navigation bar - Futura - 14px Breadcrumbs - Arial - 11px Navigation section title - Futura - 1.9em Sub navigation - Arial - 12px Content title - Futura - 36px Content sub title - Futura - 1.6em Content copy - Arial - 1.1em Sidebar title - Futura - 1.9em Sidebar copy - Arial - 1.1em Buttons - Futura - 1em Footer links - Arial - 11px 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." Heading Level 1 - H1 element Font family - Futura Font color - #07294D Font size - 36px Text transform - uppercase Heading Level 2 - H2 element Font family - Futura Font color - #07294D Font size - 1.6em Text transform - uppercase Heading Level 3 - H3 element Font family - Arial Font color - #000000 Font size - 1.1em Heading Level 4 - H4 element Font family - Arial Font color - #000000 Font size - 14px Font style - italics Heading Level 5 - H5 element Font family - Arial Font color - #000000 Font size - 14px Text transform - uppercase 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 Quote Font size - 60px Title Font size - 14px 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. Arrow Icon Background color - #FFC600 Arrow color - #07294D CSS background image 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