Typography

Schrift-Fonts

Roboto 100 (thin)
 FONT CODE

Roboto
The quick brown fox jumps over the lazy dog.
The sky was cloudless and of a deep dark blue. Then came the night of the first falling star. Waves flung themselves at the blue evening. «»!#$%&()*+,-./ 0123456789 :;<=>?@

Roboto 300 (light)
 FONT CODE

Roboto
The quick brown fox jumps over the lazy dog.
The sky was cloudless and of a deep dark blue. Then came the night of the first falling star. Waves flung themselves at the blue evening. «»!#$%&()*+,-./ 0123456789 :;<=>?@

Roboto 400 (regular)
 FONT CODE

Roboto
The quick brown fox jumps over the lazy dog.
The sky was cloudless and of a deep dark blue. Then came the night of the first falling star. Waves flung themselves at the blue evening. «»!#$%&()*+,-./ 0123456789 :;<=>?@

Roboto 500 (medium)
 FONT CODE

Roboto
The quick brown fox jumps over the lazy dog.
The sky was cloudless and of a deep dark blue. Then came the night of the first falling star. Waves flung themselves at the blue evening. «»!#$%&()*+,-./ 0123456789 :;<=>?@

Roboto 700 (bold)
 FONT CODE

Roboto
The quick brown fox jumps over the lazy dog.
The sky was cloudless and of a deep dark blue. Then came the night of the first falling star. Waves flung themselves at the blue evening. «»!#$%&()*+,-./ 0123456789 :;<=>?@

Schrift-Grössen

H4 Size (S Viewport)
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: italic; font-weight: 300;

H3 Size (S Viewport)
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: italic; font-weight: 300;

H3 Size (M Viewport)
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 24px; line-height: 29px; font-family: 'Roboto'; font-style: italic; font-weight: 300;

H2 Size (S Viewport)
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: italic; font-weight: 300;

H1 Size (M Viewport)
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 48px; line-height: 56px; font-family: 'Roboto'; font-style: normal; font-weight: 100;

H2 Size (M Viewport)
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 24px; line-height: 29px; font-family: 'Roboto'; font-style: italic; font-weight: 300;

H1 Size (S Viewport)
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 32px; line-height: 38px; font-family: 'Roboto'; font-style: normal; font-weight: 100;

H5 Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: normal; font-weight: 300;

H3 Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 26px; line-height: 32px; font-family: 'Roboto'; font-style: normal; font-weight: 300;

Body-Text Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 16px; line-height: 26px; font-family: 'Roboto'; font-style: normal; font-weight: 300;

H1 Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 54px; line-height: 62px; font-family: 'Roboto'; font-style: normal; font-weight: 100;

H4 Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 24px; line-height: 28px; font-family: 'Roboto'; font-style: normal; font-weight: 300;

Intro-Text Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 18px; line-height: 28px; font-family: 'Roboto'; font-style: normal; font-weight: 500;

Very-Large-Text Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 65px; line-height: 74px; letter-spacing: 0.02rem; word-spacing: 0.04rem;font-family: 'Roboto'; font-style: normal; font-weight: 500;

Very-Small-Text Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 13px; line-height: 17px; font-family: 'Roboto'; font-style: normal; font-weight: 400;

H2 Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 30px; line-height: 36px; font-family: 'Roboto'; font-style: normal; font-weight: 300;

Large-Text Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 28px; line-height: 36px; font-family: 'Roboto'; font-style: normal; font-weight: 300;

Small-Text Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 14px; line-height: 18px; font-family: 'Roboto'; font-style: normal; font-weight: 400;

Logo Caption Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 16px; line-height: 17px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400;

Logo Caption Size (mobile)
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 12px; line-height: 13px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400;

Logo Caption Size (mobile) 2 rows
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 10px; line-height: 13px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400;

Extra-Small-Text Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 12px; line-height: 18px; letter-spacing: 0; word-spacing: 0; font-family: 'Roboto'; font-style: normal; font-weight: 400;

H6 Size
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 18px; line-height: 21px; font-family: 'Roboto'; font-style: normal; font-weight: 300;

Body-Text Size (mobile)
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 15px; line-height: 24px; font-family: 'Roboto'; font-style: normal; font-weight: 300;

Intro-Text Size (mobile)
 CODE

ABCabc123,.-@&€
XYZxyz890?!+#$
font-size: 16px; line-height: 23px; font-family: 'Roboto'; font-style: normal; font-weight: 500;