Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Typefaces

Helvetica is a standard font on Apple computers. On the PC platform, Arial is the preferred equivalent. For Android OS, Roboto is the preferred equivalent. For all other operating systems, please use the default sans serif font family. When used in a web safe font stack consisting of Helvetica, Arial, Roboto, and sans-serif system fonts, this choice removes any licensing costs that are barrier of use for smaller departments and pairs well with the typeface used in our new department logo systems. We have limited our use to two weights, regular and bold, to maintain a consistent look across all devices.

Type Scale

Our system uses a harmonious progression of font sizes and styles, each with an intended application and meaning. The scale is based on a progression of 1.5x the base font size of 16px with a few between sizes mixed into fulfill specific needs while maintaining legibility. A 16px base font size was selected because it allows for a scale that harmonious with the 4px spacing system as well as meets ADA compliancy guidelines. The 12.8 font size should only be used for captions.

For smaller body copy using styles like body and label, we recommend a line height ratio around 1.5 times the type size. For larger type legibility using styles like title and headline, we recommend a line height ratio of 1.2 times the type size to provide a spacing that is comfortable to read for short spans of text.

Best Practices

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.

Write compelling and descriptive headlines and sub-headlines on every page, and make sure they describe the corresponding content. Use heading tags in order of importance in the HTML of all of your pages, use H1 for the single most important title such as the page title, and h6 being least important. Correct heading tag usage can affect SEO ranking.

Body styles are used for longer passages of text. Line lengths for body text are usually between 80 to 90 characters. Left-justified text is the most legible option for Web pages because the left margin is even and predictable and the right margin is irregular.

Line spacing follows a 4px base unit when spacing text. Measure the distance between each line of text from the baseline.

Headline

Font: Helvetica, Arial, Roboto
Size: 48px
Line-height: 54px

Font: Helvetica, Arial, Roboto
Size: 36px
Line-height: 40.5px

Font: Helvetica, Arial, Roboto
Size: 36px
Line-height: 40.5px

Font: Helvetica, Arial, Roboto
Size: 28px
Line-height: 32px

Font: Helvetica, Arial, Roboto
Size: 24px
Line-height: 28px

Font: Helvetica, Arial, Roboto
Size: 20px
Line-height: 24px

Font: Helvetica, Arial, Roboto
Size: 20px
Line-height: 22.5px

Font: Helvetica, Arial, Roboto
Size: 18px
Line-height: 20px

Font: Helvetica, Arial, Roboto
Size: 16px
Line-height: 20px

Font: Helvetica, Arial, Roboto
Size: 14px
Line-height: 16px

Body

Font: Helvetica, Arial, Roboto
Size: 24px
Line-height: 30px
Text-align: Left

Font: Helvetica, Arial, Roboto
Size: 20px
Line-height: 24px
Text-align: Left

Font: Helvetica, Arial, Roboto
Size: 16px
Line-height: 24px
Text-align: Left

Font: Helvetica, Arial, Roboto
Size: 14px
Line-height: 24px
Text-align: Left

Editorial

Byline
Font: Helvetica Bold, Arial Bold, Roboto Bold
Size: 14px
Line-height: 24px

Blockquote

Blockquote
Font: Helvetica, Arial, Roboto
Size: 16px
Line-height: 24px

Vertical Rule
Stroke: 8px
Color: #2774AE

Note: For accessibility purposes, we recommend that you follow the W3C standards (<h1>, <h2>, … , <h6>) for heading ranks. CSS classes for heading font sizes are available if you need to match the font styling of a heading:

Headline Extra Large

<p class="headline-text__xl">Headline Extra Large</p>

<!-- or -->

<h1>Headline Extra Large</h1>

Headline Large

<p class="headline-text__lg">Headline Large</p>

<!-- or -->

<h2>Headline Large</h2>

Headline Medium

<p class="headline-text__md">Headline Medium</p>

<!-- or -->

<h3>Headline Medium</h3>

Headline Small

<p class="headline-text__sm">Headline Small</p>


<!-- or -->

<h4>Headline Small</h4>

Body Copy

This is a paragraph.

