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.


                    <p>...</p>

Leader text

To make leader paragraph use class: .text-leader and .text-leader2.


                    <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.


                    <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.


                    <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.

Abbreviation


                    <abbr title="this is a abbreviation">Abbreviation</abbr>

Address

Stylized implementation of HTML’s <addr> element for creating address.

Metro UI
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


                    <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.

Sunt demissioes transferre festus, fortis fugaes. Cauliflower combines greatly with sticky ginger.


                    <div class="remark">
                        ...
                    </div>

In additional you can add accent colors subclasses to remarks: .primary, .secondary, .success, .alert, .warning, .yellow, .info, .dark.

Sunt demissioes transferre festus, fortis fugaes. Cauliflower combines greatly with sticky ginger.


                    <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.
1. Resistentias cantare!
2. Lacteas volare in camerarius rugensis civitas!
3. Nunquam manifestum genetrix.
4. Nunquam vitare ratione.
  1. Resistentias cantare!
  2. Lacteas volare in camerarius rugensis civitas!
  3. 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>.

y = mx + b


                    <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 switch directories, type cd followed by the name of the directory.
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.

Sample output from a computer program.


                    <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;
                      }
                    }

Table of contents

Typography

Reset

Native font stack

Headings

Heading secondary text

Header Secondary

Header Secondary

Header Secondary

Header Secondary

Header Secondary

Header Secondary

Super headings

Paragraph

Default paragraph

Leader text

Secondary & Small

Indents

Inline text elements

Abbreviations

Address

Blockquotes

Remarks

Lists

Unstyled list

Unordered list

Ordered list

Inline list

Description list

Horizontal style

Code

Inline code

Variables

User input

Sample output

Text ellipsis

Text transform

Text alignment

Vertical alignment

Font weight

Responsive