[et_pb_section fb_built=”1″ fullwidth=”on” module_class=”single-post-hero” _builder_version=”3.24″ background_position=”bottom_center” bottom_divider_style=”slant2″ bottom_divider_color=”#ffffff” bottom_divider_height=”50px” bottom_divider_flip=”vertical|horizontal”][et_pb_fullwidth_post_title meta=”off” featured_placement=”background” text_color=”light” _builder_version=”3.24″ title_font=”|700|||||||” title_text_align=”center” title_text_color=”#ffffff” title_font_size=”50px” title_line_height=”1.1em” use_background_color_gradient=”on” background_color_gradient_start=”rgba(0,0,0,0.58)” background_color_gradient_end=”rgba(0,0,0,0.78)” background_color_gradient_start_position=”84%” background_color_gradient_overlays_image=”on” background_image=”https://graphem.com/wp-content/uploads/2019/04/hero-google-fonts-for-headings.jpg” background_size=”initial” background_repeat=”repeat” title_font_size_tablet=”40px” title_font_size_phone=”30px” title_font_size_last_edited=”on|phone” title_line_height_last_edited=”on|phone” custom_css_main_element=”height: 70vh;” custom_css_post_title=”margin-bottom: 70px;”][/et_pb_fullwidth_post_title][/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|phone” admin_label=”section” _builder_version=”3.22.3″ custom_padding=”50px||0|” custom_padding_tablet=”50px|||” custom_padding_phone=”50px|||”][et_pb_row custom_padding=”0|0px|0|0px” custom_padding_phone=”0px||0px|” custom_margin=”||20px|” custom_padding_last_edited=”on|phone” module_class_2=”comment-section” module_class_3=”share-section” custom_css_main_3=”top: 10px;||position: sticky;” admin_label=”row” _builder_version=”3.22.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_post_title author=”off” featured_image=”off” _builder_version=”3.24″ title_font=”|700|||||||” title_line_height=”1.2em” border_width_bottom=”1px” border_color_bottom=”#f3f3f3″ max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center” custom_margin=”||30px|” custom_padding=”|||”][/et_pb_post_title][et_pb_text _builder_version=”3.22.1″ header_font=”||||||||” header_2_font=”|||||on|||” header_2_text_align=”center” header_3_font=”||||||||” header_3_text_align=”center” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone”]Fonts are not just letters squished together. If fonts are done right, you barely notice them. They are a part of your overall design and should support the other elements in your overall layout. They should be chosen with care and should look like an integral part of the entire design, helping tell a story.
There are many aspects to consider when thinking about typeface. What is the medium you’re using? What other elements do you want to include? But most importantly, what is the message you’re trying to convey?
Here are some general design rules to follow, to help you make your typography decisions.[/et_pb_text][et_pb_text _builder_version=”3.22.1″ header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|tablet” module_alignment=”center” custom_margin=”|||” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone”]
//01
Serif vs. Sans-Serif
Some designers prefer to give their headlines a serif font to give them more appeal because the small stroke attached to the end of the letters look beautiful and elegant at a large font size. The contrast between a serif font for headlines and a sans-serif font for body copy can also add an interesting element.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”27px|0px|40px|0px|false|false” _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/04/graphem-how-to-choose-fonts-serif-sans-serif.jpg” align=”center” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″ box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.05)” custom_margin=”||5px|”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.22.1″][et_pb_text _builder_version=”3.24″ header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|desktop” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone” header_2_font_size_tablet=”30px” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone”]
//02
Serif Fonts For A Longer Text
It is easier to read Serif fonts if you’re using large blocks of texts. They are used traditionally in books, articles, newspapers, and magazines.
Example of serif fonts are:
Windows – Georgia, Garamond
Mac – Iowan Old Style, Charter
Google Fonts – Merriweather, PT Serif[/et_pb_text][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/04/graphem-how-to-choose-fonts-serif.jpg” show_bottom_space=”off” align=”center” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″ box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.05)” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|desktop”][/et_pb_image][et_pb_button button_url=”http://www.medium.com” url_new_window=”on” button_text=”medium.com” button_alignment=”center” _builder_version=”3.22.1″ custom_button=”on” button_text_size=”14px” button_text_color=”#999999″ button_border_width=”0px” button_border_radius=”0px” button_font=”|300|on|||||#999999|dotted” button_use_icon=”off” custom_padding=”0px|0px|0px|0px” custom_css_main_element=”text-decoration: underline;” button_text_color_hover=”#555555″ button_bg_color_hover=”rgba(0,0,0,0)” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#555555″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”rgba(0,0,0,0)” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_button][et_pb_text _builder_version=”3.24″ header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|desktop” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone” header_2_font_size_tablet=”30px” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone”]
Example of serif fonts are:
Windows – Georgia, Garamond
Mac – Iowan Old Style, Charter
Google Fonts – Merriweather, PT Serif
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ custom_padding=”||40px|||” _builder_version=”3.24″][et_pb_column type=”1_3″ _builder_version=”3.22.1″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/06/graphem-blog-fonts-serif-ms.jpg” align=”center” _builder_version=”3.24″ border_radii=”on|10px|10px|10px|10px” box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.22.1″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/06/graphem-blog-fonts-serif-macos.jpg” align=”center” _builder_version=”3.24″ border_radii=”on|10px|10px|10px|10px” box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.22.1″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/06/graphem-blog-fonts-serif-google-fonts.jpg” align=”center” _builder_version=”3.24″ border_radii=”on|10px|10px|10px|10px” box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.22.1″][et_pb_text _builder_version=”3.24″ header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|desktop” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone” header_2_font_size_tablet=”30px” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone”]
//03
Sans Serif Fonts For A Shorter Texts
Sans Serif fonts are everywhere – websites, interfaces, street banners, navigations, packaging, manuals, and books.[/et_pb_text][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/04/graphem-how-to-choose-fonts-sans-serif.jpg” show_bottom_space=”off” align=”center” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″ box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.05)” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|desktop” module_alignment=”center”][/et_pb_image][et_pb_button button_url=”http://www.redbull.com” url_new_window=”on” button_text=”redbull.com” button_alignment=”center” _builder_version=”3.22.1″ custom_button=”on” button_text_size=”14px” button_text_color=”#999999″ button_border_width=”0px” button_border_radius=”0px” button_font=”|300|on|||||#999999|dotted” button_use_icon=”off” custom_padding=”0px|0px|0px|0px” custom_css_main_element=”text-decoration: underline;” button_text_color_hover=”#555555″ button_bg_color_hover=”rgba(0,0,0,0)” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#555555″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”rgba(0,0,0,0)” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_button][et_pb_text _builder_version=”3.24″ header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|desktop” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone” header_2_font_size_tablet=”30px” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone”]
Example of sans serif fonts are:
Windows – Verdana, Tahoma
Mac – Helvetica Neue, Verdana, Tahoma
Google Fonts – Open Sans, Roboto, Lato
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ custom_padding=”||40px|||” _builder_version=”3.24″][et_pb_column type=”1_3″ _builder_version=”3.22.1″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/06/graphem-blog-ms-fonts.jpg” align=”center” _builder_version=”3.24″ border_radii=”on|10px|10px|10px|10px” box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.22.1″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/06/graphem-blog-macos-fonts.jpg” align=”center” _builder_version=”3.24″ border_radii=”on|10px|10px|10px|10px” box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.22.1″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/06/graphem-blog-google-fonts.jpg” align=”center” _builder_version=”3.24″ border_radii=”on|10px|10px|10px|10px” box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”0|0px|0|0px” custom_padding_phone=”0px||0px|” custom_margin=”|auto|40px|auto||” custom_padding_last_edited=”on|phone” module_class_2=”comment-section” module_class_3=”share-section” custom_css_main_3=”top: 10px;||position: sticky;” admin_label=”row” _builder_version=”3.22.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.24″ header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|tablet”]
//04
Free Fonts
If possible, you should use free fonts because why pay when you don’t have to? The best source of free fonts are Google Fonts which have a good database. You can also find some free fonts or with a great discount on MyFonts or Behance. These fonts are amazing from novice designers or font enthusiasts.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”27px|0px|40px|0px|false|false” _builder_version=”3.22.3″][et_pb_column type=”1_2″ _builder_version=”3.0.47″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/06/graphem-blog-google-fonts-site.jpg” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.24″ box_shadow_style=”preset1″ box_shadow_vertical=”0px” box_shadow_blur=”20px” box_shadow_spread=”2px” custom_margin=”||5px|”][/et_pb_image][et_pb_button button_url=”https://fonts.google.com/” url_new_window=”on” button_text=”fonts.google.com” button_alignment=”center” _builder_version=”3.24″ custom_button=”on” button_text_size=”14px” button_text_color=”#999999″ button_border_width=”0px” button_border_radius=”0px” button_font=”|300|on|||||#999999|dotted” button_use_icon=”off” custom_padding=”0px|0px|0px|0px” custom_css_main_element=”text-decoration: underline;” button_text_color_hover=”#555555″ button_bg_color_hover=”rgba(0,0,0,0)” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#555555″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”rgba(0,0,0,0)” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_button][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.0.47″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/06/graphem-blog-behance.jpg” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.24″ box_shadow_style=”preset1″ box_shadow_vertical=”0px” box_shadow_blur=”20px” box_shadow_spread=”2px” custom_margin=”||5px|”][/et_pb_image][et_pb_button button_url=”https://www.behance.net/” url_new_window=”on” button_text=”behance.net” button_alignment=”center” _builder_version=”3.24″ custom_button=”on” button_text_size=”14px” button_text_color=”#999999″ button_border_width=”0px” button_border_radius=”0px” button_font=”|300|on|||||#999999|dotted” button_use_icon=”off” custom_padding=”0px|0px|0px|0px” custom_css_main_element=”text-decoration: underline;” button_text_color_hover=”#555555″ button_bg_color_hover=”rgba(0,0,0,0)” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#555555″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”rgba(0,0,0,0)” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”0|0px|0|0px” custom_padding_phone=”0px||0px|” custom_margin=”||20px|” custom_padding_last_edited=”on|phone” module_class_2=”comment-section” module_class_3=”share-section” custom_css_main_3=”top: 10px;||position: sticky;” admin_label=”row” _builder_version=”3.22.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.24″ header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|tablet” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone”]
//05
Paid Fonts
If your design needs something special or you’re creating something unique, you might want to consider buying fonts. The most popular stores are MyFonts, fonts.com, Linotype, FontShop. Start buying them slowly and keep a catalogue.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”27px|0px|40px|0px|false|false” _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/06/graphem-blog-myfonts.jpg” align=”center” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.24″ box_shadow_style=”preset1″ box_shadow_vertical=”0px” box_shadow_blur=”20px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.1)” max_width=”80%” max_width_last_edited=”on|tablet” module_alignment=”center” custom_margin=”||10px|”][/et_pb_image][et_pb_button button_url=”https://www.myfonts.com/” url_new_window=”on” button_text=”myfonts.com” button_alignment=”center” _builder_version=”3.24″ custom_button=”on” button_text_size=”14px” button_text_color=”#999999″ button_border_width=”0px” button_border_radius=”0px” button_font=”|300|on|||||#999999|dotted” button_use_icon=”off” custom_margin=”|||” custom_padding=”0px|0px|0px|0px” custom_css_main_element=”text-decoration: underline;” button_text_color_hover=”#555555″ button_bg_color_hover=”rgba(0,0,0,0)” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#555555″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”rgba(0,0,0,0)” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”0|0px|0|0px” custom_padding_phone=”0px||0px|” custom_margin=”||20px|” custom_padding_last_edited=”on|phone” module_class_2=”comment-section” module_class_3=”share-section” custom_css_main_3=”top: 10px;||position: sticky;” admin_label=”row” _builder_version=”3.22.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.24″ header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone”]
//06
Headings vs. Body
As a general design rule, headings and body should use different font size or weight because it allows the eye to easily divide and read the text. Using bold, italics, all-caps also provides a ways to draw the appropriate amount of attention to points of interest without the use of additional font families.
If you want to add more style to your text then you can try different fonts for headings and body. When an assortment of typefaces are available, picking a different one for headings apposed to text is common and does not damage the layout.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”27px|0px|40px|0px|false|false” _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/06/graphem-blog-ny-times.jpg” align=”center” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.24″ box_shadow_style=”preset1″ box_shadow_vertical=”0px” box_shadow_blur=”20px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.1)” max_width=”80%” max_width_last_edited=”on|tablet” module_alignment=”center” custom_margin=”||10px|”][/et_pb_image][et_pb_button button_url=”https://www.nytimes.com” url_new_window=”on” button_text=”www.nytimes.com” button_alignment=”center” _builder_version=”3.24″ custom_button=”on” button_text_size=”14px” button_text_color=”#999999″ button_border_width=”0px” button_border_radius=”0px” button_font=”|300|on|||||#999999|dotted” button_use_icon=”off” custom_margin=”|||” custom_padding=”0px|0px|0px|0px” custom_css_main_element=”text-decoration: underline;” button_text_color_hover=”#555555″ button_bg_color_hover=”rgba(0,0,0,0)” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#555555″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”rgba(0,0,0,0)” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”0|0px|0|0px” custom_padding_phone=”0px||0px|” custom_padding_last_edited=”on|phone” module_class_2=”comment-section” module_class_3=”share-section” custom_css_main_3=”top: 10px;||position: sticky;” admin_label=”row” _builder_version=”3.22.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_text _builder_version=”3.22.1″ header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_last_edited=”on|phone”]
Conclusion
Ultimately it’s up to you, the designer, to decide which typeface to use in any given situation. Following basic design principles usually helps make the text more appealing and beautiful. However, great designers and typographers are always innovating and trying new ways to create beautiful, intriguing layouts. Great typography is achieved by experimentation so go out and try new fonts and see what works.[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”3.22.3″ custom_padding=”0px|0px|20px|0px”][et_pb_row module_class_2=”next-prev-section” _builder_version=”3.22.3″ border_color_top=”rgba(0,0,0,0.3)”][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_divider color=”rgba(0,0,0,0.3)” _builder_version=”3.23.4″ max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center” height=”0px” custom_margin=”||0px|” custom_padding=”||0px|”][/et_pb_divider][et_pb_post_nav prev_text=”%title” next_text=”%title” _builder_version=”3.22.1″ title_font=”|700|||||||” title_text_color=”#0C71C3″ title_font_size=”18px” max_width=”70%” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center”][/et_pb_post_nav][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ disabled_on=”on|on|on” _builder_version=”3.22.3″ background_color=”#fafafa” custom_padding=”25px|0px|0|0px” disabled=”on”][et_pb_row custom_padding=”27px|0px|0|0px” module_class_2=”comment-section” _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_comments _builder_version=”3.23″ form_field_background_color=”#ffffff” body_font=”||||||||” form_field_font=”||||||||” custom_button=”on” button_text_size=”15px” button_text_color=”#888888″ button_bg_color=”#ffbf41″ button_border_color=”#ffbf41″ button_border_radius=”83px” button_font=”||||||||” button_use_icon=”off” max_width=”70%” module_alignment=”center” custom_css_main_header=”font-size: 16px;||font-weight: 700;||border-bottom: 1px solid #e7e7e7;||margin-bottom: 20px;” custom_css_comment_body=”padding-bottom: 0;||border-bottom: 1px solid #e7e7e7;” custom_css_reply_button=”border: none;||border-radius: 0 !important;||padding: 2px 0 2px 10px !important;||font-weight: 400 !important;||background: #fafafa !important;” custom_css_submit_button=”padding: 5px 30px !important;||color: black !important;” button_text_color_hover=”#000000″ button_border_color_hover=”#e8ab3a” button_bg_color_hover=”#e8ab3a” form_background_color=”#ffffff” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#000000″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”on” button_border_color__hover=”#e8ab3a” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”#e8ab3a” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_comments][/et_pb_column][/et_pb_row][/et_pb_section]
