The signature user interface font of Metro UI CSS, Open Sans and PT Serif Caption. It's a sans serif design drawn in the tradition of signage and way-finding typefaces.
Header
Class Subheader
Sub secondary
Item title
Title sec
You can set the heading styles for all items using built-in classes:
.header, .subheader, .subheader-secondary, .item-title, .item-title-secondary.
Metro UI CSS global default font-size is 11pt, with a line-height of 15pt.
This is applied to the <div>, <span> and all paragraphs.
In addition, <p> (paragraphs) receive a bottom margin 7pt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.
Praesent molestie bibendum consequat. Suspendisse a felis eu augue venenatis egestas nec ac lectus. Nam nec felis lorem. Maecenas luctus est et nulla cursus vestibulum. Curabitur suscipit adipiscing dui eget sollicitudin. Sed accumsan tincidunt enim, in feugiat ligula ornare et.
Nullam libero odio, lacinia vel dignissim sed, consequat ac nisi. Ut at mauris sit amet sem dapibus pretium sit amet sed orci. Quisque tincidunt sodales sollicitudin. Ut purus odio, imperdiet ut laoreet ac, placerat vel ante. Nulla tincidunt sapien in metus tincidunt imperdiet. Vestibulum a dui nisi. Morbi vestibulum nulla lacinia enim tempus ullamcorper.
<p>...</p>
For big text you can use .readable-text class.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.
Praesent molestie bibendum consequat. Suspendisse a felis eu augue venenatis egestas nec ac lectus. Nam nec felis lorem. Maecenas luctus est et nulla cursus vestibulum. Curabitur suscipit adipiscing dui eget sollicitudin. Sed accumsan tincidunt enim, in feugiat ligula ornare et.
Nullam libero odio, lacinia vel dignissim sed, consequat ac nisi. Ut at mauris sit amet sem dapibus pretium sit amet sed orci. Quisque tincidunt sodales sollicitudin. Ut purus odio, imperdiet ut laoreet ac, placerat vel ante. Nulla tincidunt sapien in metus tincidunt imperdiet. Vestibulum a dui nisi. Morbi vestibulum nulla lacinia enim tempus ullamcorper.
<p>...</p>
For tertiary text you can set class .tertiary-text and .tertiary-text-secondary.
Tertiary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.
Tertiary secondary text: Praesent molestie bibendum consequat. Suspendisse a felis eu augue venenatis egestas nec ac lectus. Nam nec felis lorem. Maecenas luctus est et nulla cursus vestibulum. Curabitur suscipit adipiscing dui eget sollicitudin. Sed accumsan tincidunt enim, in feugiat ligula ornare et.
<p class="tertiary-text">...</p> <p class="tertiary-text-secondary">...</p>
For code text you can set class .code-text. This class use mono fonts.
Code text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.
<p class="code-text">...</p>
Make use of HTML's default emphasis tags with lightweight styles.
For de-emphasizing inline or blocks of text, use the <small> tag.
<p>This is a normal text, and the <small>text is reduced</small>.</p>
For emphasizing inline or blocks of text, use the <strong> tag.
<p>This is a normal text, and the <strong>text is strong</strong>.</p>
For emphasizing a snippet of text with italics use <em> tag.
<p>This is a normal text, and the <em>text is italics</em>.</p>
Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
Easily realign text to components with text alignment classes.
Left aligned text
Center aligned text
Right aligned text
<p class="text-left">Left aligned text.<p> <p class="text-center">Left aligned text.<p> <p class="text-right">Left aligned text.<p> <p class="text-justify">Justify aligned text.<p>
Convey meaning through color with a handful of emphasis utility classes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit (muted).
Lorem ipsum dolor sit amet, consectetur adipiscing elit (info).
Lorem ipsum dolor sit amet, consectetur adipiscing elit (alert).
Lorem ipsum dolor sit amet, consectetur adipiscing elit (warning).
Lorem ipsum dolor sit amet, consectetur adipiscing elit (success).
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover.
Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
For expanded text on long hover of an abbreviation, include the title attribute.
An abbreviation of the word attribute is <abbr title="attribute description">attr</abbr>.
Present contact information for the nearest ancestor or the entire body of work.
Preserve formatting by ending all lines with <br>.
<address>
<strong>Metro UI CSS</strong><br />
Khreschatyk str, Suite 1<br>
Kiev, Ukraine 01001<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
For quoting blocks of content from another source within your document.
Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>
Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
Use .place-right for a floated, right-aligned blockquote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
<blockquote class="place-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
A list of items in which the order does not explicitly matter.
<ul>
<li>...</li>
</ul>
A list of items in which the order explicitly matter.
<ol>
<li>...</li>
</ol>
Remove the default list-style and left padding on list items (immediate children only).
<ul class="unstyled">
<li>...</li>
</ul>
Place all list items on a single line with inline-block and some light padding.
<ul class="inline">
<li>...</li>
</ul>
A list of terms with their associated descriptions.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Make terms and descriptions in <dl> line up side-by-side.
<dl class="horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Heads up!
Horizontal definition lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.