The use of the different type weights enables content to be clearly structured and pages to be showcased in an effective, diversified manner. The text formats provided here are based on the typography basics and can be supplemented and adapted according to the project.

Type Weights 

There are five type weights available:

  • Audi Type Extended Bold for first-level headlines
  • Audi Type Extended Normal for other headlines
  • Audi Type Screen Light as the standard type weight for reading texts
  • Audi Type Screen Normal for interactive texts and buttons
    (text links, form fields, navigation items, etc.)
  • Audi Type Screen Bold for highlights and subheadlines

In the interests of reduced page weight, it is possible to do without using the type weight Audi Type Screen Bold, depending on the project.

Type Sizes and Line Spacing

Type sizes can be selected based on project, end device and viewport width.
The Audi user interface comprises an adaptable type size system based on a modular scale. It can help designers and developers to …

  • create a consistent, harmonious typographical style even in large-scale projects,
  • handle different end devices and viewport widths flexibly
  • maintain a vertical rhythm

An individually adapted type size system can be compiled using a formula. The basis for this is a modular scale with two parameters which can be determined depending on the project concerned: base font size and ratio.

The base font size determines the size of the reading text. The ratio determines the extent of the type size contrast between formats at lower and higher hierarchy levels. The hierarchy level is defined by the type size index assigned to a format.

Both parameters can be determined for different viewport widths in order to create an optimum reading experience on every size of device.

 

Formula:


Type size = Base font size * (ratio^type size index)

SASS mixin: aui-responsive-type(typesizeindex, relativelineheight)

Line spacing and other vertical spacings between elements can be defined using the multiple of a basic unit. It is derived from the base font size Using basic unit in this way ensures text elements maintain a vertical rhythm.

 

Formula:

Basic unit = base font size/4
Spacing = basic unit × X

Pre-defined Typeface Styles

Headings

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6
HTML
<h1 class="aui-headline-1">Headline 1</h1>
<h2 class="aui-headline-2">Headline 2</h2>
<h3 class="aui-headline-3">Headline 3</h3>
<h4 class="aui-headline-4">Headline 4</h4>
<h5 class="aui-headline-5">Headline 5</h5>
<h6 class="aui-headline-6">Headline 6</h6>
  • Page title and article heading (.aui-headline-1)

    Type weight: Audi Type Extended Bold

    Type size index: 8

    Line height: 1.1×

    Letter spacing: -0.015em
    Color: #000000 / #ffffff
  • Chapter heading (.aui-headline-2)
    Type weight: Audi Type Extended Normal

    Type size index: 5

    Line height: 1.2×
    Letter spacing: -0.015em

    Color: #333333 / #f2f2f2
  • Section heading (.aui-headline-3)

    Type weight: Audi Type Extended Normal

    Type size index: 2

    Line height: 1.2×

    Letter spacing: -0.015em

    Color: #333333 / #f2f2f2
  • Information box heading (.aui-headline-4)
    
Type weight: Audi Type Extended Normal

    Type size index: 1
    
Line height: 1.2×

    Letter spacing: -0.015em

    Color: #333333 / #f2f2f2
  • Teaser and card title (.aui-headline-5)

    Type weight: Audi Type Extended Normal

    Type size index: 0
    
Line height: 1.33×

    Letter spacing: -0.015em
    
Color: #333333 / #f2f2f2
  • Paragraph heading (.aui-headline-6)
    
Type weight: Audi Type Screen Bold
    
Type size index: 0

    Line height: 1.5×
    
Color: #333333 / #f2f2f2

Body copy

Hello, sir. I am See-Threepio, human-cyborg relations. My facilities are at your... Well, really! What's wrong with the Falcon? Hyperdrive. I'll get my people to work on it. Good. You know, that ship saved my life quite a few times. She's the fastest hunk of junk in the galaxy. How's the gas mine? Is it paying off for you? Oh, not as well as I'd like. We're a small outpost and not very self-sufficient. And I've had supply problems of every kind. I've had labor difficulties... What's so funny? You. Listen to you - you sound like a businessman, a responsible leader. Who'd have thought that, huh? You know, seeing you sure brings back a few things. Yeah. Yeah, I'm responsible these days. It's the price you pay for being successful.

HTML
<p>Hello, sir. I am See-Threepio, human-cyborg relations. My facilities are at your... Well, really! What's wrong with the Falcon? Hyperdrive. I'll get my people to work on it. Good. You know, that ship saved my life quite a few times. She's the fastest hunk of junk in the galaxy. How's the gas mine? Is it paying off for you? Oh, not as well as I'd like. We're a small outpost and not very self-sufficient. And I've had supply problems of every kind. I've had labor difficulties... What's so funny? You. Listen to you - you sound like a businessman, a responsible leader. Who'd have thought that, huh? You know, seeing you sure brings back a few things. Yeah. Yeah, I'm responsible these days. It's the price you pay for being successful.</p>
  • Lengthier sections of body copy (p)

    Type weight: Audi Type Screen Light
    
