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.
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.
Lead
Make a paragraph stand out by adding .lead
.
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>
.
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
.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
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-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 |