Typography

The type component is fundamental to your project’s look and feel. It provides font sizes, families, and the web fonts themselves.

The font-family of Master-CSS is set via stylesheets/utilities/_bootstrap-overrides.scss

Here are all the font-related SCSS variables in Master-CSS:
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;

$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base:        $font-family-sans-serif !default;

$font-size-base:          14px !default;
$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px

$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-h5:            $font-size-base !default;
$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px

//** Unit-less `line-height` for use in components like buttons.
$line-height-base:        1.428571429 !default; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px

//** By default, this inherits from the `<body>`.
$headings-font-family:    inherit !default;
$headings-font-weight:    500 !default;
$headings-line-height:    1.1 !default;
$headings-color:          inherit !default;
Please don't fiddle with these settings without approval from the UX team or else face the wrath of my boss.

Fira Sans

Fira Sans is the brand-compliant, primary font for Wolters Kluwer.

All elements are Fira Sans by default. If for some reason an element isn't fira sans and needs to be simply add: font-family: 'fira sans'; to the element you wish to change.

Light
The quick brown fox jumps over the lazy dog. Lorem ut proident culpa minim dolor excepteur in do officia officia voluptate sint nulla.
Light Italic
The quick brown fox jumps over the lazy dog. Eiusmod tempor sunt nostrud aliqua deserunt consectetur Lorem consequat incididunt et occaecat ad veniam.
Regular
The quick brown fox jumps over the lazy dog. Non ullamco incididunt irure officia occaecat dolor velit anim.
Italic
The quick brown fox jumps over the lazy dog. Exercitation officia ut velit anim ipsum laboris incididunt eu.
Medium
The quick brown fox jumps over the lazy dog. Minim non fugiat labore culpa velit ut dolor excepteur voluptate sint deserunt.
Medium Italic
The quick brown fox jumps over the lazy dog. Anim elit esse irure aute laboris ea excepteur.
Bold
The quick brown fox jumps over the lazy dog. Laboris anim veniam eu officia commodo do et.
Bold Italic
The quick brown fox jumps over the lazy dog. Voluptate Lorem proident aute sunt sunt eiusmod enim do mollit.
Numbers
0 1 2 3 4 5 6 7 8 9
Symbols
~ ` ! @ # $ % ^ & * ( ) - _ = + ÷ [ ] { } \ | ; : ' " < > ? , . © ® §

Franziska

Franziska, a serif font suited for long text, improves the reading experience for the user.

To change an element to use this font use the class .type-franziska

Light
The quick brown fox jumps over the lazy dog. Exercitation consequat dolore adipisicing Lorem ullamco minim eu qui consequat anim.
Light Italic
The quick brown fox jumps over the lazy dog. Enim reprehenderit ipsum do non dolor duis exercitation exercitation ex non sit elit.
Regular
The quick brown fox jumps over the lazy dog. Dolor amet adipisicing eu irure amet fugiat enim excepteur.
Italic
The quick brown fox jumps over the lazy dog. Consectetur dolor ullamco pariatur ex reprehenderit sit ullamco pariatur occaecat.
Bold
The quick brown fox jumps over the lazy dog. Dolore anim cillum aliqua elit magna velit eiusmod minim non et.
Bold Italic
The quick brown fox jumps over the lazy dog. Cillum voluptate nulla non mollit cillum eiusmod veniam laborum ea cupidatat ut nisi ut proident.
Numbers
0 1 2 3 4 5 6 7 8 9
Symbols
~ ` ! @ # $ % ^ & * ( ) - _ = + ÷ [ ] { } \ | ; : ' " < > ? , . © ® §

Monospace

Monospace will seldom be used unless even spacing of letters is needed.

If you find yourself hankering for some monospace font then the class .type-monospace is your friend.

DejaVu Sans Mono, a monospaced font, allows sections of the Document containing preformatted text to render correctly.

Regular
The quick brown fox jumps over the lazy dog. Fugiat ad minim minim excepteur magna consectetur magna laboris amet fugiat.

Headers

(Not the soccer type...)

Master-CSS includes styles for all headings—they're balanced and sized along a modular scale.

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Master-CSS heading

 Semibold 36px

h2. Master-CSS heading

 Semibold 30px

h3. Master-CSS heading

 Semibold 24px

h4. Master-CSS heading

 Semibold 18px
h5. Master-CSS heading
 Semibold 14px
h6. Master-CSS heading
 Semibold 12px

Small Header Segments

By inserting a <small> element into a header Master-CSS will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text which are 85% the size of regular headers.

h1. Master-CSS heading Secondary text

h2. Master-CSS heading Secondary text

h3. Master-CSS heading Secondary text

h4. Master-CSS heading Secondary text

h5. Master-CSS heading Secondary text
h6. Master-CSS heading Secondary text

Paragraphs

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Use the <strong> and <em> tags to denote text that should be displayed or read with emphasis. Browsers will bold and italicize the words, while screen readers will read them with emphasis.

