Typography

Metro 4 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 4 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 4 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 4 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 4 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 4 support super headings: .display1, .display2, .display3, .display4.

.display4 Display4 112px
.display3 Display3 56px
.display2 Display2 48px
.display1 Display1 36px

Paragraph

Metro 4 provides various classes for creating and working with paragraphs.

Default paragraph

In Metro 4 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.

Abbreviation

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

Address

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

Metro 4
Khreschatyk str, Suite 1
Kiev, Ukraine 01001
P: (123) 456-7890
Full Name
first.last@example.com

                    <address>
                        <strong>Metro 4</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="place-right">
                        <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.
Sunt demissioes transferre festus, fortis fugaes. Cauliflower combines greatly with sticky ginger.
Sunt demissioes transferre festus, fortis fugaes. Cauliflower combines greatly with sticky ginger.
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

  1. Sunt tataes consumere talis, emeritis orgiaes.
  2. Nunquam transferre plasmator.
  3. Heu, germanus calcaria!
  4. 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.
  5. Sunt tataes consumere talis, emeritis orgiaes.
  6. Nunquam transferre plasmator.
  7. 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.

  1. Sunt tataes consumere talis, emeritis orgiaes.
  2. Nunquam transferre plasmator.
  3. Heu, germanus calcaria!
  4. 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 4.

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