Font / Font sizes and Text
Definition
- Fonts we are using:
Western (Osram): Neue Helvetica (Light / Roman / Bold)
Western (BAG): Din Pro (Light / Regular / Bold)
China, Taiwan: Hanyi (HY Zhong Hei Simplified Chinese)
Japan: Tazugane (Light / Book / Bold)
Korea: Seol Sans (Light / Book / Bold)
- There are two fallback web-safe fonts in order to avoidunexpected behaviours, if the stanard fonts
can't be loaded. The first is Arial followed by generic font name "sans-serif".
- Typography size scales in correspondence to viewport width according to rules defined below.
- Typography is fluid (line breaks are dynamic).
Light
- font-headline-page
- font-headline-page-portrait
- font-headline-teaser
- font-campaign-name-and-small-Quote
- font-navigation-menu
- font-headline-and-product-Name
- font-sub-Headline
- font-sub-headline-Portrait
Roman/Regular
- font-text-standard
- font-text-small
Bold
Headline Page: used for group headline, full-size-teaser: The
quick brown fox jumps over the lazy dog.
| At 764px: |
30px = 2,3em; line-height: 34px = 2,61em |
| At 1010px: |
36px = 2,78em; line-height: 40px = 3,08em |
| At 1920px: |
50px = 3,85em; line-height: 54px = 4,15em |
| CSS class: |
font-headline-page |
Headline Page Portrait: used for full-size-teaser in portrait mode:
The quick brown fox jumps
over the lazy dog.
| At 764px: |
30px = 2,3em; line-height: 34px = 2,61em |
| Above 764px: |
50px = 3,85em; line-height: 54px = 4,15em |
| CSS class: |
font-headline-page-portrait |
| |
| Note: |
This Font is an extension of "Headline Page". It is only behaving like described if the viewport
is in portrait mode.
In all other cases the rules of "Headline Page" are applied.
|
Headline Teaser: used for all non-12 col teasers and large quote: The quick
brown fox jumps
over the lazy dog.
| At 764px: |
22px = 1,7em; line-height: 30px = 2,3em |
| At 1010px: |
28px = 2,15em; line-height: 30px = 2,3em |
| At 1920px: |
36px = 2,78em; line-height: 42px = 3,23em |
| CSS class: |
font-headline-teaser |
Campaign Name & small quote: used for campaign name & small
quotes: The quick brown fox jumps over the lazy
dog.
| At 1010px: |
18px = 1,34em; line-height: 24px = 1,85em |
| At 1920px: |
22px = 1,7em; line-height: 29px = 2,23em |
| CSS class: |
font-campaign-name-and-small-quote |
| At 764px: |
15px = 1,15em; line-height: 21px = 1,62em |
| At 1010px: |
18px = 1,34em; line-height: 40px = 3,08em |
| At 1920px: |
22px = 1,7em; line-height: 40px = 3,08em |
| CSS class: |
font-navigation-menu |
Headline & Product Name: used of product name and regular
headline. The quick brown fox jumps over the lazy
dog.
| At 764px: |
15px = 1,15em; line-height: 18px = 1,34em |
| At 1010px: |
18px = 1,34em; line-height: 22px = 1,7em |
| CSS class: |
font-headline-and-product-name |
Sub Headline: used for all sub headlines: The quick brown fox jumps over the
lazy
dog.
| Below 1010px: |
15px = 1,15em; line-height: 21px = 1,62em |
| At 1920px: |
18px = 1,34em; line-height: 24px = 1,85em |
| CSS class: |
font-sub-headline |
Sub Headline Portrait: used for sub headline in full size teaser. The
quick brown fox jumps over the lazy
dog.
| At 764px: |
15px = 1,15em; line-height: 21px = 1,62em |
| Above 764px: |
18px = 1,34em; line-height: 24px = 1,85em |
| CSS class: |
font-sub-headline-portrait |
| |
| Note: |
This Font is an extension of "Sub Headline". It is only behaving like described if the viewport
is in portrait mode.
In all other cases the rules of "Sub Headline" are applied.
|
Text Standard: used for all regular text (Copytext). The quick brown fox
jumps over the lazy
dog.
| At 1010px: |
13px = 1em; line-height: 18px = 1,38em |
| At 1920px: |
15px = 1,15em; line-height: 21px = 1,62em |
| CSS class: |
font-text-standard |
Headline Text Bold: used for bold headlines of regular text. The quick
brown fox jumps over the lazy dog. PT Sans Bold
| At 1010px: |
13px = 1em; line-height: 18px = 1,38em |
| At 1920px: |
15px = 1,15em; line-height: 21px = 1,62em |
| CSS class: |
font-headline-text-bold |
Text Small: used for Cookie policy and Picture description. The quick brown fox
jumps over the lazy
dog.
| At 1010px: |
11px = 0,85em; line-height: 13px = 1em |
| At 1920px: |
13px = 1em; line-height: 18px = 1,38em |
| CSS class: |
font-text-small |