Animated Typography

Animated typography creates a dynamic overall picture: easy to read, accessible and reduced to a high standard – in video, web or applications. The following principles are the basis for a consistent appearance. In general, animated typography should only be used if it offers added value and visually supports the message of the information.

For the implementation of motion branding with the Audi rings, specially developed software is available for all applications in moving image communication.

Motion parameters

Moving typography always serves a purpose: it can create focus, convey character and liveliness, and highlight important text content. Typographic animations are based on the Audi animation principles and can be created using the following parameters:

Subtle
Opacity (increase/decrease)

Emphasized
Opacity + Position (horizontal/vertical)

The motion parameters define the volume of a text. Attention should therefore be paid to a sensible, reduced handling of animated text. Only one of the two volumes is used (either subtle or emphasized).

Choreography

For a harmonious overall experience, the timing of all parameters should be precisely coordinated. The Audi animation curve serves as the basis. When using multiple elements, offset and delay (individual elements appear/disappear with a time delay) can be used to create more tension.

Emphasized horizontal
Appears from the left, disappears to the left

Emphasized vertical
Appears from below, disappears upwards

Application

Font Color

Depending on the video material, moving typography is used in white or black. Care must be taken to ensure that people or vehicles are not obscured by text and that there is at least 16px spacing between font hierarchies.

Drop Shadow (optional)

If a low contrast between text and background affects readability too much, text can be supplemented with a black drop shadow (guideline reference values: max. 50% opacity, 8px blur, 2px shift to y-axis).

Safety distance

In order to ensure a uniform appearance at all times, format-specific safety distances and reference values for titles, lower thirds and subtitles & disclaimers are available.

Title

Video titles are left-aligned and have a format-specific minimum spacing. As long as this does not cover a motif, text can alternatively be centered.

More about the use of font, see Typography.

Preview

Recommended motion parameters

Opacity: fade-in/fade-out (from 0% to 100%)
Position shift: vertically upwards or horizontally in reading direction

Format-specific reference values

16:9
Safety distance left/right: 100px
Safety distance up/down: 150px

9:16 and 4:5

Safety distance left/right: 100px
Safety distance up/down: 200px

1:1

Safety distance all around: 100px

1.91:1 (Social Media)

Safety distance all around: 60px

Lower thirds

Lower thirds are set left or right aligned at the bottom of a video and have a format-specific minimum spacing. If the contrast to the video material is not sufficient, the font can optionally be backed with a soft, max. 50% black gradient.

Preview

Recommended motion parameters

Opacity: Fade-in/fade-out (from 0% to 100%)
Position shift: vertically upwards or horizontally in the reading direction

Format-specific reference values

16:9 and 1:1

Safety distance all around: 100px

Headline: Audi Type Extended Bold, max. two-line
Subline: Audi Type Wide Normal, max. two-line

9:16 and 4:5

Safety distance left/right: 100px
Safety distance up/down: 200px

Headline: Audi Type Extended Bold, max. two-line
Subline: Audi Type Wide Normal, max. two-line

1.91:1 (Social Media)

Safety distance all around: 60px

Headline: Audi Type Extended Bold
Subline: Audi Type Wide Normal, single-line

Gradient (optional)

16:9, 9:16, 4:5 and 1:1

max. 1/3 of the format height

1.91:1 (Social Media)

max. 1/2 of the format height

Subtitle & Disclaimer

Subtitles and disclaimers are centered at the bottom and have a format-specific minimum spacing. If the contrast to the video material is not sufficient, the font can optionally be backed with a soft, max. 35% black gradient.