Typography
Below is just about everything you’ll need to style in the app. Check the source code to see the many embedded elements within paragraphs.
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>
Font Features
We apply some font-features such as ligatures and kerning to headlines. Here's an example that should have it applied.
Note that these features are not available in every font. In particular, our headlines use the system font stack, and these rules don't seem to have any affect on the Mac system font.
LYoWAT - 1lI - Difficult Waffles - ff fi fl ffi Th
LYoWAT - 1lI - Difficult Waffles - ff fi fl ffi Th
LYoWAT - 1lI - Difficult Waffles - ff fi fl ffi Th
LYoWAT - 1lI - Difficult Waffles - ff fi fl ffi Th
<h1>LYoWAT - 1lI - Difficult Waffles - ff fi fl ffi Th</h1>
<h2>LYoWAT - 1lI - Difficult Waffles - ff fi fl ffi Th</h2>
<h3>LYoWAT - 1lI - Difficult Waffles - ff fi fl ffi Th</h3>
<p>LYoWAT - 1lI - Difficult Waffles - ff fi fl ffi Th</p>
Text Level Semantics
The a element example
The abbr element and
abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and
dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element
example inside
a q element
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example
<p>
The <a href="#">a element</a> example <br />
The <abbr>abbr element</abbr> and
<abbr title="Title text">abbr element with title</abbr> examples <br />
The <b>b element</b> example <br />
The <cite>cite element</cite> example <br />
The <code>code element</code> example <br />
The <del>del element</del> example <br />
The <dfn>dfn element</dfn> and
<dfn title="Title text">dfn element with title</dfn> examples <br />
The <em>em element</em> example <br />
The <i>i element</i> example <br />
The <ins>ins element</ins> example <br />
The <kbd>kbd element</kbd> example <br />
The <mark>mark element</mark> example <br />
The <q>q element <q>inside</q> a q element</q> example <br />
The <s>s element</s> example <br />
The <samp>samp element</samp> example <br />
The <small>small element</small> example <br />
The <span>span element</span> example <br />
The <strong>strong element</strong> example <br />
The <sub>sub element</sub> example <br />
The <sup>sup element</sup> example <br />
The <var>var element</var> example <br />
The <u>u element</u> example
</p>
Link Styles
<ul>
<li><a href="#">Default Link</a></li>
<li><a href="#" class="link--primary">Primary Link</a></li>
<li><a href="#" class="link--danger">Danger Link</a></li>
</ul>
Lists
Definition List
- Definition List Title
- This is a definition list division.
- Definition
- An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.
Ordered List
- List Item 1
-
List Item 2
- Nested list item A
- Nested list item B
- List Item 3
Unordered List
- List Item 1
-
List Item 2
- Nested list item A
- Nested list item B
- List Item 3
<h3>Definition List</h3>
<dl>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
<dt>Definition</dt>
<dd>
An exact statement or description of the nature, scope, or meaning of
something:
<em>our definition of what constitutes poetry.</em>
</dd>
</dl>
<h3>Ordered List</h3>
<ol>
<li>List Item 1</li>
<li>
List Item 2
<ol>
<li>Nested list item A</li>
<li>Nested list item B</li>
</ol>
</li>
<li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>
List Item 2
<ul>
<li>Nested list item A</li>
<li>Nested list item B</li>
</ul>
</li>
<li>List Item 3</li>
</ul>
Tables
| Captain | XO | Doctor | Engineer | |
|---|---|---|---|---|
| Enterprise | James Kirk | Spock | Leonard McCoy | Montgomery Scott |
| Enterprise D | Jean-Luc Picard | William Riker | Beverly Crusher | Geordi LaForge |
| Galactica | William Adama | Saul Tigh | Doc Cottle | Galen Tyrol |
| Serenity | Malcom Reynolds | Zoë Washburne | Simon Tam | Kaylee Frye |
<table>
<tr>
<th> </th>
<th>Captain</th>
<th>XO</th>
<th>Doctor</th>
<th>Engineer</th>
</tr>
<tr>
<th>Enterprise</th>
<td>James Kirk</td>
<td>Spock</td>
<td>Leonard McCoy</td>
<td>Montgomery Scott</td>
</tr>
<tr>
<th>Enterprise D</th>
<td>Jean-Luc Picard</td>
<td>William Riker</td>
<td>Beverly Crusher</td>
<td>Geordi LaForge</td>
</tr>
<tr>
<th>Galactica</th>
<td>William Adama</td>
<td>Saul Tigh</td>
<td>Doc Cottle</td>
<td>Galen Tyrol</td>
</tr>
<tr>
<th>Serenity</th>
<td>Malcom Reynolds</td>
<td>Zoë Washburne</td>
<td>Simon Tam</td>
<td>Kaylee Frye</td>
</tr>
</table>
Blockquotes
Let’s keep it simple. Italics are good to help set it off from the body text. Be sure to style the citation.
Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you.
And here’s a bit of trailing text.
<p>
Let’s keep it simple. Italics are good to help set it off from the body text.
Be sure to style the citation.
</p>
<blockquote>
<p>
Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at
the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My
instructor was Mr. Langley, and he taught me to sing a song. If you’d like
to hear it I can sing it for you.
</p>
<footer>
— <a href="http://en.wikipedia.org/wiki/HAL_9000">HAL 9000</a>,
<cite>2001: A Space Odyssey</cite>
</footer>
</blockquote>
<p>And here’s a bit of trailing text.</p>
Preformatted
Including, but not limited to code. Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. For example:
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
___________________________
( I'm an expert in my field. )
---------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
<pre>
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>
<pre><code>#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
</code></pre>
<pre>
___________________________
( I'm an expert in my field. )
---------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>