185 lines
No EOL
5.3 KiB
Markdown
185 lines
No EOL
5.3 KiB
Markdown
---
|
|
layout: page
|
|
title: "Wonderful Typography"
|
|
subtitle: "Reading Experience"
|
|
description: "<em>Feeling Responsive</em> uses Volkhov for headlines, Source Sans Pro for everything else and if you are in need to show some code, it will be in Lucida Console."
|
|
image_header: "no"
|
|
permalink: "/design/typography/"
|
|
---
|
|
Noch mehr Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
|
|
## Second <h2>-Heading
|
|
|
|
> Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
|
|
|
|
### Third <h3>-Heading
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
* Some Bulletpoints
|
|
* Some Bulletpoints
|
|
* Some Bulletpoints
|
|
* Some Bulletpoints
|
|
* Some Bulletpoints
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
|
|
|
|
#### Forth <h4>-Heading
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
|
|
#### Fifth <h5>-Heading
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
|
|
## Typographical Elements
|
|
|
|
Here you'll find the [complete list of HTML5-Tags][1] and this is how they look like.
|
|
|
|
### <hr> Horizontal Lines
|
|
<hr>
|
|
|
|
### <pre> Displaying Code
|
|
~~~
|
|
<html>
|
|
<head>
|
|
<title>Code Blocks</title>
|
|
</head>
|
|
<body></body>
|
|
</html>
|
|
~~~
|
|
|
|
### <blockquote> Quotation
|
|
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
|
|
|
|
### <ol> Ordered Lists
|
|
1. One
|
|
2. Two
|
|
3. Three
|
|
4. Second Level One
|
|
4. Second Level Two
|
|
4. Second Level Three
|
|
5. And a third level one
|
|
5. And a third level two
|
|
5. And a third level three
|
|
4. Four
|
|
5. Five
|
|
|
|
### <ul> Unordered Lists
|
|
- One item
|
|
+ Second Level Item One
|
|
+ Second Level Item Two
|
|
+ Second Level Item Three
|
|
* Third Level One
|
|
* Third Level Two
|
|
* Third Level Three
|
|
- Second item
|
|
- Third item
|
|
- Fourth item
|
|
- Fifth item and so on...
|
|
|
|
### <dl> Definition Lists
|
|
|
|
<dl>
|
|
<dt>Definition Lists</dt>
|
|
<dd>are beautiful</dd>
|
|
<dd>organize content</dd>
|
|
<dt>Definition Lists</dt>
|
|
<dd>Item One</dd>
|
|
<dt>Definition Lists</dt>
|
|
<dd>One more Item</dd>
|
|
</dl>
|
|
|
|
### <a>
|
|
[Links][2] make the web exceptional.
|
|
|
|
|
|
### <em>
|
|
Let's *emphasize* how important responsive webdesign is.
|
|
|
|
### <strong>
|
|
This looks like **bold** text.
|
|
|
|
### <small>
|
|
<small>This is small text.</small>
|
|
|
|
### <s>
|
|
|
|
### <cite>
|
|
|
|
### <q>
|
|
|
|
### <dfn>
|
|
|
|
### <abbr>
|
|
|
|
### <time>
|
|
|
|
### <code>
|
|
|
|
Some `code: lucida console` displayed.
|
|
|
|
### <var>
|
|
|
|
### <samp>
|
|
|
|
### <kbd>
|
|
|
|
### <sub>
|
|
|
|
### <i>
|
|
|
|
### <b>
|
|
|
|
### <u>
|
|
|
|
### <mark>
|
|
|
|
### <br>
|
|
|
|
## Tables
|
|
<table>
|
|
<caption>
|
|
<colgroup>
|
|
<col>
|
|
<tbody>
|
|
<thead>Tabellenspalten enthalten.
|
|
<tfoot>Tabellenspalten enthalten.
|
|
<tr> Steht für eine Zeile mit Tabellenzellen.
|
|
<td> Kennzeichnet eine einzelne Tabellenzelle.
|
|
<th>
|
|
|
|
|
|
|
|
|
|
|
|
[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
|
|
[2]: http://phlow.de/
|
|
[3]: #
|
|
[4]: #
|
|
[5]: #
|
|
[6]: #
|
|
[7]: #
|
|
[8]: #
|
|
[9]: #
|
|
[10]: # |