Text Styles
Adopting Core Components
We have added new React components to the Audi CI to ensure a uniform appearance on the web. All existing React components can be found in the Audi React Library. Audi will continue to develop and add to this library.
Audi Type provides the basis for flexible use of typography. By using the various styles, content can be clearly structured, guaranteeing rapid comprehensibility.
In addition to the predefined styles, Audi Type Variable can also be used. Audi Type Variable is an infinitely variable font in terms of weighting and width. Its reduced scope compared to individual files provides benefits such as shorter loading times.
Several file packages with the Audi Type Variable and predefined styles are available.
The following font styles are available:
- Audi Type Extended Bold to Normal for headlines and subheadlines
- Audi Type Wide and/or Audi Type for body copy
- Audi Type Wide for interactive text and buttons
(text links, form fields, navigation, etc.) - Audi Type Bold, Audi Type Wide Bold, Audi Type Extended Bold (in headlines) for emphasis
- Audi Type for footnotes and reference text
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)
Display Order 1
Display Order 2
Headline Order 1
Headline Order 2
Headline Order 3
Headline Order 4
<h1 class="aui-display-1">Display <span class="aui-display-1 aui-display-1--normal">Order 1</span></h1>
<h2 class="aui-display-2">Display <span class="aui-display-2 aui-display-2--normal">Order 2</span></h2>
<h1 class="aui-headline-1">Headline <span class="aui-headline-1 aui-headline-1--normal">Order 1</span></h1>
<h2 class="aui-headline-2">Headline <span class="aui-headline-2 aui-headline-2--normal">Order 2</span></h2>
<h3 class="aui-headline-3">Headline <span class="aui-headline-3 aui-headline-3--normal">Order 3</span></h3>
<h4 class="aui-headline-4">Headline <span class="aui-headline-4 aui-headline-4--normal">Order 4</span></h4>- 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 Wide Bold
Type size index: 0
Line height: 1.5×
Color: #333333 / #f2f2f2
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.
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.
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.
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.
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.
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 class="aui-copy-1">
Hello, sir. I am See-Threepio, <strong>human-cyborg</strong> 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>
<p class="aui-copy-1 aui-copy-1--bold">
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>
<p class="aui-copy-2">
Hello, sir. I am See-Threepio, <strong>human-cyborg</strong> 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>
<p class="aui-copy-2 aui-copy-2--bold">
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>
<p class="aui-copy-3">
Hello, sir. I am See-Threepio, <strong>human-cyborg</strong> 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>
<p class="aui-copy-3 aui-copy-3--bold">
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>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.
<p class="aui-accentuated">
The Death Star plans are not in the main computer. <strong>Where are those transmissions you intercepted?</strong> 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 <strong>Your Highness</strong>, we will discuss the location of your hidden <strong>Rebel base</strong>.
</p>
<p class="aui-big">
This <strong>little</strong> one isn't worth the <strong>effort</strong>. Come let me buy you something.
</p>
<p class="aui-small">
This <strong>little</strong> 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 <strong>battle station</strong> with enough firepower to destroy an entire planet.
</p>- List with arrow
- Second topic
- Third topic
- List numbered
- Second topic
- Third topic
<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>The second Death Star, was a massive battle station with enough firepower to destroy an entire planet.
<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>Super- and Subscript
For superscript and subscript characters, the CSS font-feature-setting <sub> and <sup> is used.
This text contains a superscript text.
This text contains a subscript text.
<div>
<p>
This text contains a <sup>superscript</sup> text.
</p>
<br />
<p>
This text contains a <sub>subscript</sub> text.
</p>
</div>
<style>
.abp-pattern__superscript-subscript {
margin-left: auto;
margin-right: auto;
max-width: 80%;
}
</style>Audi UI Kit – Integration into Sketch library
(supported until 30.06.2023)
To ensure designers are using the most up-to-date components and icons in their products, the Audi UI Kit was created as a sketch library. Integrate these UI Kits to get the latest Audi Sketch Libraries. Updates will be made regularly and users will be informed when new versions of the Librarys are available.
Audi UI Kit for Figma
To enable as many designers as possible to work with the Audi user interface components the UI Kit and icons is also offered for Figma. Updates are made regularly and all changes are documented for users in the changelog.
We strongly recommend to join the Audi Figma Workspace for being always up-to-date and to collaborate with others.The Audi Design Kits are already included into the Figma teams in the Audi Workspace. To get access to a team or project please reach out to us here.
In case you are not working directly in the Audi Figma workspace you find the latest version as download below.
