Germanedge Sans

Typography is usefull for structuring information in a sense of giving elements the right hierarchie. It can be part of a pleasurable user experience.

At Germanedge we use our own font, which was designed for best readability and clarity on any kind of monitor. 

You can download the font here:




The controlled usage and the right treatment of typography is helping to manage the shown content.

Colors

Type color should always be used in a way, that legibility and accessibility are ensured. In running text neutral colors are best, for warnings or errors yellow or red is only allowed if the background is appropriate.


Weights

Font weight is an important property of typographic elements. They can add importance to elements or include elements in a hierarchy. A bold weight is always more emphatic than a lighter weight font on the same size. 

                                                                                                                                                        

Usage in Body Element

please install GermanedgeSans for examples below.


Theme layouts for long paragraphs with more than four lines. It is a good size for comfortable, long-
form reading. We also use this for longer body copy in components such as Accordion or Structured
List.

body-01

Type: GermanedgeSansCn
Size: 14px
Line height: 18px
Weight: 100 / Regular
Line-spacing: 0px

$body-01

theme layouts for long paragraphs with more than four lines. It is a good size for comfortable, long-
form reading. We also use this for longer body copy in components such as Accordion or Structured List.

body-02

Type: GermanedgeSansCn
Size: 16px
Line height: 20px
Weight: 100 / Regular
Line-spacing: 0px

$body-02


Usage in Headline 

please install GermanedgeSans for examples below.

This is for focus layout headings.

Headline-01

Type: GermanedgeSans
Size: 12px
Line height: 16px
Weight: 200 / Semibold
Line-spacing: 0px

$headline-01

This is for focus layout headings.

Headline-02

Type: GermanedgeSans
Size: 14px
Line height: 18px
Weight: 200 / Semibold
Line-spacing: 0px

$headline-02

This is for focus layout headings.

Headline-03

Type: GermanedgeSansCn
Size: 18px
Line height: 24px
Weight: 200 / Semibold
Line-spacing: 0px

$headline-03

This is for focus layout headings.

Headline-focus-01

Type: GermanedgeSans
Size: 24px
Line height: 30px
Weight: 300 / Bold
Line-spacing: 0px

$headline-focus-01

This is for focus layout headings.

Headline-focus-02

Type: GermanedgeSans
Size: 32px
Line height: 40px
Weight: 300 / Bold
Line-spacing: 0px

$headline-focus-02

This is for focus layout headings.

Headline-focus-03

Type: GermanedgeSans
Size: 42px
Line height: 50px
Weight: 300 / Bold
Line-spacing: 0px

$headline-focus-03

This is for focus layout headings.

Headline-focus-04

Type: GermanedgeSans
Size: 72px
Line height: 80px
Weight: 300 / Bold
Line-spacing: 0px

$headline-focus-04



pawel tomkowski  Tomasz could you place code fragments here?