typography.less

h1 Headline

h2 Headline

h3 Headline

h4 Headline

h5 Headline
h6 Headline

There, now he's trapped in a book I wrote: a crummy world of plot holes and spelling errors! Ah, yes! John Quincy Adding Machine. He struck a chord with the voters when he pledged not to go on a killing spree. Doomsday device? Ah, now the ball's in Farnsworth's court! Fry, we have a crate to deliver.

Bendless Love
Your best is an idiot! You've killed me! Oh, you've killed me! For one beautiful night I knew what it was like to be a grandmother. Subjugated, yet honored.

We're rescuing ya. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Tell them I hate them. We don't have a brig. So, how 'bout them Knicks?

  • My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards.
  • Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be some sort of cruel muslin and the cute little pom-pom curtain pull cords. Cruel though they may be…
  • Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life.
  • I'll get my kit!

I guess if you want children beaten, you have to do it yourself. And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it! That's not soon enough! It doesn't look so shiny to me. You can see how I lived before I met you.

  1. No, I'm Santa Claus!
  2. Check it out, y'all. Everyone who was invited is here.

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 img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
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 u element example
The var element example

Content

  1. Headlines
  2. Body text
  3. Lead body text
  4. Lists
    1. Unordered lists
    2. Ordered lists
    3. Unstyled lists
    4. Inline lists
    5. Definition lists
  5. Blockquotes
  6. Preformatted text
  7. Formatting text
    1. Strong & bold
    2. Small
    3. Emphasize & italic
    4. Addresses
    5. Code
    6. Text colors
    7. Text sizes
    8. Text alignment

Sizing fonts will work with relative units (% or em), so font-size will always scale with the media queries.

This module contains most of the Bootstrap type.less. The major change for now consists of a responsive base font-size, serving different sizes to different display types.

Headlines

Headline Size

h1 Headline

250%

h2 Headline

220%

h3 Headline

170%

h4 Headline

150%
h5 Headline
120%
h6 Headline
110%
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

Body text

Default font-size for body text will scale to different screen sizes:

  • 13px = small screens
  • 14px = medium screens
  • 17px = large screens
<p>...</p>

Lead body text

Regular body text can get emphasized with a special class. This should be used for small blocks of text only. .lead-text semantically is lower valued than a headline. If text becomes too much to use a headline for, use this class instead.

This is some leading text.

<p class="lead-text">...</p>

Lists

Unordered lists

A basic list of items wich order does not matter.

  • One item
  • Two items
  • Three items
    • One sub item
    • Two sub items
    • Three sub items
  • Four items
<ul>
  <li>...</li>
</ul>

Ordered lists

A basic list of items wich order does matter.

  1. One item
  2. Two items
  3. Three items
    1. One sub item
    2. Two sub items
    3. Three sub items
  4. Four items
<ol>
  <li>...</li>
</ol>

Unstyled lists

.list-unstyled removes the default browser margins for lists. The class needs to applied to all levels of nested lists.

  • One item
  • Two items
  • Three items
    • One sub item
    • Two sub items
    • Three sub items
  • Four items
<ul class="list-unstyled">
  <li>...</li>
  <li>...
    <ul>
      <li>...</li>
    </ul>
  </li>
</ul>

Inline lists

.list-inline puts every list item into a single line.

  • One item
  • Two items
  • Three items
  • Four items
<ul class="list-inline">
  <li>...</li>
</ul>

Definition lists

Definition lists consist of a list of terms dt followed by one related description dd.

One term
One description text
Second term
Second description text
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal definition lists

.dl-horizontal creates a definition lists with terms placed beside their descriptions.

.dl-horizontal only works for medium & large screens!

One term
One description text
Second term
Second description text
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Blockquotes

When quoting text, it should be surrounded by a blockquote. It's used to quote larger amounts of words and or sentences. When quoting couple or single words, use the i instead.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<blockquote>
  <p>...</p>
</blockquote>

Blockquotes can also be set to right alignment with .pull-right:

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Preformatted text

With pre text gets marked as preformatted, wich results browsers to display the marked text as it is written in the document, preserving tabs and spaces. The code examples in this document use the pre tag.

<pre>
  ...
</pre>

Formatting text

HTML5 offers a wide range of possibilities to set inline markers for texts. What follows is a limited set of these options, for a complete list of such tags take a look at the testing section of this document, wich contains a list with all semantic text markers.

All of the following tags require a typographic parent node. They do not work on their own!

Strong & bold

strong and b produce the same effect, displaying text with a bold font-weight. The main difference is strong carries a more semantical value than b does. When i doubt, always prefer the strong tag.

Strong & bold text example.

<p>
  <strong>...</strong>
  <b>...</b>
</p>

Small

small increases the font size for inline text. There's no semantic value though.

Some small text example.

<p>
  <small>...</small>...
</p>

Emphasize & Italic

em and i produce the same effect, displaying text with a italic font type. The main difference is em carries a more semantical value than i does. i should only be used for quoting text.

Emphasized & italic text example.

<p>
  <em>...</em>
  <i>...</i>
</p>

Addresses

The address tag marks specific address data. The source requires hardcoded linebreaks to create a new address row:

ePages GmbH
Pilatuspool 2
20355 Hamburg
Germany

Telefon: +49- 40-350 188-0
Fax: +49- 40-350 188-222
<address>
  <strong>...</strong><br/>
  ...<br/>
</address>

Code

The code tag marks specific computer code data:

<p>
  <code>...</code>...
</p>

Text colors

There is a pre-defined set of helper classes, to apply semantic color to typographic elements. Color classes can be applied to the type node itself or inline via one additional span.

Color Class
The quick brown fox jumps over the lazy dog. .text-primary
The quick brown fox jumps over the lazy dog. .text-muted
The quick brown fox jumps over the lazy dog. .text-warning
The quick brown fox jumps over the lazy dog. .text-danger
The quick brown fox jumps over the lazy dog. .text-success
The quick brown fox jumps over the lazy dog. .text-info

Text sizes

The default text sizing can be customized too, with a small set of sizing classes.

Example Class Size
The quick brown fox jumps over the lazy dog. .smaller-text 90%
The quick brown fox jumps over the lazy dog. 100%
The quick brown fox jumps over the lazy dog. .bigger-text 110%

Text alignment

Furthermore default text alignment can be manipulated with alignment classes.

Alignment classes only work on elements that are not displayed inline or inline-block!

Example Class
The quick brown fox jumps over the lazy dog. .text-left
The quick brown fox jumps over the lazy dog. .text-right
The quick brown fox jumps over the lazy dog. .text-center