Typography

Overview

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 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.

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 for the department logo system.

Karbon Font Family

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.

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.

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.

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

Karbon

  • Karbon Hairline and Hairline Italic
  • Karbon Thin and Thin Italic
  • Karbon Light and Light Italic
  • Karbon Regular and Regular Italic
  • Karbon Medium and Medium Italic
  • Karbon Semibold and Semibold Italic
  • Karbon Bold and Bold Italic
Custom Karbon samples in Thin Reveal, Bold Outline, and Bold Open Outline

Custom Karbon

  • 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)

Helvetica and Arial Font Families

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.

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

Helvetica

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

Arial

  • Arial Regular and Italic
  • Arial Bold and Bold Italic

Typesetting

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

  • Use Karbon Bold all caps for immediacy and emphasis.
  • For a more restrained look, use sentence case.
  • Use Karbon Thin Reveal carefully. Choose a large size, and don’t mix it with other versions of Karbon.
  • 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.
  • If you use Karbon to create online graphics, be sure to provide accurate and complete alt text.
  • Do not use Karbon Open in graphic elements — it is not ADA compliant.

Body Copy in Karbon

  • 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.
  • Karbon needs generous leading, three to five points greater than the size of the type.
  • Never set body copy smaller than 10 point, even for young audiences. (For older audiences use 11 or 12 point).
  • Set body copy flush left, ragged right. Don’t center or justify.
  • 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. (See semantic markup.)
  • 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.