Typography
Metro UI offers various tools and classes for displaying elements of typography for your site. This includes titles, paragraphs, lists, various text elements and much more.
Reset
In Metro UI reset method based on Eric Meyer’s "Reset CSS" 2.0 and include additional rules.
The <html> and <body> elements are updated to provide better page-wide defaults. More specifically:
- The box-sizing is globally set on every element—including *:before and *:after, to border-box. This ensures that the declared width of element is never exceeded due to padding or border.
- The <body> also sets a global font-family and line-height. This is inherited later by some form elements to prevent font inconsistencies.
- For safety, the <body> has a declared background-color, defaulting to #fff (white).
Native font stack
In Metro UI i use a "native font stack" for optimum text rendering on every device and OS. Read more about native font stacks in this Smashing Magazine article.
@fontName: -apple-system,
system-ui,
BlinkMacSystemFont,
"Segoe UI", "Roboto", "Ubuntu",
"Helvetica Neue", sans-serif;
Match table for font family and OS | |
---|---|
-apple-system | Safari for OS X and iOS (San Francisco) |
system-ui | Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android |
BlinkMacSystemFont | Chrome < 56 for OS X (San Francisco) |
Segoe UI | Windows |
Roboto | Android |
Ubuntu | Linux |
Helvetica Neue, sans-serif | Basic web fallback |
Headings
In Metro UI You can access all kinds of headings from h1 through h6.
<h1> | h1. Metro heading | 48px |
<h2> | h2. Metro heading | 32px |
<h3> | h3. Metro heading | 28px |
<h4> | h4. Metro heading | 24px |
<h5> | h5. Metro heading | 20px |
<h6> | h6. Metro heading | 18px |
If you want to create a header element without using tags <h1> - <h6>, Metro UI present relevant classes: .h1 through .h6. You can also use the following additional classes:
Tag | Class | Additional |
---|---|---|
<h1> |
.h1 | .leader |
<h2> |
.h2 | .sub-leader |
<h3> |
.h2 | .header |
<h4> |
.h4 | .sub-header |
<h5> |
.h5 | .alt-header |
<h6> |
.h6 | .sub-alt-header |
Heading secondary text
You can create lighter, secondary text in any heading with a generic <small> tag or the .small class.
<h1> |
Header Secondary |
<h2> |
Header Secondary |
<h3> |
Header Secondary |
<h4> |
Header Secondary |
<h5> |
Header Secondary |
<h6> |
Header Secondary |
<h1>Header <small>Secondary</small></h1>
Super headings
Metro UI support super headings: .display1, .display2, .display3, .display4.
.display4 | Display4 | 112px |
.display3 | Display3 | 56px |
.display2 | Display2 | 48px |
.display1 | Display1 | 36px |
Paragraph
Metro UI provides various classes for creating and working with paragraphs.
Default paragraph
In Metro UI default paragraph styled with line-height 1.5 value, margin-bottom 16px and font-size 16px.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p>...</p>
Leader text
To make leader paragraph use class: .text-leader and .text-leader2.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p class="text-leader">...</p>
<p class="text-leader2">...</p>
Secondary & Small
To make secondary and small paragraph use classes: .text-secondary and .text-small.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p class="text-secondary">...</p>
<p class="text-small">...</p>
Indents
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p class='indent'>...</p>
<p class='indent-letter'>...</p>
Inline text elements
Styling for common inline HTML5 elements.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Abbreviations
Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
<abbr title="this is a abbreviation">Abbreviation</abbr>
Address
Stylized implementation of HTML’s <addr> element for creating address.
Khreschatyk str, Suite 1
Kiev, Ukraine 01001
P: (123) 456-7890 Full Name
first.last@example.com
<address>
<strong>Metro UI</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>
Blockquotes
For quoting blocks of content from another source within your document.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
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>
<blockquote class="right-side">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<small>Someone famous
<cite title="Source Title">Source Title</cite>
</small>
</blockquote>
Remarks
For quoting blocks of content you can add class .remark
to block or paragraph.
<div class="remark">
...
</div>
In additional you can add accent colors subclasses to remarks: .primary, .secondary, .success, .alert, .warning, .yellow, .info, .dark.
<div class="remark primary">
...
</div>
Lists
Unstyled list
- Sunt tataes consumere talis, emeritis orgiaes.
- Nunquam transferre plasmator.
- Heu, germanus calcaria!
- Vortexs resistere in mare!
- Resistentias cantare!
- Lacteas volare in camerarius rugensis civitas!
- Nunquam manifestum genetrix.
- Sunt tataes consumere talis, emeritis orgiaes.
- Nunquam transferre plasmator.
- Heu, germanus calcaria!
<ul class="unstyled-list">
<li>Sunt tataes consumere talis, emeritis orgiaes.</li>
<li>Nunquam transferre plasmator.</li>
<li>Heu, germanus calcaria!</li>
<li>Vortexs resistere in mare!
<ul class="unstyled-list">
<li>Resistentias cantare!</li>
<li>Lacteas volare in camerarius rugensis civitas!</li>
<li>Nunquam manifestum genetrix.</li>
</ul>
</li>
<li>Sunt tataes consumere talis, emeritis orgiaes.</li>
<li>Nunquam transferre plasmator.</li>
<li>Heu, germanus calcaria!</li>
</ul>
Unordered list
- Sunt tataes consumere talis, emeritis orgiaes.
- Nunquam transferre plasmator.
- Heu, germanus calcaria!
- Vortexs resistere in mare!
- Resistentias cantare!
- Lacteas volare in camerarius rugensis civitas!
- Nunquam manifestum genetrix.
- Pol, a bene diatria, cotta!
- Resistentias cantare!
- Lacteas volare in camerarius rugensis civitas!
- Nunquam manifestum genetrix.
- Sunt tataes consumere talis, emeritis orgiaes.
- Nunquam transferre plasmator.
- Heu, germanus calcaria!
<ul>
<li>...</li>
<li>...
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>
Ordered list
- Sunt tataes consumere talis, emeritis orgiaes.
- Nunquam transferre plasmator.
- Heu, germanus calcaria!
- Est peritus devatio, cesaris.
- Resistentias cantare!
- Lacteas volare in camerarius rugensis civitas!
- Nunquam manifestum genetrix.
- Nunquam vitare ratione.
- Resistentias cantare!
- Lacteas volare in camerarius rugensis civitas!
- Nunquam manifestum genetrix.
- Sunt tataes consumere talis, emeritis orgiaes.
- Nunquam transferre plasmator.
- Heu, germanus calcaria!
<ol>
<li>...</li>
<li>...
<ol>
<li>...</li>
<li>...</li>
</ol>
</li>
</ol>
You can specified first level number type with classes:
decimal
,
roman-upper
,
roman-lower
,
alpha-upper
,
alpha-lower
,
latin-upper
,
latin-lower
.
- Sunt tataes consumere talis, emeritis orgiaes.
- Nunquam transferre plasmator.
- Heu, germanus calcaria!
- Est peritus devatio, cesaris.
<ol class="decimal">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Inline list
- Home
- Base
- Widgets
- Contacts
<ul class="inline-list">
<li>Home</li>
<li>Base</li>
<li>Widgets</li>
<li>Contacts</li>
</ul>
Description list
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Horizontal style
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
<dl class="horizontal">
...
</dl>
Code
Documentation and examples for displaying inline and multiline blocks of code with Metro UI.
Inline code
Wrap inline snippets of code with <code>
or class .tally
. Be sure to escape HTML angle brackets.
code
tally
success
warning
alert
info
Yes, there is chaos, it experiments with core.
Pestilence, punishment
, and strength. Sunt zirbuses dignus superbus
, clemens cedriumes.
Gravy soup is just not the same without nutmeg and chopped small meatloafs.
<code>code</code>
<span class="tally">tally</span>
<span class="tally success">success</span>
<code class="warning">warning</code>
<span class="tally alert">alert</span>
<code class="info">info</code>
Variables
To create code variable use <var>
.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
User input
Use the <kbd>
to indicate input that is typically entered via keyboard.
To edit settings, press ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Sample output
For indicating sample output from a program use the <samp>
tag.
<samp>Sample output from a computer program.</samp>
Text ellipsis
For a salted bloody frittata, add some olive oil and green curry.
<div style="width: 100px;">
<p class="text-ellipsis">For a salted bloody frittata.</p>
</div>
Text transform
Easily transform text with text transform classes.
lowercased text
UPPERCASED TEXT
Capitalized text
<p class="text-lower">lowercased text</p>
<p class="text-upper">uppercased text</p>
<p class="text-cap">сapitalized text</p>
Text alignment
Easily realign text to components with text alignment classes.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
If you need to align the text to the width, you can use the class .text-just
It is a remarkable nuclear flux, sir. Poeta resisteres, tanquam rusticus tus. Not hell or chaos, yearn the acceptance. After smashing the turkey, enamel margerine, strudel and gold tequila with it in a plastic bag. It is a remarkable nuclear flux, sir. Poeta resisteres, tanquam rusticus tus. Not hell or chaos, yearn the acceptance. After smashing the turkey, enamel margerine, strudel and gold tequila with it in a plastic bag.
<p class="text-just">...</p>
Vertical alignment
To change vertical alignment you can use predefined classes: .va-top, .va-bottom, .va-baseline, .va-middle, .va-sub, .va-super, .va-text-top, .va-text-bottom and their media analogues.
Transform and alignment classes you can use with media breakpoints rules. For this feature Metro UI present special media classes: .text-center-*, .text-left-*, .text-right-*, .text-just-*, .text-cap-*, .text-upper-*, .text-lower-* Replace the asterisk with the desired point: sm, md, lg, xl, xxl. This breakpoints works with min-width rule.
Font weight
You can change font weight with special classes: .text-ultralight, .text-light, .text-normal, .text-medium, .text-bold.
Name | Weight |
---|---|
Ultralight text |
100 |
Light text |
200 |
Normal text |
400 |
Medium text |
500 |
Bold text |
700 |
Responsive
Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries. Metro UI doesn’t do this for you, but it’s fairly easy to add if you need it. Since the size of the elements is set in units and em, for changing the font you need to change the font size of the html element in you styles.
html {
font-size: 14px;
}
@media screen and (min-width: 576px) {
html {
font-size: 16px;
}
}
@media screen and (min-width: 768px) {
html {
font-size: 20px;
}
}
@media screen and (min-width: 992px) {
html {
font-size: 28px;
}
}