---
title: Web Typography - Typography - Design - Band Guidelines - Riege Software
---

## Farbpalette & Designelemente Typografie Web

Brandguide

[Texthierarchien](https://brand.riege.com/design/typography/web#texthierarchien)

[Navigation](https://brand.riege.com/design/typography/web#navigation)

[Hero Content Box](https://brand.riege.com/design/typography/web#hero_content_box)

[Headlines](https://brand.riege.com/design/typography/web#headlines)

[Subline](https://brand.riege.com/design/typography/web#subline)

[Links](https://brand.riege.com/design/typography/web#links)

[Jobs und Events](https://brand.riege.com/design/typography/web#jobs_events)

[Zitate](https://brand.riege.com/design/typography/web#zitate)

[Accordion](https://brand.riege.com/design/typography/web#accordion)

[Tab menue](https://brand.riege.com/design/typography/web#tab_menue)

[Teaser](https://brand.riege.com/design/typography/web#teaser)

[Lightbox](https://brand.riege.com/design/typography/web#lightbox)

[Slider](https://brand.riege.com/design/typography/web#slider)

[Blog tag](https://brand.riege.com/design/typography/web#blog_tag)

[Timeline](https://brand.riege.com/design/typography/web#timeline)

[Form](https://brand.riege.com/design/typography/web#form)

[Footer](https://brand.riege.com/design/typography/web#footer)

## Unsere Typografie im Web Texthierarchien

Kurze Erklärung warum Texthierarchien wichtig sind.

 Navigation

![font_web_navigation_01](https://brand.riege.com/hs-fs/hubfs/font_web_navigation_01.png?width=800&height=970&name=font_web_navigation_01.png)

![font_web_navigation_02](https://brand.riege.com/hs-fs/hubfs/font_web_navigation_02.png?width=800&height=958&name=font_web_navigation_02.png)

1

### topnav link desktop / language switcher desktop

font-size: 16 px @ 1720 px  14 px @ 600 px   
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: non

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

2

### searchbox inputfield desktop

font-size: 16 px @ all   
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

3

### menu link desktop

font-size: 20 px @ 1720 px  18 px @ 600 px   
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

4

### mega menu headline

font-size: 24 px @ 1720 px  20 px @ 390 px   
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

5

### mega menu text

font-size: 13 px @ all   
line-height: 150 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

6

### submenu link

font-size: 20 px @ 1720 px  18 px @ 390 px    
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

7

### sub submenu link

font-size: 16 px @ all   
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

8

### special link

font-size: 18 px @ all   
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

9

### mega simple link

font-size: 20 px @ 1720 px  18 px @ 390 px   
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

10

### menu link mobil

font-size: 24 Px @ all   
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

11

### topnav link mobil / language switcher mobil

font-size:  24 Px @ all   
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

12

### searchbox inputfield mobil

font-size: 24 Px @ all   
line-height: 120 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Hero-Content-Box

![font_web_hero_content_box_01](https://brand.riege.com/hs-fs/hubfs/font_web_hero_content_box_01.png?width=800&height=810&name=font_web_hero_content_box_01.png)

1

### Topline

font-size: 24 px  @ 1200 px  15 px @ 390 px   
line-height: 125 @ all   
letter-spacing: 0 @ all   
font-weight: Regular 400   
font-family: IBM Plex Mono   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

2

### Headline hero

font-size: 66 px @ 1720 px  30 px @ 390 px    
line-height:  106 @ 1720 px  118 @ 390 px  
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

3

### Text/list

font-size: 18 px @ 1200 px  14 px @ 390 px    
line-height: 150 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Headlines

![font_web_headlines_01](https://brand.riege.com/hs-fs/hubfs/font_web_headlines_01.png?width=800&height=786&name=font_web_headlines_01.png)

![font_web_headlines_02](https://brand.riege.com/hs-fs/hubfs/font_web_headlines_02.png?width=800&height=837&name=font_web_headlines_02.png)

1

### Headline large

font-size: 60 px @ 1720 px  27 px @ 390 px   
line-height: 105 @ 1720 px  118 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

2

### Headline medium

font-size: 54 px @ 1720 px  25 px @ 390 px   
line-height: 106 @ 1720 px  118 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

3

### Headline small

font-size: 47 px @ 1720 px  22 px @ 390 px   
line-height: 106 px @ 1720 px  118 @ 390 px letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Subline

![font_web_subline_01](https://brand.riege.com/hs-fs/hubfs/font_web_subline_01.png?width=800&height=518&name=font_web_subline_01.png)

1

### Subline

font-size: 31 px @ 1720 px  24 px @ 390 px   
line-height: 120 @ 1720 px  125 @ 390 px   
letter-spacing:  0.075 em @ 1720 px  0.05 em @ 390 px    
font-weight: Medium Condensed 500   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Links

![font_web_links_01](https://brand.riege.com/hs-fs/hubfs/font_web_links_01.png?width=800&height=800&name=font_web_links_01.png)

![font_web_links_02](https://brand.riege.com/hs-fs/hubfs/font_web_links_02.png?width=800&height=800&name=font_web_links_02.png)

1

### Anchor

font-size: 18 px @ all   
line-height: 125 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

2

### CTA small

font-size: 18 px @ all   
line-height: 125 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

3

### CTA medium

font-size: 28 px @ 1720 px  16 px @ 390   
px line-height: 106 @ 1720 px  125 @ 390 px letter-spacing: 0 @ all   
font-weight: Demi 600   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

4

### CTA large

font-size: 31 px @ 1720 px  16 px @ 390   
px line-height: 106 @ 1720 px  125 @ 390 px letter-spacing: 0 @ all   
font-weight: Demi 600   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

5

### Mobile jobs / events CTA

font-size: 14 px @ 390 px   
line-height: 125 @ 390 px   
letter-spacing: 0 @ 390 px   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Jobs und Events

![font_web_jobs_events_01](https://brand.riege.com/hs-fs/hubfs/font_web_jobs_events_01.png?width=800&height=260&name=font_web_jobs_events_01.png)

![font_web_jobs_events_02](https://brand.riege.com/hs-fs/hubfs/font_web_jobs_events_02.png?width=800&height=260&name=font_web_jobs_events_02.png)

1

### Jobs/events headline

ont-size: 31 px @ 1720 px  16 px @ 390 px  
line-height: 105 @ 1720 px  120 @ 390 px  
letter-spacing: 0.075 em @ 1720 px  0.05 em @ 390 px   
font-weight:  Medium Condensed 500   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

2

### Jobs subline

font-size: 20 px @ 1200 px  14 px @ 390 px  
line-height: 125 @ 1200  120 @ 390 px  
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

3

### Jobs/events date

font-size: 36 px @ 1720 px  15 px @ 390 px   
line-height: 105 @ 1720 px  120 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

4

### Events subline

font-size: 20 px @ 1200 px  14 px @ 390 px   
line-height: 125 @ 1200 px  120 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

5

### Section indicator

font-size: 24 px @ 1200 px  14 px @ 390   
px line-height: 105 @ 1200 px  120 @ 390 px letter-spacing: 0 @ all   
font-weight: Medium   
font-family: IBM Plex Mono    
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Zitate

![font_web_cite_01](https://brand.riege.com/hs-fs/hubfs/font_web_cite_01.png?width=800&height=800&name=font_web_cite_01.png)

![font_web_cite_02](https://brand.riege.com/hs-fs/hubfs/font_web_cite_02.png?width=800&height=800&name=font_web_cite_02.png)

1

### Cite

font-size: 54 px @ 1720 px  19 px @ 390 px   
line-height: 106 @ 1720 px  120 @ 390 px  
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

2

### Author

font-size: 24  px @ 1200 px 14 px @ 390 px   
line-height: 145  @ 1200 px  125 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Regular 400   
font-family: IBM Plex Mono   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

3

### Cite blog

font-size: 47 px @ 1720 px  22 px @ 390 px   
line-height: 106 @ 1720 px  120 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Regular 400   
font-family: IBM Plex Mono  
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

4

### Author blog

font-size: 16 px @ 1200 px  10 px @ 390 px   
line-height: 110 @ 1200 px  125 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Demi 600   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Accordion

![font_web_accordion_01](https://brand.riege.com/hs-fs/hubfs/font_web_accordion_01.png?width=800&height=569&name=font_web_accordion_01.png)

1

### Accordion

font-size: 27 px @ 1720 px  16 px @ 390 px   
line-height: 130 @ 1720 px  140 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Tab menue

![font_web_tab_menue_01](https://brand.riege.com/hs-fs/hubfs/font_web_tab_menue_01.png?width=800&height=462&name=font_web_tab_menue_01.png)

1

### Tab menue

font-size: 31 px @ 1720 px  16 px @ 390 px   
line-height: 130 @ 1720 px  140 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Demi 600   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

2

### Highlight

font-size: 31 px @ 1720 px  16 px @ 390 px   
line-height: 130 @ 1720 px  140 @ 390 px   
letter-spacing: 0.075 em @ 1720 px  0.05 em @ 390 px   
font-weight: Medium Condensed 500   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Teaser

![font_web_teaser_01](https://brand.riege.com/hs-fs/hubfs/font_web_teaser_01.png?width=800&height=1411&name=font_web_teaser_01.png)

![font_web_teaser_02](https://brand.riege.com/hs-fs/hubfs/font_web_teaser_02.png?width=800&height=1095&name=font_web_teaser_02.png)

1

### Teaser

font-size: 31 px @ 1720 px  16 px @ 390 px    
line-height: 130 @ 1720 px  140 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Demi 600   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Lightbox

![font_web_lightbox_01](https://brand.riege.com/hs-fs/hubfs/font_web_lightbox_01.png?width=800&height=349&name=font_web_lightbox_01.png)

1

### Lightbox Headline

font-size: 24 px @ all   
line-height: 125 @ all   
letter-spacing: 0.075 em @ all   
font-weight: Medium Condensed 500   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Slider

![font_web_slider_01](https://brand.riege.com/hs-fs/hubfs/font_web_slider_01.png?width=800&height=110&name=font_web_slider_01.png)

1

### Slider Headline

font-size: 24 px @ all   
line-height: 125 @ all   
letter-spacing: 0.075 em @ all   
font-weight: Medium Condensed 500   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Blog tag

![font_web_blog_tag_01](https://brand.riege.com/hs-fs/hubfs/font_web_blog_tag_01.png?width=800&height=89&name=font_web_blog_tag_01.png)

1

### blog tag

font-size: 18 px @ 1720 px  14 px @ 390 px   
line-height: 150 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Timeline

![font_web_timeline_01](https://brand.riege.com/hs-fs/hubfs/font_web_timeline_01.png?width=800&height=631&name=font_web_timeline_01.png)

1

### Timeline-card

font-size: 31 px @ 1720 px  16 px @ 390 px   
line-height: 106 @ 1720 px  125 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Demi 600   
font-family: Franklin Gothic FS   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Form

![font_web_form_01](https://brand.riege.com/hs-fs/hubfs/font_web_form_01.png?width=800&height=1067&name=font_web_form_01.png)

1

### Label textfield

font-size: 18 px @ 1720 px  14 px @ 390 px   
line-height: 150 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

2

### radio / checkbox / input field / select

font-size: 31 px @ 1720 px  16 px @ 390 px   
line-height: 120 @ 1720 px  Mobil 125 @ 390 px letter-spacing: 0 @ all   
font-weight: Demi 600   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

 Footer

![font_web_footer_01](https://brand.riege.com/hs-fs/hubfs/font_web_footer_01.png?width=800&height=131&name=font_web_footer_01.png)

![font_web_footer_02](https://brand.riege.com/hs-fs/hubfs/font_web_footer_02.png?width=800&height=132&name=font_web_footer_02.png)

1

### Footer headline

font-size: 20 px @ 1200 px  15 px @ 390 px   
line-height: 106 @ 1200 px  125 @ 390 px    
letter-spacing: 0 @ all   
font-weight: Regular 400   
font-family: IBM Plex Mono   
text-transform: uppercase

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

2

### Footer link

font-size: 18 px @ 1200 px  14 px @ 390 px   
line-height: 155 @ all   
letter-spacing: 0 @ all   
font-weight: Book 400   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

3

### Credits

font-size: 16 px @ 1200 px  12 px @ 390 px   
line-height: 106 @ 1200 px  125 @ 768 px  
letter-spacing: 0 @ all   
font-weight: Regular 400   
font-family: IBM Plex Mono   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```

4

### Footer mail

font-size: 20 px @ 1200 px  15 px @ 390 px   
line-height: 105 @ 1200 px  110 @ 390 px   
letter-spacing: 0 @ all   
font-weight: Demi 600   
font-family: Franklin Gothic FS   
text-transform: none

copy code

```
font-size: clamp(1.875rem, 1.875rem + (1vw - 0.24375rem) * 2.7068, 4.125rem);line-height: clamp(2.2125rem, 2.2125rem + (1vw - 0.24375rem) * 2.6015, 4.375rem);font-weight: 400;font-family: "Franklin Gothic FS", Impact, sans-serif;text-transform: none;
```