# Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves - selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.

We have used Roboto font, the standard font used by Material Design. You'll find the fonts in the font folder of the Propeller kit you download.

## Heading

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

# h1. Propeller heading

## h2. Propeller heading

### h3. Propeller heading

#### h4. Propeller heading

##### h5. Propeller heading

###### h6. Propeller heading

# Display heading With faded secondary text

Use the included utility class `.text-muted` to recreate the small secondary heading text from Bootstrap.

## Display Heading

Traditional heading elements are designed to work best for your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. For example: Use `.pmd-display4` for a large heading.

# Display 4

# Display 3

# Display 2

# Display 1

## Lead

Make a paragraph stand out by adding `.lead`.

Propeller is a front-end responsive framework based on Material Design and Bootstrap.

## Inline Text Element

Style your inline HTML elements with inline tags based on your requirement.

Use `mark` tag to highlight text.

This line of text is meant to be treated as deleted text. Use `del` tag for it.

This line of text is meant to be treated as no longer accurate. Use `s` tag for it.

This line of text is meant to be treated as an addition to the document. Use `ins` tag for it.

This line of text will render as underlined. Use `u` tag for it.

This line of text is meant to be treated as fine print. Use `small` tag for it.

This line rendered as bold text. Use `strong` tag for it.

This line rendered as italicized text. Use `em` tag for it.

## Blockquote

For quoting block of content from another source within your document. Wrap `<blockquote>` around any HTML as the quote. For straight quote, we recommend a `<p>`.

> Propeller is a responsive and ready to use component library to start with.

> Create something simple. Let the market pull you in.

Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`.

> Millions of amazing sites across the web are being built with Bootstrap.

Add `.blockquote-reverse` for a blockquote with right-aligned content.

## Address

Used to provide contact information. Preserve formatting by ending all lines with tag `br`.

## Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the typography. The table lists the available classes and their effects.

Propeller Class | Effect | Remark
--- | --- | ---
`.pmd-display4` | Display heading style for largest heading. | Optional
`.pmd-display3` | Display heading style for second largest heading. | Optional
`.pmd-display2` | Display heading style for small heading. | Optional
`.pmd-display1` | Display heading style for smallest heading. | Optional
`.pmd-caption` | Show a caption content. | Optional