2 #permalink Typo
All typographic elements and classes available.
typo.css, line 1
2.1 #permalink h1 / .h1
Specify a heading level 1. For accessibility reasons, H1 elements should not follow a heading element of a lower level, therefor use the provided class with the same name to apply the visual appearance of a H1 to other elements.
Headline H1
Headline H1
Markup
<h1>Headline H1</h1>
<p class="h1">Headline H1</p>typo.css, line 17
2.2 #permalink h2 / .h2
Specify a heading level 2. For accessibility reasons, H2 elements should not follow a heading element of a lower level, therefor use the provided class with the same name to apply the visual appearance of a H2 to other elements.
Headline H2
Headline H2
Markup
<h2>Headline H2</h2>
<p class="h2">Headline H2</p>typo.css, line 45
2.3 #permalink h3 / .h3
Specify a heading level 3. For accessibility reasons, H3 elements should not follow a heading element of a lower level, therefor use the provided class with the same name to apply the visual appearance of a H3 to other elements.
Headline H3
Headline H3
Markup
<h3>Headline H3</h3>
<p class="h3">Headline H3</p>typo.css, line 74
2.4 #permalink h4 / .h4
Specify a heading level 4. For accessibility reasons, H4 elements should not follow a heading element of a lower level, therefor use the provided class with the same name to apply the visual appearance of a H4 to other elements.
Headline H4
Headline H4
Markup
<h4>Headline H4</h4>
<p class="h4">Headline H4</p>typo.css, line 106
2.5 #permalink h5 / .h5
Specify a heading level 5. For accessibility reasons, H5 elements should not follow a heading element of a lower level, therefor use the provided class with the same name to apply the visual appearance of a H5 to other elements.
Headline H5
Headline H5
Markup
<h5>Headline H5</h5>
<p class="h5">Headline H5</p>typo.css, line 134
2.6 #permalink h6 / .h6
Specify a heading level 6. For accessibility reasons, H6 elements should not follow a heading element of a lower level, therefor use the provided class with the same name to apply the visual appearance of a H6 to other elements.
Headline H6
Headline H6
Markup
<h6>Headline H6</h6>
<p class="h6">Headline H6</p>typo.css, line 161
2.7 #permalink p / .p
Standard paragraph elements. Provides a class with the same name to apply paragraph styles to non-paragraph elements (usually not needed)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Markup
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>typo.css, line 192
2.8 #permalink a
Common hyperlink style
Markup
<a href="#">Hyperlink</a>typo.css, line 219
2.9 #permalink strong / b / .bold
Render the text content of a element in bold letters (if the font allows it)
Bold text
Bold text
Bold text
Markup
<p><strong>Bold text</strong></p>
<p><b>Bold text</b></p>
<p class="bold">Bold text</p>typo.css, line 251
2.10 #permalink em / i / .italic
Render the text content of a element in italics (if the font allows it)
Text in italics
Text in italics
Text in italics
Markup
<p><em>Text in italics</em></p>
<p><i>Text in italics</i></p>
<p class="italic">Text in italics</p>typo.css, line 271
2.11 #permalink .uppercase
Render the text content of a element in UPPERCASE
Text in uppercase
Markup
<p class="uppercase">Text in uppercase</p>typo.css, line 291
2.12 #permalink .lowercase
Render the text content of a element in lowercase
TEXT IN LOWERCASE
Markup
<p class="lowercase">TEXT IN LOWERCASE</p>typo.css, line 308
2.13 #permalink .hyphens
Enables automatic hyphenation and breaking of syllables in supporting browsers
45 letters: Pneumonoultramicroscopicsilicovolcanoconiosis
Markup
<p class="hyphens">45 letters: Pneumonoultramicroscopicsilicovolcanoconiosis</p>typo.css, line 324
2.14 #permalink hr / .hr
Render a horizontal rule
Markup
<hr>
<div class="hr"></div>typo.css, line 340
2.15 #permalink .intro
Increase the font size of text elements by adding the .intro class to them. Suitable to create introduction text on a website
This is introduction text lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Markup
<p class="intro">
This is introduction text lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>typo.css, line 359
2.16 #permalink .claim
Increase the font size of text elements by adding the .claim class to them. Suitable to create introduction text on a website
This is a claim
Markup
<p class="claim">
This is a claim
</p>typo.css, line 377
2.17 #permalink .caption
Add small captions or flags to certain elements which need them. The example shows how to add a caption to a image file
This is the caption text
Markup
<img src="https://unsplash.it/g/800/450" alt="">
<p class="caption italic">
This is the caption text
</p>typo.css, line 395
2.18 #permalink .label
Use this class to style <label> elements and text elements which should look alike
Markup
<label class="label">A label</label>typo.css, line 414