Typography: Definition and 10 Key Terms

Typography is the art of arranging letters and text to make the message clear, readable and artistically pleasing. Fonts, styles and arrangement of text are used within typography to convey a message.

For a look at some font types with examples and links, click here: Font Types

For a glimpse of how two websites employ typography, click here: Typography in Websites


Terms:

1. Typeface: An entire family of fonts (including weights and italics).

2. Fonts: The styles, weights widths and styles within a typeface.

3. Serif: A typeface that has extra marks (small lines called serifs) at the end of letters. These typefaces are traditionally used for long tracts of text such as books and newspapers. An example is Times New Roman.

4. San Serif: A typeface that does not have the extra marks (or, serifs) at the end of each letters. San serif typefaces are clean and modern, and useful in digital displays, logos and some body text. Examples include Helvetica and Ariel.

5. Baseline: The line onto which all characters align.

6. Ascender Line: The stroke of a lowercase character (such as an “h”) that extends above the x-height.

7. Descender Line: The stroke of a lowercase character (“j,” for example) that extends below the baseline.

8. X-Height: In typography, this is the height of the lowercase “x” in a typeface. X-height is useful in setting up paragraphs for readability.

9. Type Hierarchy: In page layout design, type hierarchy conveys the order of text in terms of importance of different elements of the copy. Fonts used for heads, subheads and running text all play a role in the hierarchy of a designed page. The goal is to clearly direct a reader as to key messages in content.

10. Open Type: This is a universal file format for typefaces that can open on both Mac and Windows systems. Open Type fonts offer extensive character sets. Found on online platforms, Open Type fonts are with Post-Script (with an .otf extension), or True Type (with a .ttf extension).


Also in this portfolio:

Photoshop and Animate Projects:

Photoshop Project: Digital Magazine Cover
Photoshop Project: Logo for Fictional Electric Vehicle Company
Animate Project: Digital Ad for Fictional Insurance Company
Animate Project: Infographic of Simple Electric Circuit

Color and Typography Project Pages:

Color Theory Article and Definitions
Color Themes
Color Use in Two Websites
Types of Fonts
Type Usage in Two Websites

Background:

My Resume
Home