Typography

Typography is an essential part of the UCSF visual system. When used consistently, it unifies messaging and creates familiarity. Helvetica Neue continues to be our primary typeface, chosen to clearly reflect the boldness and impact of UCSF. Granjon is our secondary typeface, chosen to reflect the humanity and inclusiveness of UCSF. Used together, each typeface creates a balanced look and feel for all of our messaging. These guidelines will help you use our typefaces for maximum legibility while reinforcing ucsf in the eyes of our audiences.

TYPOGRAPHY: GRANJON AND HELVETICA NEUE

 

Primary Typeface

Helvetica Neue is our primary typeface. As the primary typeface, it is important that most UCSF communications use Helvetica Neue.

 

The default weight to use is Helvetica Neue Light. In cases where legibility is an issue, use Helvetica Neue Roman. The supporting weights of Helvetica Neue may also be used, but usually for emphasis in smaller applications such as subheads, captions, tables, charts and folios.

 

The manner in which we use typography is important in ensuring our communications are thoughtful and deliberate. This selection of type weights best represents attributes of our brand positioning: our boldness, impact, humanity and inclusiveness. Though other weights of Helvetica Neue are available, limit use to those weights outlined here to create a consistent impression of UCSF.

 

Title and sentence case are preferred. Only use all caps in small instances such as charts, labels and UI navigation. Type should never be altered by adding outlines, drop shadows or effects. Always set ® and ™ as superscript.

 

DEFAULT WEIGHT

 

DEFAULT WEIGHT HELVETICA NEUE
SUPPORTING WEIGHTS

SUPPORTING WEIGHTS HELVETICA NEUE

Secondary Typeface

Granjon is our secondary typeface. Granjon, primarily used in large headlines and titles, introduces a subtle warmth that pairs well with Helvetica Neue.

 

The default weight to use is Granjon Roman. The supporting weights of Granjon may also be used, but usually for emphasis in smaller applications such as subheads, captions, tables, charts and folios.

 

Title case is preferred. Only use all caps in small instances such as charts, labels and UI navigation. Type should never be altered by adding outlines, drop shadows or effects. Always set ® and ™ as superscript.

 

DEFAULT WEIGHT

DEFAULT WEIGHT
 
SUPPORTING WEIGHTS

SUPPORTING WEIGHTS
request a Brand Font license

University Relations has purchased a limited number of brand font licenses for UCSF employees who are directly involved in the creation of marketing and communication materials. To request a license, please submit a brand font request form.

PDF iconUCSF Font Request Form_2015.pdf

 

For all other users, including external designers, these font licenses are available for purchase online: Helvetica Neue and Granjon.

 

For webfonts, we recommend licensing the Helvetica Neue and Granjon brand fonts directly from myfonts.com. They have a range of options that should work for you based on your site design and traffic needs. Contact identity@ucsf.edu for guidance.

Type Hierarchy

Consistent application of type fonts and styles allows our audiences to recognize materials from UCSF with ease. Having a hierarchy for type expression builds consistency and a unified feel across communications which, in turn, reinforces our brand recognition among our audiences.

 

Our type hierarchy applies to communications across all channels. Large headlines should always use Granjon Roman or Helvetica Neue Light set in title case. Subheads may use Helvetica Neue Light or Roman title case, depending on scale relationships. Large blocks of copy on covers should use Helvetica Neue Light sentence case.

 

LARGE HEADLINES AND SMALL HEADLINES

Any primary headline 20 point sizes or over can be in Granjon Roman. Use Helvetica Neue Light if the headline size is under 20.

Primary headlines 20 point sizes or over can also be in Helvetica Neue Light.

ADDITIONAL COVER INFORMATION

Use Helvetica Neue Light for any additional cover information.

QUOTES

TYPE HIERARCHY: QUOTES

Quotes of 20 point sizes or larger may use Granjon Roman sentence case.

 

Quotes of smaller than 20 point sizes should use Helvetica Neue Light sentence case.

 

Name attributions should be Helvetica Neue Bold with titles and organizations in Helvetica Neue Light.

SIDEBARS

Sidebar copy should also be Helvetica Neue Light with sidebar headers in Helvetica Neue Bold title case.

 

In instances where more weight is needed (web, email, etc.) Helvetica Neue Roman can be used.


Leading / Tracking