Type size index: 0

    Line height: 1.75×

    Color: #333333 / #f2f2f2
  • Shorter sections of body copy (.aui-shortread)

    Type weight: Audi Type Screen Light

    Type size index: 0
    
Line height: 1.5×

    Color: #333333 / #f2f2f2
  • Small print (.aui-small)

    Type weight: Audi Type Screen
    Light
Type size index: -2
    
Line height: 1.5×

    Color: #000000 / #ffffff

    Opacity: 40%
  • Reading body copy in portals with compact base font size (p.big)
    
Type weight: Audi Type Screen
    Light
Type size index: 1
    
Line height: 1.75×
    
Color: #333333 / #f2f2f2

Highlights

The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions. Aaah… This is a consular ship. Were on a diplomatic mission. If this is a consular ship… were is the Ambassador? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner.

And, now Your Highness, we will discuss the location of your hidden Rebel base.

This little one isn't worth the effort. Come let me buy you something.

This little one isn't worth the effort. Come let me buy you something.

The second Death Star, was a massive battle station with enough firepower to destroy an entire planet.

HTML
<p class="aui-accentuated">
  The Death Star plans are not in the main computer. <a class="aui-textlink" href="#">Where are those transmissions you intercepted?</a> What have you done with those plans? We intercepted no transmissions. Aaah… This is a consular ship. Were on a diplomatic mission. If this is a consular ship… were is the <strong>Ambassador</strong>? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner.
</p>
<p class="aui-shortread">
  And, now <a class="aui-textlink" href="#">Your Highness</a>, we will discuss the location of your hidden <strong>Rebel base</strong>.
</p>
<p class="aui-big">
  This <a class="aui-textlink" href="#">little</a> one isn't worth the <strong>effort</strong>. Come let me buy you something.
</p>
<p class="aui-small">
  This <a class="aui-textlink" href="#">little</a> one isn't worth the <strong>effort</strong>. Come let me buy you something.
</p>
<p class="aui-caption">
  The second <strong>Death Star</strong>, was a massive <a class="aui-textlink" href="#">battle station</a> with enough firepower to destroy an entire planet.
</p>
  • Highlighted paragraph in body copy .aui-accentuated
    
Roof line (black, 1px)
  • Excerpts, highlighted quotation blocks (.aui-blockquote)
    
Type weight: Audi Type Screen Normal
    
Type size index: 1
    
Line height: 1.5×

    Color: #333333 / #f2f2f2
  • Highlighted words within a section of body copy (strong)

    Type weight: Audi Type Screen Bold

Lists

  • List with arrow
  • Second topic
  • Third topic
  1. List numbered
  2. Second topic
  3. Third topic
HTML
<ul class="aui-list aui-list--arrow">
  <li class="aui-list__item">List with arrow</li>
  <li class="aui-list__item">Second topic</li>
  <li class="aui-list__item">Third topic</li>
</ul>
<ol class="aui-list aui-list--number">
  <li class="aui-list__item">List numbered</li>
  <li class="aui-list__item">Second topic</li>
  <li class="aui-list__item">Third topic</li>
</ol>
  • List with arrows as bullet points (aui-list–arrow)
  • Numbered list (aui-list–number)

The spacing between list elements is 1 x base font size.
The color of the bullet points and numbering is #000000/#ffffff with 30% opacity.

Other

The second Death Star, was a massive battle station with enough firepower to destroy an entire planet.

HTML
<p class="aui-caption">
  The second <strong>Death Star</strong>, was a massive <a class="aui-textlink" href="#">battle station</a> with enough firepower to destroy an entire planet.
</p>
  • Links in body copy (.aui-textlink)

    Type weight: Audi Type Screen Normal

    Underlining with border-bottom: 1px
  • :hover
Color: #000000/#ffffff
  • :visited
Opacity: 60%
  • Caption and figure legends (.aui-caption)
    
Type weight: Audi Type Screen Light
    
Type size index: -1
    
Line height: 1.5×
    
Color: #333333 / #f2f2f2
Audi UI Kit Sketch
Version 1.4 (Releases: <a href="https://github.com/audi/audi-templates/releases" target="_blank">https://github.com/audi/audi-templates/releases</a>)
ZIP
76.3 MB

Examples