<p>
  This is a paragraph. 
</p>

This is lead paragraph.

<p class="lead">
  This is lead paragraph.
</p>

This is a small paragraph.

<small>This is a small paragraph.</small>

Unordered Lists

• Unordered List Item
• Unordered List Item
• Nested Unordered List Item
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item

<ul>
  <li>Unordered List Item</li>
  <li>Unordered List Item</li>
  <li>Nested Unordered List Item
    <ul>
      <li>Unordered List Item</li>
      <li>Unordered List Item</li>
      <li>Unordered List Item</li>
    </ul> 
  </li>
</ul>

Unstyled List

• Unordered List 1
• Unordered List 2
• Unordered List 3

<ul class="ucla-list__plain">
  <li>Unordered List 1</li>
  <li>Unordered List 2</li>
  <li>Unordered List 3</li>
</ul>

Inline List

• Unordered List 1
• Unordered List 2
• Unordered List 3

<ul class="ucla-list__inline">
  <li>Unordered List 1</li>
  <li>Unordered List 2</li>
  <li>Unordered List 3</li>
</ul>

Ordered Lists

1. Ordered List Item
2. Ordered List Item
3. Nested Ordered List Item
   1. Ordered List Item
   2. Ordered List Item
   3. Ordered List Item

<ol>
  <li>Ordered List Item</li>
  <li>Ordered List Item</li>
  <li>Nested Ordered List Item
    <ol>
      <li>Ordered List Item</li>
      <li>Ordered List Item</li>
      <li>Ordered List Item</li>
    </ol>
  </li>
</ol>

Descriptive List

Lorem ipsum dolor sit amet.

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum.

Lorem ipsum dolor sit amet.

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum.

Lorem ipsum dolor sit amet.

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum.

<dl>
  <dt>Lorem ipsum dolor sit amet.</dt>
  <dd>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et
    gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum.</dd>

  <dt>Lorem ipsum dolor sit amet.</dt>
  <dd>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et
    gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum.</dd>

  <dt>Lorem ipsum dolor sit amet.</dt>
  <dd>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et
    gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum.</dd>
</dl>

Inline Styles

This sentence contains text styled as strong.

<p>This sentence contains text styled as <strong>strong</strong>.</p>

This sentence contains text styled as emphasis.

<p>This sentence contains text styled as <em>emphasis</em>.</p>

This sentence contains text styled as strike.

<p>This sentence contains text styled as <del>strike</del>.</p>

This sentence contains text that has been inserted.

<p>This sentence contains text that has been <ins>inserted</ins>.</p>

This sentence contains text that has been marked.

<p>This sentence contains text that has been <mark>marked</mark>.</p>

To display code, use the <code> tag.

<p>To display code, use the <code>&lt;code&gt;</code> tag.</p>

<div style="max-width: 464px">
<figure class="blockquote">
  <blockquote cite="https://www.ucla.edu">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus justo eget erat vulputate porta. Nam pharetra hendrerit accumsan.</p>
  </blockquote>
  <figcaption>First Name Last Name<br/><em>Title</em><br /><cite>Source</cite></figcaption>
</figure>
</div>

Automatic styling for body copy

<div class="ucla-prose">
  <h1>Want to make the world better? Let's go.</h1>
  <p>You’re idealistic, driven and creative. You love learning and hearing different points of view. You feel empathy for others and believe everyone deserves a fair shot. You see obstacles as a chance to grow. You are a changemaker, just like us. Together? We’re unstoppable.</p>
  <h2>Discover answers to Questions that matter</h2>
  <p>We know we must dig for the truth. Work tirelessly to overcome obstacles. And keep trying until we create change. Like giving hope to the homeless. Shedding light on the climate crisis. And inspiring inclusiveness through art. And knowledge is where it all begins.</p>
  <h3>Find yourself moving in the right direction</h3>
  <p>Love helping others? Or maybe you’re captivated by the arts and culture. Our range of majors and minors is always evolving and we encourage cross-pollination among different fields. This approach helps you tailor your education to build on your strengths, explore your passions and bring your goals to life.</p>
</div>