Typography

[gem_divider margin_top=”33″][gem_alert_box content_background_color=”” button_1_style=”outline” button_1_size=”medium” button_1_corner=”50″ button_1_border=”3″ button_1_icon_pack=”elegant” button_2_activate=”1″ button_2_style=”outline” button_2_size=”medium” button_2_corner=”50″ button_2_border=”3″ button_2_icon_pack=”elegant” centered=”1″ button_1_text=”purchase now” button_1_text_color=”#ffffff” button_1_border_color=”#ffffff” button_2_text=”more details…” button_2_text_color=”#4dc4c8″ button_2_hover_text_color=”#ffffff” button_2_hover_background_color=”#4dc4c8″ button_2_border_color=”#4dc4c8″ button_2_hover_border_color=”#4dc4c8″ button_1_link=”||” button_2_link=”url:http%3A%2F%2Fcodex-themes.com%2Fthegem%2Felements%2Ftypography%2F%23details|title:http%3A%2F%2Fcodex-themes.com%2Fthegem%2Felements%2Ftypography%2F%23details|”]

typography

[gem_divider margin_top=”50″]

The beauty of your website begins with the beauty of your text. TheGem gives you a large number of styles to work with typography: headings, body, dropcaps, quoted text, dividers etc. All of them could be easily customized & re-styled in theme options without touching a line of code!

[gem_divider margin_top=”36″][/gem_alert_box]

mouse

[gem_divider margin_top=”200″][gem_textbox content_background_color=”#f0f3f2″ border_radius=”50″ padding_top=”25″][gem_icon_with_text icon_pack=”material” icon_shape=”circle” icon_size=”large” icon_material=”F316″ icon_color=”#00bcd4″ icon_background_color=”#ffffff” icon_right_side_padding=”40″ icon_left_side_padding=”40″]

bold and light styles

[gem_divider margin_bottom=”14″]

[/gem_icon_with_text][gem_divider margin_top=”25″][/gem_textbox][gem_divider margin_top=”100″]

H1 Heading light

H2 Heading light

H3 Heading light

H4 Heading light

H5 Heading light

H6 Heading light

H1 Heading bold

H2 Heading bold

H3 Heading bold

H4 Heading bold

H5 Heading bold

H6 Heading bold

[gem_divider margin_bottom=”74″]

CAPTIONS TEXT LIGHT

[gem_divider margin_bottom=”40″]

[gem_divider margin_bottom=”74″]

CAPTIONS TEXT BOLD

BODY TEXT

[gem_divider margin_bottom=”15″]

Big size – lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Sed non mauris vitae

[gem_divider margin_bottom=”90″]

LIGHT BODY

[gem_divider margin_bottom=”15″]

[gem_fullwidth styled_marker_bottom_style=”figure” styled_marker_bottom_direction=”outside” background_color=”#b5ae7f” background_image=”90″ padding_top=”130″ padding_bottom=”130″]

LINE-HEIGHTS EXAMPLES

[/gem_fullwidth][gem_divider margin_bottom=”114″]

H1 Heading Lorem ipsum

[gem_divider margin_top=”50″]

Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna

[gem_divider margin_top=”75″]

H2 Heading Lorem ipsum dolor sit amet

[gem_divider margin_top=”40″]

[gem_divider margin_top=”67″]

H3 Heading Lorem ipsum dolor sit amet consectetur

[gem_divider margin_top=”35″]

[gem_divider margin_top=”53″]

H4 Heading gravida nibh vel velit auctor aliquet Aenean sollicit

[gem_divider margin_top=”24″]

[gem_divider margin_top=”47″]

H5 Heading of Lorem Ipsum Proin gravida nibh vel velit auctor aliquet Aenean

[gem_divider margin_top=”24″]

[gem_divider margin_top=”39″]

H6 Heading of Lorem Ipsum Proin gravida nibh vel velit auctor aliquet Aenean

[gem_divider margin_top=”97″]

H1 Heading Lorem ipsum

[gem_divider margin_top=”50″]

[gem_divider margin_top=”75″]

H2 Heading Lorem ipsum dolor sit amet

[gem_divider margin_top=”44″]

[gem_divider margin_top=”65″]

H3 Heading Lorem ipsum dolor sit amet consectetur

[gem_divider margin_top=”35″]

[gem_divider margin_top=”55″]

H4 Heading gravida nibh vel velit auctor aliquet Aenean sollicit

[gem_divider margin_top=”27″]

[gem_divider margin_top=”50″]

H5 Heading of Lorem Ipsum Proin gravida nibh vel velit auctor aliquet Aenean

[gem_divider margin_top=”24″]

[gem_divider margin_top=”39″]

H6 Heading of Lorem Ipsum Proin gravida nibh vel velit auctor aliquet Aenean

[gem_textbox content_background_color=”#f0f3f2″ border_radius=”50″][gem_divider margin_top=”25″][gem_icon_with_text icon_pack=”material” icon_shape=”circle” icon_size=”large” icon_material=”F332″ icon_color=”#3c3950″ icon_background_color=”#ffffff” icon_right_side_padding=”40″ icon_left_side_padding=”40″]

beautiful dropcaps

[gem_divider margin_bottom=”14″]

[/gem_icon_with_text][gem_divider margin_top=”25″][/gem_textbox][gem_divider margin_top=”69″]

[gem_dropcap style=”big” letter=”A” background_color=”#63667e” color=”#ffffff”]

Lorem ipsum dolor sit amet, consectetur adi pisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ipsum dolor sit amet, consectetur adi pisicing elit, sed do eiusmod tempor inci didunt ut labore et dolore magna aliqua. Ut enim ad minit.

[gem_dropcap shape=”circle” style=”big” letter=”B” background_color=”#2c829d” color=”#ffffff”]

[gem_dropcap shape=”hexagon” style=”big” letter=”C” background_color=”#00a3be” border_color=”#00a3be” color=”#ffffff”]

[gem_dropcap letter=”D” background_color=”#8d3d70″ border_color=”#8d3d70″ color=”#ffffff”]

[gem_dropcap shape=”circle” letter=”E” background_color=”#684c92″ border_color=”#684c92″ color=”#ffffff”]

[gem_dropcap shape=”hexagon” letter=”F” background_color=”#3f5db5″ border_color=”#3f5db5″ color=”#ffffff”]

[gem_dropcap letter=”C” background_color=”#ffffff” border_color=”#eb9dab” color=”#eb9dab”]

[gem_dropcap shape=”circle” letter=”H” background_color=”#ffffff” border_color=”#b4a5c8″ color=”#b4a5c8″]

[gem_dropcap shape=”hexagon” letter=”I” background_color=”#ffffff” border_color=”#d8d8d8″ color=”#dddddd”]

[gem_divider margin_top=”100″][gem_fullwidth background_parallax=”1″ background_parallax_type=”horizontal” background_image=”1254″ padding_top=”100″ padding_bottom=”150″][gem_testimonials set=”dummy” image_size=”size-large” fullwidth=”1″][/gem_fullwidth][gem_divider margin_top=”-27″]

[gem_fullwidth background_parallax=”1″ background_parallax_type=”horizontal” styled_marker_bottom_style=”figure” styled_marker_bottom_direction=”outside” background_color=”#46485c” padding_top=”75″ padding_bottom=”60″]

QUOTED TEXT EXAMPLES

[/gem_fullwidth][gem_divider margin_top=”143″]

[gem_quote no_paddings=”1″]…Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod.[/gem_quote][gem_divider margin_top=”0″]

[gem_divider margin_top=”32″][gem_quote style=”2″ no_paddings=”1″]…Lorem Ipsum proin gravida nibh vel velit.[/gem_quote][gem_divider margin_top=”-28″]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisqua.

[gem_divider margin_top=”32″][gem_quote style=”1″ no_paddings=”1″]…Lorem Ipsum proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum[/gem_quote][gem_divider margin_top=”-28″]

[gem_divider margin_top=”32″][gem_quote no_paddings=”1″]…Lorem Ipsum proin gravida nibh vel velit auctor aliquet Aenean sollicitudin lorem[/gem_quote][gem_divider margin_top=”-23″]

[gem_quote style=”1″ no_paddings=”1″]

…Lorem Ipsum proin gravida nibh vel velit auctor aliquet Aenean lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh Duis

[/gem_quote][gem_divider margin_top=”-58″]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor

[gem_quote style=”5″ no_paddings=”1″]…Lorem Ipsum proin gravida nibh vel velit auctor aliquet lorem quis bibendum auctor isi elit onsequat ipsum[/gem_quote]

[gem_divider margin_top=”60″]

[gem_fullwidth background_image=”208″ padding_top=”157″ padding_bottom=”159″][gem_icon pack=”material” size=”xlarge” centered=”1″ icon_material=”F471″ color=”#ffffff” color_2=”#ffffff”][gem_divider margin_top=”24″]

custom headings…

[/gem_fullwidth][gem_divider margin_top=”96″]

[vc_custom_heading text=”CUSTOM HEADING ONE” font_container=”tag:p|font_size:36|text_align:left|line_height:1″ google_fonts=”font_family:Oswald%3A300%2Cregular%2C700|font_style:300%20light%20regular%3A300%3Anormal”]

[gem_divider margin_top=”68″][vc_custom_heading text=”Custom heading three” font_container=”tag:p|font_size:36|text_align:left|line_height:1″ google_fonts=”font_family:Droid%20Serif%3Aregular%2Citalic%2C700%2C700italic|font_style:400%20regular%3A400%3Anormal”]

[gem_divider margin_top=”68″][vc_custom_heading text=”Custom heading five” font_container=”tag:p|font_size:36|text_align:left|line_height:1″ google_fonts=”font_family:Lobster%3Aregular|font_style:400%20regular%3A400%3Anormal”]

[gem_divider margin_top=”67″]

[vc_custom_heading text=”Custom heading two” font_container=”tag:p|font_size:36|text_align:left|line_height:1″ google_fonts=”font_family:Pacifico%3Aregular|font_style:400%20regular%3A400%3Anormal”]

[gem_divider margin_top=”68″][vc_custom_heading text=”CUSTOM HEADING FOUR” font_container=”tag:p|font_size:36|text_align:left|line_height:1″ google_fonts=”font_family:Arvo%3Aregular%2Citalic%2C700%2C700italic|font_style:700%20bold%20regular%3A700%3Anormal”]

[gem_divider margin_top=”68″][vc_custom_heading text=”CUSTOM HEADING SIX” font_container=”tag:p|font_size:36|text_align:left|line_height:1″ google_fonts=”font_family:Exo%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic|font_style:100%20light%20regular%3A100%3Anormal”]

[gem_alert_box content_background_color=”#ffb932″ button_1_size=”medium” button_1_corner=”” button_1_icon_pack=”elegant” border_color=”#f7f7f7″ border_width=”5″ button_1_text=”learn more” button_1_background_color=”#2c2e3d” button_1_hover_background_color=”#46485c”][gem_divider margin_top=”15″]

custom font heading!

[gem_divider margin_top=”-15″]

You can easily create headings from any custom fonts founded on the web

[gem_divider margin_top=”15″][/gem_alert_box]

[gem_divider margin_top=”80″]

[gem_fullwidth]

[gem_divider margin_top=”25″][vc_separator style=”double” border_width=”2″]

fancy dividers & titles

[gem_divider margin_top=”25″][vc_separator style=”double” border_width=”2″]

[/gem_fullwidth]

[gem_divider style=”1″ margin_top=”50″]

[vc_separator color=”custom” style=”dashed” accent_color=”#00b8d4″][gem_divider style=”1″ color=”#00b8d4″ margin_top=”50″][gem_divider color=”#13d7a7″ margin_top=”50″][gem_divider margin_top=”50″][vc_separator color=”custom” style=”double” border_width=”2″ accent_color=”#94da75″][gem_divider style=”3″ color=”#c7cb62″ margin_top=”50″][gem_divider margin_top=”50″][vc_separator color=”custom” style=”double” border_width=”2″ accent_color=”#ffda75″][gem_divider style=”4″ color=”#ff8c71″ margin_top=”50″][gem_divider style=”5″ color=”#ff79a8″ margin_top=”50″][gem_divider style=”6″ margin_top=”50″][gem_divider style=”7″ margin_top=”50″][gem_divider margin_top=”50″][vc_text_separator title=”cool title CENTERED” color=”custom” style=”double” accent_color=”#00bcd4″][gem_divider margin_top=”50″][vc_text_separator title=”cool title LEFT” title_align=”separator_align_left” align=”align_left” color=”custom” border_width=”2″ accent_color=”#dfe5e8″][gem_divider margin_top=”50″][vc_text_separator title=”cool title RIGHT” title_align=”separator_align_right” align=”align_right” color=”custom” style=”double” border_width=”2″ accent_color=”#dfe5e8″][gem_divider margin_top=”156″]

[gem_fullwidth container=”1″ background_color=”#f0f3f2″ padding_top=”60″ padding_bottom=”90″][gem_alert_box icon_size=”medium” content_background_color=”#f0f3f2″ button_1_style=”outline” button_1_size=”medium” button_1_text_weight=”thin” button_1_corner=”0″ button_1_border=”1″ button_1_icon_pack=”elegant” button_2_activate=”1″ button_2_style=”outline” button_2_size=”medium” button_2_text_weight=”thin” button_2_corner=”0″ button_2_border=”1″ button_2_icon_pack=”elegant” centered=”1″ button_1_text=”purchase now” button_1_text_color=”#6c136f” button_1_hover_text_color=”#ffffff” button_1_hover_background_color=”#6c136f” button_1_border_color=”#6c136f” button_2_text=”leave me alone” button_2_text_color=”#6c136f” button_2_hover_text_color=”#ffffff” button_2_hover_background_color=”#6c136f” button_2_border_color=”#6c136f” button_2_hover_border_color=”#6c136f”][gem_icon pack=”elegant” shape=”circle” size=”medium” centered=”1″ icon_elegant=”E104″ color=”#3c3950″ border_color=”#3c3950″][gem_divider margin_top=”50″]

thin advert box

[gem_divider margin_top=”40″]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[gem_divider margin_top=”20″][/gem_alert_box][/gem_fullwidth]