• HTML Fonts
  • Font Styles & Usage
  • Font Library
  • Font Order
  • Content/Body Font Color
  • Link Colors
  • Site Title and Header Color
• Graphic Fonts created in a Design Program

This guide will explain the technicalities of the font styles which we use on our site. For an explanation of how to implement these styles on your web pages please see the tutorial on the subject.

Font Styles & Usage

Site Title: Text identifying the site. The first thing people will read, the title should contain the department or program name. This text type/class is also used for the title of each page.

Header: Individual headlines within the page itself. This text calls out the major focus of a page/section. The header should be used sparingly on a page to identify major changes of content or tone.

Sub-Header: Used more freely, the sub-header identifies sub-sections or headlines individual paragraphs in longer features and articles.

Content/Body Text: The primary text size for content within a page.

Small Text: Used within tables, the home page, boxes etc.

Table Text: For use inside of tables.

You may apply these styles in Dreamweaver using CSS. Please see the CSS tutorial for a complete explanation.

---

---

Graphic Fonts

The fonts below are School of Medicine, and UCSF, standard fonts. They are mainly used in the graphic design of titles and logos.

Two styles from the Helvetica San Serif Font Family
Helvetica Regular and Helvetica Regular in Caps:

Two styles from the Helvetica Neue Font Family
Helvetica Neue Thin and Helvetica Neue Thin Extended:

Two styles from the Bodini font family
Bodini BE Light and Bodini BE Medium Italic: