[et_pb_section bb_built=”1″ admin_label=”section”][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” custom_margin=”||50px|” allow_player_pause=”off” parallax=”off” parallax_method=”on” make_equal=”off” parallax_1=”off” parallax_method_1=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/typography-101.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”on” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on” /][et_pb_text admin_label=”Text: Typography 101 intro” use_border_color=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.13.1″]
For marketing and advertising purposes, creative projects often need to use some sort of a message that cannot always be conveyed with imagery alone. Typography is one of the most important tools for graphic designers. Projects and designs including textual content depend on the typographical treatment for successful visual communication. A thorough understanding of type classifications and their histories and the characteristics of letterforms, and the terms and tools used to manipulate the look and placement of type is essential for graphic designers. Combining typefaces, incorporating hand lettering, and honing a sense of hierarchy and composition are all methods for more developing more sophisticated typography.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” custom_margin=”40px||40px|” allow_player_pause=”off” parallax=”off” parallax_method=”on” make_equal=”off” parallax_1=”off” parallax_method_1=”off” parallax_2=”off” parallax_method_2=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_2″][et_pb_text admin_label=”Text: Typeface or Font??” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Typeface or Font??
A typeface is the design of the letterforms.
A font is the delivery mechanism.
Digitally, the typeface is the visual design. A typeface may be produced as different fonts from different font foundries. The fonts are the digital files of the typeface.
[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/arial-font.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”right” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”right” show_bottom_space=”on” /][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” custom_margin=”40px||40px|” allow_player_pause=”off” parallax=”off” parallax_method=”on” make_equal=”off” parallax_1=”off” parallax_method_1=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text: Type Classifications” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Type Classifications
[/et_pb_text][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/serif-vs-sans-font-cnm.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”on” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_5″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/serif-typefaces_02.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”4_5″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Humanist or Old Style
The roman typefaces of the 15th and 16th centuries emulated classical calligraphy.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_5″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/serif-typefaces_03.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”4_5″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Transitional
These typefaces have sharper serifs and a more vertical axis than humanist letters. Their sharp forms and high contrast are noticeably distinct from humanist letters.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_5″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/serif-typefaces_04.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”4_5″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Modern
The typefaces are radically abstract from other serifs. Note the thing, straight serifs, vertical axis, and sharp contrast from thick to thin strokes.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_5″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/serif-typefaces_05.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”4_5″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Egyptian or Slab Serif
Numerous bold and decorative typefaces were introduced in the 19th century for use in advertising. These typefaces have heavy, slablike serifs.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_5″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/sans-serif-typefaces_01.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”4_5″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Humanist Sans Serif
Sans-serifs became popular in the 20th century. Gills Sans, has humanistic characteristics such as lilthing counter in certain letters, and calligraphic variations in line weight.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_5″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/sans-serif-typefaces_02.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”4_5″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Transitional Sans Serif
Such as Helvetica, a widely use typeface. Its uniform, upright character makes it similar to transitional serif letters.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_5″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/sans-serif-typefaces_03.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”4_5″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Geometric Sans Serif
Geometric sans serifs are built around geometric forms. Such as Futura, with Os which are perfect circles, and the peaks of the A and M are sharp triangles.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” custom_margin=”40px||40px|” allow_player_pause=”off” parallax=”off” parallax_method=”on” make_equal=”off” parallax_1=”off” parallax_method_1=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/type-family.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][et_pb_text admin_label=”Text – Type Family/Superfamilies” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Type Family/Superfamilies
Type families are organized sets of matching roman and italic typefaces, usually of varying weight. Superfamilies also include additional variations in weight, widths, and sometimes even serif and sans-serif versions.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” custom_margin=”40px||40px|” allow_player_pause=”off” parallax=”off” parallax_method=”on” make_equal=”off” parallax_1=”off” parallax_method_1=”off” parallax_2=”off” parallax_method_2=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”2_3″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Mixing Typefaces
When mixing typefaces look more for contrast rather than harmony. When typefaces are of the same family, avoid using ones that are too close in weight, it makes the choice seem more unintentional. When using different typefaces in one line, try to make the size, but when different typefaces are used on different lines, a big contrast in size can work well.
When choosing different typefaces, you can use different categories such as sans-serif, serif, script, slab, etc to achieve good contrast.
[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/mix-and-match-typography-e1493921205597.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”right” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”right” show_bottom_space=”on” /][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” custom_margin=”40px||40px|” allow_player_pause=”off” parallax=”off” parallax_method=”on” make_equal=”off” parallax_1=”off” parallax_method_1=”off” parallax_2=”off” parallax_method_2=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_2″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/typographic-hierarchy.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text admin_label=”Text: Hierarchy” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Hierarchy:
Typographic hierarchy helps readers navigate content easily and enhances the readability of the written word. Typography elements include the way paragraphs and broken up and the way certain information is emphasized with scale, color, spacing, and placement. Hierarchy expresses the organization of content, emphasizing some elements and subordinating others.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_3″][et_pb_text admin_label=”Text: Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Text
“Text” is defined as an ongoing sequence of words, distinct from shorter headlines or captions. The main block of of text is called the “body.” “Running text” refers to text that can flow from page to page or to another column. The design of text should be cohesive, and treated differently than images and callouts around it.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_3″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/body-copy.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”right” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”right” show_bottom_space=”on” /][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” custom_margin=”40px||40px|” allow_player_pause=”off” parallax=”off” parallax_method=”on” make_equal=”off” parallax_1=”off” parallax_method_1=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text: Logotype” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Logotype:
A logotypes uses typography or lettering to depict the name or initials of an organization in a memorable way. Whereas some trademarks consist of an abstract symbol or a pictorial icon, a logotype uses words and letters to create a distinctive visual image.
[/et_pb_text][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/Logotypes.gif” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”center” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”2_3″][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Lettering
Creating type by hand is called lettering. It allows designers to integrate imagery with text in a cohesive way. Lettering can still be based off of designed typefaces or all with an artist’s style.
[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/hand-lettering.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” custom_margin=”40px||40px|” allow_player_pause=”off” parallax=”off” parallax_method=”on” make_equal=”off” parallax_1=”off” parallax_method_1=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text: Font Licensing” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]
Font Licensing
Most digital fonts are limited by the use by a EULA (end user license agreement). Fonts are protected software. Violations include copying a digital font to share with other people, friends, clients, etc. It is also illegal to edit the file of a font file/software itself and saving it under a new name for distribution. Many free fonts are ok to share and alter, but some have been redistributed without permission and some are not properly designed.
[/et_pb_text][et_pb_image src=”https://coolnerdsmarketing.com/wp-content/uploads/Bw_licensing_icons-01-e1493921166429.png” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”slide” animation_duration=”500ms” animation_intensity_slide=”10%” animation_direction=”left” show_bottom_space=”on” /][/et_pb_column][/et_pb_row][/et_pb_section]
