Durch den Einsatz der unterschiedlichen Schriftschnitte können Inhalte klar gegliedert und Seiten wirkungsvoll und abwechslungsreich inszeniert werden. Die hier bereitgestellten Textformate gründen auf den Typografie-Basics und können je nach Projekt ergänzt und abgewandelt werden.

Schriftschnitte

Es stehen fünf Schriftschnitte  zur Verfügung:

  • Audi Type Extended Bold für Headlines erster Ordnung
  • Audi Type Extended Normal für weitere Headlines
  • Audi Type Screen Light als Standardschnitt für Lesetexte
  • Audi Type Screen Normal für interaktive Texte und Buttons (Textlinks, Formularfelder, Navigationspunkte, etc.)
  • Audi Type Screen Bold für Hervorhebungen und Zwischenüberschriften

Auf den Schriftschnitt Audi Type Screen Bold kann zugunsten geringerer Ladelast (page weight) projektabhängig verzichtet werden.

Schriftgrößen und Zeilenabstände

Schriftgrößen können abhängig von Projekt, Endgerät und Viewportbreite gewählt werden.

Das Audi User Interface beinhaltet eine anpassbare Schriftgrößen-Systematik, basierend auf einer modularen Skala. Sie kann Designern und Entwicklern dabei helfen …

  • auch bei umfangreichen Projekten ein konsistentes, stimmiges Schriftbild zu erzeugen,
  • flexibel mit unterschiedlichen Endgeräten und Viewportbreiten umzugehen
  • und einen vertikalen Rhythmus einzuhalten.

Eine individuell angepasste Schriftgrößen-Systematik lässt sich mit Hilfe einer Formel erstellen. Grundlage dafür ist eine modulare Skala aus zwei Parametern, die projektabhängig festgelegt werden können: Basisschriftgröße und Ratio.

Die Basisschriftgröße bestimmt die Größe des Lesetexts. Die Ratio bestimmt die Stärke des Schriftgrößenkontrasts zwischen Formaten geringerer und höherer Hierarchieebene. Die Hierarchiebene wird durch den Schriftgrößenindex definiert, der einem Format zugewiesen ist.

Beide Parameter können für unterschiedliche Viewportbreiten festgelegt werden um auf jeder Gerätegröße ein optimales Leseerlebnis zu schaffen.

Formel:

Schriftgröße = Basisschriftgröße * (Ratio^Schriftgrößenindex)
SASS-Mixin: aui-responsive-type(schriftgroessenindex, relativezeilenhoehe)

Zeilenabstände und andere vertikale Abstände zwischen Elementen können über das Vielfache einer Basiseinheit definiert werden. Sie berechnet sich aus der Basisschriftgröße. Über den Einsatz einer solchen Basiseinheit halten Textelemente einen vertikalen Rhythmus ein.

 

Formel:

Basiseinheit = Basisschriftgröße/4

Abstand = Basiseinheit × X

Vordefinierte Schriftstile

Überschriften

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>
  • Seitentitel und Artikelüberschrift (.aui-headline-1)
    Schriftschnitt: Audi Type Extended Bold
    Schriftgrößenindex: 8
    Zeilenhöhe: 1,1×
    Zeichenabstand: -0.015em
    Farbe: #000000 / #ffffff

  • Kapitelüberschrift (.aui-headline-2)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 5
    Zeilenhöhe: 1,2×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2

  • Sektionsüberschrift (.aui-headline-3)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 2
    Zeilenhöhe: 1,2×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2
  • Infoboxüberschrift (.aui-headline-4)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 1
    Zeilenhöhe: 1,2×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2

  • Teaser- und Cardtitel (.aui-headline-5)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,33×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2

  • Absatzüberschrift (.aui-headline-6)
    Schriftschnitt: Audi Type Screen Bold
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2

Fließtexte

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>
  • Längere Fließtexte (p)
    Schriftschnitt: Audi Type Screen Light
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,75×
    Farbe: #333333 / #f2f2f2 

  • Kürzere Fließtexte (.aui-shortread)
    Schriftschnitt: Audi Type Screen Light
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2
  • Kleingedrucktes (.aui-small)
    Schriftschnitt: Audi Type Screen Light
    Schriftgrößenindex: -2
    Zeilenhöhe: 1,5×
    Farbe: #000000 / #ffffff
    Opazität: 40%

  • Lese-Fließtexte innerhalb von Portalen mit kompakter Basisschriftgröße (p.big)
    Schriftschnitt: Audi Type Screen Light
    Schriftgrößenindex: 1
    Zeilenhöhe: 1,75×
    Farbe: #333333 / #f2f2f2

Hervorhebungen

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>
  • Exzerpte, hervorgehobene Zitatblöcke (.aui-blockquote)
    Schriftschnitt: Audi Type Screen Normal
    Schriftgrößenindex: 1
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2
  • Hervorgehobene Worte innerhalb eines Fließtextes (strong)
    Schriftschnitt: Audi Type Screen Bold

Listen

  • 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>
  • Liste mit Pfeilen als Aufzählungszeichen (aui-list–arrow)
  • Nummerierte Liste (aui-list–number)

Abstand zwischen Listenelementen beträgt 1 x Basisschriftgröße.

Die Aufzählungszeichen sowie die Nummerierung haben eine Farbe von #000000/#ffffff bei 30% Opazität.

Sonstige

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 Fließtexten (.aui-textlink)
    Schriftschnitt: Audi Type Screen Normal
    Unterstreichung mit border-bottom: 1px
  • :hover
    Farbe: #000000/#ffffff 
  • :visited
    Opacity: 60% 
  • Bildunterschrift und Abbildungslegenden (.aui-caption)
    Schriftschnitt: Audi Type Screen Light
    Schriftgrößenindex: -1
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2
Audi UI Kit Sketch
Version 1.4 (Releases: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB

Anwendungsbeispiele

Ihr CI-Support
Können wir Ihnen helfen?