<p>...</p>

If the emphasis of a phrase is important, don't make the emphasis purely visual—use the <em> or <strong> tags to mark it as well. Both of these tags have built-in styles, but there's no harm in adding additional styles in specific contexts.

Text & Stuff

Master-CSS's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Leading paragraph

Make a paragraph stand out by adding .lead.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This Element doesn't have the lead class and looks different

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Marked Text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to highlight text. 

You can use the mark tag to <mark>highlight</mark> text.

Deleted Text

For indicating blocks of text that have been deleted use the <del> tag.

This line of text is meant to be treated as deleted text. 

<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough text

For indicating blocks of text that are no longer relevant use the <s> tag.

This line of text is meant to be treated as no longer accurate. 

<s>This line of text is meant to be treated as no longer accurate.</s>

Underlined Text

To underline text use the <u> tag.

This line of text will render as underlined 

<u>This line of text will render as underlined</u>

Small Text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

This line of text is meant to be treated as fine print. 

<small>This line of text is meant to be treated as fine print.</small>

Bold

For emphasizing a snippet of text with a heavier font-weight use a <strong%gt; tag.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics use a <em> tag.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Alternate elements

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.

Blockquotes

Sometimes other people say smart things, and you may want to mention those things with a quote. We've got you covered.

<blockquote>
    Those people who think they know everything are a great annoyance to those of us who do.
    <cite>Isaac Asimov</cite>
</blockquote>
Those people who think they know everything are a great annoyance to those of us who do. Isaac Asimov

Abbreviations

Use the <abbr> tag to annotate a shortened term. Abbreviations must always have a title attribute which clarifies the full term.

<p>In my dream last night, I saw <abbr title="John Ronald Reuel">J. R. R.<abbr> Tolkien and George <abbr title="Raymond Richard">R. R.<abbr> Martin hanging out on Sunset <abbr title=Boulevard">Blvd<abbr>.</>p>

In my dream last night, I saw J. R. R. Tolkien and George R. R. Martin hanging out on Sunset Blvd.

Keystrokes

Use the <kbd> element to annotate a key stroke or combination.

<p>Press <kbd>Cmd+Q</kbd> (or <kbd>Ctrl+Q</>kbd> on Windows) to play Half-Life 3.</>p>

Press Cmd+Q (or Ctrl+Q on Windows) to play Half-Life 3.

Print Styles

Similar to the regular responsive classes, use these for toggling content for print.

Classes Browser Print
.visible-print-block
.visible-print-inline
.visible-print-inline-block		 Visible
.hidden-print Visible

The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

Unordered Lists

Use an unordered list to... list things, if the order of the items doesn't matter.

<ul>
    <li>List item with a much longer description or more content.</li>
        <li>List item</li>
        <li>List item
            <ul>
                <li>Nested list item</li>
                <li>Nested list item</li>
                <li>Nested list item</li>
            </ul>
        </li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
</ul>

Ordered Lists

Use an <ol> when creating a list where the order of the items is important, like ranking pizza toppings from best to worst.

<ol>
    <li>Cheese (essential)</li>
    <li>Pepperoni</li>
    <li>Bacon
        <ol>
            <li>Normal bacon</li>
            <li>Canadian bacon</li>
        </ol>
    </li>
    <li>Sausage</li>
    <li>Onions</li>
    <li>Mushrooms</li>
</ol>
  1. Cheese (essential)
  2. Pepperoni
  3. Bacon
    1. Normal bacon
    2. Canadian bacon
  4. Sausage
  5. Onions
  6. Mushrooms

Definition Lists

A definition list (<dl>) is used to display name-value pairs, like metadata or a dictionary definition. Each term (<dt>) is paired with one or more definitions ( <dd>).


<dl>
    <dt>Time</dt>
    <dd>The indefinite continued progress of existence and events in the past, present, and future
        regarded
        as a whole.
    </dd>
    <dt>Space</dt>
    <dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
    <dd>The dimensions of height, depth, and width within which all things exist and move.</dd>
</dl>
Time
The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
Space
A continuous area or expanse that is free, available, or unoccupied.
The dimensions of height, depth, and width within which all things exist and move.

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Fusce dapibus, tellus accursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.


<p class="text-muted">Fusce dapibus, tellus accursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.


<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Dividers

Use dividers to define thematic breaks between paragraphs. To denote the end of one section of a page and the start of another, it's better to use the <section> tag.

<hr/>

Dealing with specificity

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

Conveying meaning to assistive technologies

As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.

Close icon

Use the generic close icon for dismissing content like modals and alerts.

 <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

Clearfix

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

Center content blocks

Set an element to display: block and center via margin by adding the class .center-block. Available as a mixin and class.

Carets

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

<span class="caret"></span>

Quick floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

Not for use in navbars

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

Showing and hiding content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

Screen reader and keyboard navigation content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.

Image replacement

Utilize the .text-hide class or mixin to help replace an element's text content with a background image.