Typography
The typography of our Creative Framework is divided into different areas. How you use it and which option it includes is described in the sections below. In this section you will find everything about the typography of the framework.
Title
The title contains five different title classes which determine the size of a headline. The classes begin with the class name title-size, whereby the desired size must be used instead of size. The following sizes are available: .xs, .sl, .md, .lg and .xl. Titles should be used for headings related to paragraphs.
Titel-xl
Titel-lg
Titel-md
Titel-sl
Titel-xs
<span class="title-xl">Titel-xl</span>
<span class="title-lg">Titel-lg</span>
<span class="title-md">Titel-md</span>
<span class="title-sl">Titel-sl</span>
<span class="title-xs">Titel-xs</span>
Heading
The headlines tags <h1> to <h6> were also styled by the team with different sizes. No class name is required for the headings.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraph
Like the headlines tags, the <p> tag has been styled to make it easy for the user to create content elements consisting of a title or heading and a paragraph. The <p> day has a margin of 1rem and a line-height of 1.5rem.
Das ist ein Paragraf
Das ist ein weiterer Paragraf
Das ist der letzte Paragraf
<p>Das ist ein Paragraf</p>
<p>Das ist ein weiterer Paragraf</p>
<p>Das ist der letzte Paragraf</p>
Text Shadow
The Creative Framework offers a selection of text shadows that are divided into two types of .hard and .blur. You can use the class name text-art-strength to call the desired shadows. With the text Shadow Strength there are 3 different gradations 1, 2 and 3. The class for a blur shadow could look like this: text-blur-3.
Text Blur-Schatten leichtText Hard-Schatten leicht
Text Blur-Schatten mittelText Hard-Schatten mittle
Text Blur-Schatten starkText Hard-Schatten stark
<span class="text-blur-1">Text Blur-Schatten leicht</span> <span class="text-hard-1">Text Hard-Schatten leicht</span>
<span class="text-blur-2">Text Blur-Schatten mittel</span> <span class="text-hard-2">Text Hard-Schatten mittle</span>
<span class="text-blur-3">Text Blur-Schatten stark</span> <span class="text-hard-3">Text Hard-Schatten stark</span>
Text Alignment
For text alignment there are also classes that make it easier for the user to align text. The classes can also be called with the class name .text-position, whereby there are three types of position. Position right .text-right, position left .text-left and position centered .text-center.
Dieser Paragraph ist rechts ausgerichtetet.
Dieser Paragraph ist links ausgerichtetet.
Dieser Paragraph ist zentriertet.
<p class="text-right">Dieser Paragraph ist rechts ausgerichtetet.</p>
<p class="text-left">Dieser Paragraph ist links ausgerichtetet.</p>
<p class="text-center">Dieser Paragraph ist zentriertet.</p>
Font Weight
The class name .text-strength can be used to determine the font size of a paragraph or an individual text element. As options for the thickness there are 3 different classes .text-bold, .text-medium and .text-light. The .text-bold class sets the font-weight to bold. The classes .text-medium and .text-light also set the font-weight of the element to medium and lighter. There is also .text-thin and .text-thick .
Dieser Text ist bold.
Dieser Text ist medium.
Dieser Text ist light.
Dieser Text ist thin.
Dieser Text ist thick.
<p class="text-bold">Dieser Text ist bold.</p>
<p class="text-medium">Dieser Text ist medium.</p>
<p class="text-light">Dieser Text ist light.</p>
<p class="text-thin">Dieser Text ist thin.</p>
<p class="text-thick">Dieser Text ist thick.</p>
Font Family
There are a variety of fonts available in our framework. We have selected 10 different fonts which can be called up via class name. The class name is composed of .font-type font. Instead of type, the desired font name should be used. The class of the font should be inserted into the body to give the document a uniform style. We offer the following fonts: .roboto,.open-sans,.merriweather, .nunito,.raleway,.roboto-serif, .merriweather-serif,.pt-serif,.eb-garamond, .source,.amatic and .kavicanar.
Roboto
Merriweather
Nunito
Raleway
Roboto Serif
Merriweather Serif
PT Serif
EB Garamond
Source
Amatic
Kavicanar
<span class="font-roboto">Roboto</span>
<span class="font-merriweather">Merriweather</span>
<span class="font-nunito">Nunito</span>
<span class="font-raleway">Raleway</span>
<span class="font-roboto-serif">Roboto Serif</span>
<span class="font-merriweather-serif">Merriweather Serif</span>
<span class="font-pt-serif">PT Serif</span>
<span class="font-eb-garamond">EB Garamond</span>
<span class="font-source">Source</span>
<span class="font-amatic">Amatic</span>
<span class="font-kavicanar">Kavincanar</span>
Lists
Several classes have also been provided to style lists. All lists <ul>, <ol> and <dl>are available. There is the class .list-inline, .list-styled and .list-unstyled. In all lists, margin-top has been removed and a margin-bottom 1rem has been added. The class .list-unstyled has no bullets and the class .list-inline represents a list as an inline-block element. The styled list .list-styled has unfilled points as listing characters and the general margin and padding properties of all lists.
- Erstes Listen Element
- Zweites Listen Element
- Drittes Listen Element
- Viertes Listen Element
- Fünftes Listen Element
- Erstes Listen Element
- Zweites Listen Element
- Drittes Listen Element
- Viertes Listen Element
- Fünftes Listen Element
- Erstes Listen Element,
- Zweites Listen Element,
- Drittes Listen Element,
- Viertes Listen Element,
- Fünftes Listen Element,
<ul class="list-unstyled">
<li>Erstes Listen Element</li>
<li>Zweites Listen Element</li>
<li>Drittes Listen Element</li>
<li>Viertes Listen Element</li>
<li>Fünftes Listen Element</li>
</ul>
<ul class="list-styled">
<li>Erstes Listen Element</li>
<li>Zweites Listen Element</li>
<li>Drittes Listen Element</li>
<li>Viertes Listen Element</li>
<li>Fünftes Listen Element</li>
</ul>
<ul class="list-inline">
<li>Erstes Listen Element</li>
<li>Zweites Listen Element</li>
<li>Drittes Listen Element</li>
<li>Viertes Listen Element</li>
<li>Fünftes Listen Element</li>
</ul>
Additional Formats
Inline text elements can be used to highlight text or allow special formatting of text. Creative Framework has the following tags <em>, <i>,<b>,<del>, <small>, <strong> und <mark> styled by default. Particularly important inline text elements are <i> for italics, <b> for bold text and <del> for crossed out text.
Ein Teil des Textes ist leicht hervorgehoben
Ein Teil des Textes ist kursive
Ein Teil des Textes is bold
Ein Teil des Textes ist durchgestrichen
Ein Teil des Textes ist strong
Dieser Text ist makiert.
<p>Ein Teil des Textes ist leicht <em>hervorgehoben</em></p>
<p>Ein Teil des Textes ist <i>kursive</i></p>
<p>Ein Teil des Textes is <b>bold</b></p>
<p>Ein Teil des Textes ist <del>durchgestrichen</del>
<p>Ein Teil des Textes ist <strong>strong</strong></p>
<p><mark>Dieser Text ist makiert.</mark></p>
Links
Since links are an important part of a website, our framework has a selection of different link designs. They can easily be called using the class name link-type. The following options are available for the type of links: .link-slide,.link-change-color, .link-scale-small,.link-scale-big,.link-heartbeat, .link-underline-green,.link-underline-white,.link-underline-blue, .link-underline-red,.link-lighten,.link-darken, .link-bg and link-crossed.
www.google.at
www.google.at
www.google.at
www.google.at
www.google.at
www.google.at
www.google.at
www.google.at
www.google.at
www.google.at
www.google.at
www.google.at
<a href="https://www.google.at" class="link-slide">www.google.at</a>
<a href="https://www.google.at" class="link-change-color">www.google.at</a>
<a href="https://www.google.at" class="link-scale-big">www.google.at</a>
<a href="https://www.google.at" class="link-scale-small">www.google.at</a>
<a href="https://www.google.at" class="link-underline-white">www.google.at</a>
<a href="https://www.google.at" class="link-underline-green">www.google.at</a>
<a href="https://www.google.at" class="link-underline-blue">www.google.at</a>
<a href="https://www.google.at" class="link-underline-red">www.google.at</a>
<a href="https://www.google.at" class="link-heartbeat">www.google.at</a>
<a href="https://www.google.at" class="link-darken">www.google.at</a>
<a href="https://www.google.at" class="link-lighten">www.google.at</a>
<a href="https://www.google.at" class="link-crossed">www.google.at</a>