The space you give between lines of copy, or the space between letters contribute to the characteristics and legibility of typography. The application of leading and tracking is different for each typeface at different type sizes. Below you will find best practices around leading and tracking for Helvetica Neue and Granjon.

 

Leading is the space between lines of copy, measured from baseline to baseline.


Tracking is the spacing between a range of characters.

 

LEADING

Tracking


Helvetica Neue — Size / Leading / Tracking

 

SMALL POINT SIZE

All leading is not equal. As a general rule of thumb: the smaller the point size, the larger the leading; the higher the point size, the tighter the leading. For body copy, leading will depend on the size of type you use, but typically should be set between 120–130% of the point size. This will ensure legibility. For example, if you set a line of 8 point type, your leading should be set to 10 point.

MEDIUM POINT SIZE

For body type sizes 10 points or larger, leading will be closer to 120%. As type becomes larger, less space is required between lines for readability. For example, if you set a line of 15 point type, your leading should be set to 18 point. Use the leading conversion charts above for reference. The tracking for Helvetica Neue can generally be set to 10. Adjust tracking where needed based on application.

LARGE POINT SIZE

For large headers or titles, tighter leading between 110—120% will elevate the level of sophistication in your typography. For example, a header set at 22 point type with 25 point leading reads with clarity and is typographically unified. For type sizes 30 points or larger, leading will be closer to 100%.


Granjon — Size / Leading / Tracking

 

BODY

To ensure maximum legibility, Helvetica Neue is the preferred typeface for all body copy. In some instances, Granjon may be necessary for body copy to soften or enhance a story (e.g. editorial, magazine). When appropriate for use as body copy, the minimum point size of Granjon should not be less than 9 points for legibility.

HEADLINES / QUOTES

When used for headlines or quotes, Granjon should be set in a larger font size where applicable. The recommended size is 20 point or larger. Set at 20 point size or larger, the leading should be 100% of the point size (20 point type with 20 point leading) and the tracking should be tightened to -10 point.

LARGE HEADLINE

For large headers or titles, tighter leading at 100% of point size will elevate the level of sophistication in your typography. Use this approach for type over 35 point size. For example, a header set at 50 point type with 50 point leading and -10 point tracking reads with clarity and is typographically unified.


Primary Typeface Substitute

In cases where Helvetica Neue is not available, Arial should be used as a substitute. These cases may include digital applications such as HTML emails, Word documents or digital presentations (such as PowerPoint) which cannot embed fonts.

 

There are two preferred weights for Arial, each with an italic version: Regular and Bold. The default weight to use is Arial Regular. The Bold weight of Arial may also be used, but usually for emphasis in smaller applications such as subheads captions, tables, charts and folios. Title and sentence case are preferred. Only use all caps in small instances such as charts, labels and UI navigation. Type should never be altered by adding outlines, drop shadows or effects. Always set ® and ™ as superscript.

 

DEFAULT WEIGHT

DEFAULT WEIGHT Arial
 
Supporting Weights

SUPPORTING WEIGHTS arial

Secondary Typeface Substitute

In cases where Granjon is not available, Garamond should be used as a substitute. These cases may include digital applications such as HTML emails, Word documents or digital presentations (such as PowerPoint) which cannot embed fonts.

 

The preferred weight is Garamond Regular. The Bold weight of Garamond may also be used, but usually for emphasis in smaller applications such as subheads, captions, tables, charts and folios. The Italic weight can be used in the editorial expression. Title and sentence case are preferred. Only use all caps in small instances such as charts, labels and UI navigation. Type should never be altered by adding outlines, drop shadows or effects. Always set ® and ™ as superscript.

 

Default weight

DEFAULT WEIGHT GARAMOND
 
SUPPORTING WEIGHTS

SUPPORTING WEIGHTS GARAMOND
Green

Incorrect Usage Examples

DO NOT SET ALL BODY COPY IN BOLD
DO NOT MAKE HEADINGS WITHOUT SUFFICIENT CONTRAST WITH BODY COPY
DO NOT SET BOTH HEADLINE AND BODY COPY IN GRANJON
DO NOT APPLY EXTRA LETTER SPACING ( TRACKING )
DO NOT APPLY MORE THAN THE RECOMMENDED AMOUNT OF LEADING
DO NOT SET BODY COPY IN ALL CAPS