Reading Experience

Handcrafted Typography

With Simplicity you can use your favorite web font. Based on one font-size you can change the font and the size in a blink of an eye. Set your favorite font in _config.yml. To customize your typography settings just open _sass/_04_typography.scss and make your adjustements.

The Elements of Typographic Style

»I do not think of type as something that should be readable. It should be beautiful.«Ed Benguiat

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.

Robert Bringhurst’s book The Elements of Typographic Style is on many a designer’s bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be a must for everybody in the graphic arts, and especially for our new friends entering the field.

In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.

At the time of writing, this is a work in progress. I am adding to the site in the order presented in Bringhurst’s book, one principle at a time.

I am excluding those principles which are not relevant to the Web or that do not require a technical explanation. Unfortunately this excludes the entire opening chapter, the Grand Design, which I heartily recommend you read as it lays down the foundations, philosophy and approach to good typography in any medium. If you were to take any working principle from the Grand Design, it would be this: Give full typographical attention even to incidental details.

Now start with Rhythm & Proportion or dip into the Table of Contents and enjoy pushing a few boundaries to create websites of real typographical worth.

This excerpt was taken from webtypography.net

Typographical Elements

Here you’ll find the complete list of HTML5-Tags and this is how they look like.

<hr> Horizontal Line

<pre> Displaying Code

<html>
    <head>
        <title>Code Blocks</title>
    </head>
    <body></body>
</html>

<blockquote> Quotation

Everything happens for a reason. (Britney Spears)

<blockquote> and <cite> together

Age is an issue of mind over matter. If you don’t mind, it doesn’t matter. Mark Twain

<ol> Ordered Lists

  1. Ordered List
  2. Second List Item
  3. Third List Item
    1. Second Level First Item
    2. Second Level Second Item
    3. Second Level Third Item
      1. And a third level First Item
      2. And a third level Second Item
      3. 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 make the web exceptional.

<em>

Let’s emphasize how important responsive webdesign is.

<strong>

This looks like bold text.

<small>

This is small text.

<s>

It’s nice getting things done. Just strike through finished tasks.

<cite>

Albert Einstein

<q>

If you use <q> your text gets automagically quotes around the text passage.

<dfn>

The <dfn> tag is a phrase tag. It defines a definition term.

<abbr>

The WHO was founded in 1948.

<time>

The concert took place on .

<code>

Some code: lucida console displayed.

<var>

The <var> tag is a phrase tag. It defines a variable.

<samp>

Text surrounded by <samp> looks like this in monospace.

<kbd>

Copycats enjoy pressing CMD + c and CMD + v.

<sub>

This text lays low and chills a bit.

<sup>

This text gets high above the clouds.

<i>

This looks italic.

<b>

This looks bold, too.

<u>

Underlining content for emphasize is not the best choice. You can't read it so well.

<mark>

Let’s mark this hint to give you a clue.

<br>

Need a break? I give you three!


Footnotes

If you need footnotes for your posts, articles and entries, the Kramdown-Parser 1 got you covered. How to use footnotes? Read this footnote. 2

Headlines

<h1>-Heading

<h2>-Heading

<h3>-Heading

<h4>-Heading

<h5>-Heading
<h6>-Heading

Tables

Even tables are responsive thanks to foundation. A table can consist of these elements.

</col></col></col>
<table> defines an HTML table
HTML TagDefintionStyle
<caption>defines a table captionfont-weight: bold;
<colgroup>specifies a group of one or more columns in a table for formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.no styling needed
<col>specifies column properties for each column within a `<colgroup>` elementno styling needed
<thead>is used to group header content in an HTML tablefont-weight: bold;
<tbody>is used to group the body content in an HTML tableno styling needed
<tr>defines a row in an HTML tableno styling needed
<th>defines a header cell in an HTML tablefont-weight: bold;
<td>defines a standard cell in an HTML tablefont-weight: normal;
<tfoot>is used to group footer content in an HTML tableno styling needed </table>

  1. Find out more about Kramdown on http://kramdown.gettalong.org/ ↩

  2. Kramdown has an excellent documentation of all its features. Check out, on how to footnotes. ↩

Written by Moritz »mo.« Sauer //