Versions Compared

Old Version 11

changes.mady.by.user Sascha Ziegler

Saved on

compared with

New Version Current

changes.mady.by.user Oliver Prudlik

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

250
UI Tabs


UI Tab
titleOverview

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:

View file
nameGermanedgeSans.zip
height250




UI Tab
titleUsage

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. 

Image Removed                                                                                                                                                        

Italic

Each weight has an italic style, which should only be used when you need to emphasize certain words in a sentence (titles of works, technical terms, names of devices, and captions).

UI Tab
titleCode
pawel tomkowski  Tomasz could you place code fragments here?
View file
nameGermanedgeSans.zip
height

  

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



UI Tab
titleCode
Please have a look in the live-style-guide