#1 Quanto - Wordpress Theme

Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

[vc_row css=”.vc_custom_1558424553062{padding-top: 100px !important;padding-bottom: 100px !important;}”][vc_column width=”10/12″][vc_row_inner el_id=”overview”][vc_column_inner][vc_custom_heading text=”Overview” use_theme_fonts=”yes”][vc_column_text css=”.vc_custom_1558423719391{margin-bottom: 16px !important;}”]

Nam pulvinar interdum turpis a mattis. Etiam augue leo, mollis a massa sagittis, egestas pretium risus. Aliquam auctor nibh mauris, at fringilla elit lobortis sodales. Praesent volutpat felis et placerat elementum.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_custom_heading text=”Typography Rule” use_theme_fonts=”yes”][vc_column_text css=”.vc_custom_1558423918085{margin-bottom: 24px !important;}”]

Golden Ratio Typography is more than just a way to make text look great on a webpage. It’s a deceptively simple design system that maintains perfect proportionality in any design.
https://grtcalculator.com/

[/vc_column_text][vc_column_text css=”.vc_custom_1558424107200{margin-bottom: 30px !important;}”]

Golden Ratio Scale Typography
Font Size Line Height
h1 – 42px 64px
h2 – 34px 44px
h3 – 26px 33px
h4 – 20px 31px
h5 – 16px 21px
h6 – 13px 21px
p – 16px 27px

[/vc_column_text][/vc_column_inner][vc_column_inner][vc_column_text css=”.vc_custom_1558424126844{margin-bottom: 30px !important;}”]

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text css=”.vc_custom_1558424171829{margin-bottom: 30px !important;}”]

Display Headings

Display 1

Display 2

Display 3

Display 4

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text css=”.vc_custom_1558424198868{margin-bottom: 30px !important;}”]

Body Text

Maecenas eget metus quis justo semper malesuada id id leo. Mauris tristique libero mauris, vitae rutrum mi ultricies a. Vestibulum volutpat eu leo sit amet feugiat.

Pellentesque pellentesque elementum sem, eu interdum magna. Aenean vestibulum, erat vel tincidunt luctus, ex orci interdum est, ut vehicula erat massa ut purus. Nam sit amet odio quis ante bibendum faucibus. Mauris eleifend lobortis justo vel dictum. Aenean lobortis eleifend turpis, sit amet ullamcorper dui euismod at.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text css=”.vc_custom_1558424214429{margin-bottom: 30px !important;}”]

Alignment

Left aligned text.

Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .

Center aligned text.

Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .

Right aligned text.

Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text css=”.vc_custom_1558424230670{margin-bottom: 30px !important;}”]

Unordered list

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text css=”.vc_custom_1558424250534{margin-bottom: 30px !important;}”]

Ordered list
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Phasellus iaculis neque
  7. Purus sodales ultricies
  8. Vestibulum laoreet porttitor sem
  9. Ac tristique libero volutpat at
  10. Faucibus porta lacus fringilla vel
  11. Aenean sit amet erat nunc
  12. Eget porttitor lorem

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text css=”.vc_custom_1558424264023{margin-bottom: 30px !important;}”]

Unstyled

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text css=”.vc_custom_1558424276277{margin-bottom: 30px !important;}”]

List Styled

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text css=”.vc_custom_1558424297343{margin-bottom: 30px !important;}”]

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

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/2″ offset=”vc_col-md-2″][vc_column_text css=”.vc_custom_1558425752439{margin-bottom: 16px !important;}”]

[/vc_column_text][/vc_column][/vc_row]

Ready to get started ?

Speak to a Quanto specialist at (800-123-1234)