Typography

UCLA’s brand fonts are sans-serif type styles: Karbon and Helvetica/Arial. These fonts are clean, modern and timeless. They help to visually convey the brand pillars and personality traits.

Karbon Font Family

Alphabet and numerals shown in Karbon Regular, plus one-line samples of Hairline, Thin, Light, Medium, Semibold and Bold
Custom Karbon samples in Thin Reveal, Bold Outline, and Bold Open Outline

About

Karbon is a distinctive geometric font, available in seven weights from hairline through bold. UCLA commissioned three additional custom versions: thin reveal, bold outline, and bold open outline.

  • Karbon Thin Reveal (lower case and numerals only)
  • Karbon Bold Open Outline (all caps and numerals only)
  • Karbon Bold Outline (all caps and numerals only)

Usage

Karbon is the primary font for printed materials. It is required for all major marketing materials and recommended for other print pieces. On websites, Karbon can be used to create graphics.

The custom fonts must be used sparingly and thoughtfully. Because of accessibility concerns, thin reveal should never be used online. Outline fonts can be used online only if the size is large enough to provide sufficient legibility.

How to Get the Font

Karbon fonts can be purchased commercially. UCLA Marketing provides a limited number of font licenses to qualified users. Request them through the UCLA Image Library.

  1. From the website, request access to the Image Library.
  2. Once approved, log into the Library using the given credentials. You may now view the images and fonts in the Library and download images with watermarks for FPO use.
  3. For Brand fonts and hi-res images, submit request with details on where and how you intend to use the asset.
  4. Once approved, you will receive notification from the Image Library Manager to download requested fonts or images.

Helvetica and Arial Font Families

Alphabet shown in Helvetica Regular and Ariel, plus one-line samples of Italic, Bold and Bold Italic.

About

Helvetica is a standard font on Macintosh computers. On the PC platform, Arial is the preferred equivalent. Both fonts were designed to be visually neutral, so they have fewer quirks than Karbon. That’s better for web use, where the approach to typesetting needs to be kept simple.

Usage

Helvetica/Arial is the primary font for online work. Helvetica/Arial is required for all UCLA-branded websites.

A special branded version of Helvetica is used only for the department logo system.

Typesetting

Alphabet shown in Arial, plus one-line samples of Italic, Bold and Bold Italic

In print, designers have the tools to fine-tune spacing between letters, words, and lines of type. Take advantage of that control — but use it to make the content appealing, not to crowd in more words.

Headlines in Karbon

  1. Use Karbon Bold all caps for immediacy and emphasis.
  2. For a more restrained look, use sentence case.
  3. Use Karbon Thin Reveal carefully. Choose a large size, and don’t mix it with other versions of Karbon.
  4. Use Karbon Bold Outline and Bold Open for emphasis only — perhaps to highlight an impressive number or ranking. Limit use to five or six words in these fonts.
  5. If you use Karbon to create online graphics, be sure to provide accurate and complete alt text.
  6. Do not use Karbon Open in graphic elements — it is not ADA compliant.

Body Copy in Karbon

  1. Never use any of the custom fonts for body copy. Even in print they are only legible in display sizes. Karbon Regular is usually best for text.
  2. Karbon needs generous leading, three to five points greater than the size of the type.
  3. Never set body copy smaller than 10 point, even for young audiences. (For older audiences use 11 or 12 point).
  4. Set body copy flush left, ragged right. Don’t center or justify.
  5. Setting the first sentence of body copy in bold caps helps to invite the reader into the text. (But don’t combine a bold lead-in sentence with a subhead, the two will compete for attention).

Web Considerations

  • Remember that the browser, not the designer, controls the display of type. That’s why Helvetica/Arial is a good choice — these neutral type styles don’t require adjustments like extra line spacing.
  • Headlines should always convey the content hierarchy: think of your headlines and subheads as a content outline.
  • Use short copy and bulleted lists rather than big blocks of text. This is easier for all readers to scan, and it improves accessibility for users who depend on screen readers.