Fonts

Hauptschriftart ist Arial. Für die Schrift sind die H-Tags von 1 bis 4 möglich und der P-Tag. Diese sind durch die eingebundenen CSS-Dateien festgelegt und bringen das jeweils korrekte Styling für das verwendete Vertical mit.

Für Icons wird Font Awesome, aktuell in der Version 5. Hier gilt zu beachten, dass rein dekorative Icons zur Gewährleistung der Barrierefreiheit mit dem Attribut aria-hidden="true" versehen werden müssen.

Von einer Verwendung anderer Schriftschnitte oder Veränderung der vorgegebenen Einheiten ist dringend abzusehen, da dies zu Inkonsistenzen führt.

Main font is Arial. The H-tags from 1 to 4 and the P-tag are possible for the font. They are defined through the integrated CSS files and include the correct styling for the vertical used.

Font Awesome, currently in version 5, is used for icons. Be sure to include the attribute aria-hidden="true" for decorative icons in order to ensure accessibility.

Use of other font styles or changing of the given units should be strictly avoided because this will lead to inconsistencies.

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>

Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Link Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
    Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
    <a href="#randomtarget160">Link</a>
    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, 
    imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. 
    Cras dapibus.</p>

Metatext / Category

Ich bin eine Metaangabe oder eine Kategorie

<p class="text--meta">Ich bin eine Metaangabe oder eine Kategorie</p>

Caption

Ich bin eine Bildunterschrift

<p class="image__caption">Ich bin eine Bildunterschrift</p>

Copyright

Ich bin eine Copyrightangabe unter einem Bild

<p class="image__copyright">Ich bin eine Copyrightangabe unter einem Bild</p>

Hilfs- und Infotexte

Hilfs- und Infotexte werden in kleinerer Schriftgröße dargestellt (erfolgt meistens automatisch über das entsprechende Modulmarkup)

<p class="text--small">Hilfs- und Infotexte werden in kleinerer Schriftgröße dargestellt (erfolgt meistens automatisch über das entsprechende Modulmarkup)</p>

Menü