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


                            

Propeller Typography

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-display1 for a large heading.

Display 1

Display 2

Display 3

Display 4

Headline

Title

Sub Heading2

Sub Heading1


							

Lead

Make a paragraph stand out by adding .lead.

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


                            

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.


                            

Abbreviation

Make use of .initialism to the <abbr> for a smaller font size in the abbreviations.

HTML


                            

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.


                            

Naming a source

Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.

Create something simple. Let the market pull you in.

Brad Burnham, Co-Founder Union Square Ventures

Add a <footer> with class .blockquote-footer to identify the source. Wrap the name of the source work in <cite>.


							

Alignment

Use text utilities as needed to change the alignment of your blockquote.

Create something simple. Let the market pull you in.

Brad Burnham, Co-Founder Union Square Ventures

Add a <footer> with class .blockquote-footer to identify the source. Wrap the name of the source work in <cite>.


							

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

Someone famous in Source Title

Add .text-right for a blockquote with right-aligned content.


                            

Address

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

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
Brad Burnham, Co-Founder
Email
first.last@example.com

                            

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-display1 Display heading style for largest heading. Optional
.pmd-display2 Display heading style for second largest heading. Optional
.pmd-display3 Display heading style for small heading. Optional
.pmd-display4 Display heading style for smallest heading. Optional
.pmd-headline Display heading style for paragraphs. Optional
.pmd-title Display title style for sections. Optional
.pmd-subheading2 Display sub-heading style for paragraph that is a sub-title. Optional
.pmd-subheading1 Display sub-heading style for paragraph that is a sub-title. Optional