295 lines
No EOL
7.9 KiB
Markdown
295 lines
No EOL
7.9 KiB
Markdown
---
|
|
layout: page
|
|
title: "Wonderful Typography"
|
|
subheadline: "Reading Experience"
|
|
meta_description: "Feeling Responsive uses Volkhov for headlines, Lato for everything else and if you are in need to show some code, it will be in Lucida Console."
|
|
description: "<em>Feeling Responsive</em> uses Volkhov for headlines, Lato 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. Ordered List
|
|
2. Second List Item
|
|
3. Third List Item
|
|
4. Second Level First Item
|
|
4. Second Level Second Item
|
|
4. Second Level Third Item
|
|
5. And a third level First Item
|
|
5. And a third level Second Item
|
|
5. And a third level Third Item
|
|
4. Fourth List Item
|
|
5. Fifth List Item
|
|
|
|
|
|
### <ul> Unordered Lists
|
|
|
|
- Unordered List
|
|
- Second List Item
|
|
- Third List Item
|
|
+ Second Level First Item
|
|
+ Second Level Second Item
|
|
+ Second Level Third Item
|
|
* And a third level First Item
|
|
* And a third level Second Item
|
|
* And a third level Third Item
|
|
- Fourth List Item
|
|
- Fifth List Item
|
|
|
|
### <dl> Definition Lists
|
|
|
|
Definition List
|
|
: Bacon ipsum dolor sit amet spare ribs brisket ribeye, andouille sirloin bresaola frankfurter corned beef capicola bacon. Salami beef ribs sirloin, short loin hamburger shoulder t-bone.
|
|
|
|
Beef ribs jowl swine porchetta
|
|
: Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.
|
|
|
|
Pancetta flank sirloin pork
|
|
: short ribs shankle prosciutto landjaeger. Beef ribs turkey shoulder drumstick. Leberkas pork belly ribeye, bresaola jerky strip steak tenderloin bacon landjaeger short ribs beef ribs. Flank pork chop fatback tail kielbasa filet mignon jowl landjaeger bresaola tongue corned beef biltong. Landjaeger spare ribs fatback corned beef tenderloin drumstick, swine chicken beef turkey biltong doner tri-tip filet mignon.
|
|
|
|
|
|
### <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>
|
|
|
|
It's nice getting things done. Just strike through <s>finished tasks</s>.
|
|
|
|
|
|
|
|
### <cite>
|
|
|
|
<cite>Albert Einstein</cite>
|
|
|
|
|
|
|
|
### <q>
|
|
|
|
If you use <q> your text gets <q>automagically quotes around the text passage</q>.
|
|
|
|
|
|
|
|
### <dfn>
|
|
|
|
The <dfn> tag is a phrase tag. It defines a <dfn>definition term</dfn>.
|
|
|
|
|
|
|
|
### <abbr>
|
|
|
|
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
|
|
|
|
|
|
|
|
### <time>
|
|
|
|
The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.
|
|
|
|
|
|
### <code>
|
|
|
|
Some `code: lucida console` displayed.
|
|
|
|
|
|
|
|
### <var>
|
|
|
|
The <var> tag is a phrase tag. It defines a <var>variable</var>.
|
|
|
|
|
|
|
|
### <samp>
|
|
|
|
Text surrounded by <samp> <samp>looks like this in monospace</samp>.
|
|
|
|
|
|
|
|
### <kbd>
|
|
|
|
Copycats enjoy pressing <kbd>CMD</kbd> + <kbd>c</kbd> and <kbd>CMD</kbd> + <kbd>v</kbd>.
|
|
|
|
|
|
|
|
### <sub>
|
|
|
|
This text <sub>lays low</sub> and chills a bit.
|
|
|
|
|
|
|
|
### <i>
|
|
|
|
This looks <i>italic</i>.
|
|
|
|
|
|
|
|
### <b>
|
|
|
|
This looks <b>bold</b>, too.
|
|
|
|
|
|
|
|
### <u>
|
|
|
|
<u>Underlining</u> content for emphasize is not the best choice.
|
|
|
|
|
|
|
|
### <mark>
|
|
Let's <mark>mark this hint</mark> to give you a clue.
|
|
|
|
|
|
|
|
|
|
### <br>
|
|
|
|
Need a break? I give you three!<br><br><br>
|
|
|
|
## Tables
|
|
|
|
<table>
|
|
<thead>
|
|
<caption>Caption For Table</caption>
|
|
<tr>
|
|
<th width="200">Table Header</th>
|
|
<th>Table Header</th>
|
|
<th width="150">Table Header</th>
|
|
<th width="150">Table Header</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Content Goes Here</td>
|
|
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
|
|
<td>Content Goes Here</td>
|
|
<td>Content Goes Here</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Content Goes Here</td>
|
|
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
|
|
<td>Content Goes Here</td>
|
|
<td>Content Goes Here</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Content Goes Here</td>
|
|
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
|
|
<td>Content Goes Here</td>
|
|
<td>Content Goes Here</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
A table can consist of these elements
|
|
|
|
* `<table>
|
|
* `<caption>
|
|
* `<colgroup>
|
|
* `<col>
|
|
* `<tbody>
|
|
* `<thead>
|
|
* `<tfoot>
|
|
* `<tr>
|
|
* `<td>
|
|
* `<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]: # |