Fundamentals
Typography
Typography is the technique of arranging type to make written language easy to read, understandable, and visually pleasing when presented. This involves selecting appropriate typefaces, sizes, line lengths, line spacing, and adjusting the spacing between pairs of letters.
This article is currently in progress and is being updated regularly to provide the most accurate and comprehensive information.
Overview
As one of the most fundamental skill sets of visual communication, typography directly influences many aspects of the user’s experience, including hierarchy, readability, legibility, labeling, wayfinding, signposting, aesthetics, and visual design. It helps distinguish between elements of primary, secondary, and tertiary importance, allowing readers to quickly locate key information. It also improves readability by organizing information and providing clear cues on where to start and how to progress through the content. In complex content, a good typographic hierarchy can make the information more digestible and easier to understand.
Three fundamental aspects of typography are legibility, readability, and aesthetics.
Legibility refers to the design of the typeface, specifically how clear and distinguishable each individual character is from the others. These design attributes that affect the ease with which readers can distinguish one letter from another, one word from another, and one line from another.
Readability refers to how easy it is to read words, phrases, and blocks of copy or text. Unlike legibility, which is a measure of how easily individual characters or letters can be distinguished from each other, readability is more about the arrangement and layout of text as a whole. Factors that can influence readability include font size, line length, line spacing, and text organization. A block of text that is considered readable should not strain the reader's eyes or make it difficult for them to follow along.
Aesthetics in typography is about the beauty and the pleasing qualities of the type layout. This includes the choice of typeface, color, size, spacing, alignment, and other typographical elements. A well-designed type layout has a balance and harmony that are pleasing to the eye, and reflects the mood and tone of the content. It not only enhances readability and comprehension but also creates a visual impact that can evoke emotions and associations. The aesthetics of typography plays a crucial role in branding and design, as it can influence how a message is perceived and understood.
Hierarchy
Hierarchy in typography is vitally important as it helps guide a reader's eye through the content, improving readability and comprehension. This is achieved by manipulating different typographic elements such as size, weight, and color to distinguish between primary, secondary, and tertiary information. A well-implemented typographic hierarchy can effectively organize information, provide cues for where to begin and how to progress, and make complex content easier to digest.
Type hierarchy is a system of organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content. It involves the use of varying typefaces, styles, sizes, and colors to create distinct levels in the text. This not only helps guide the reader's eye to key points, but also enhances the overall readability and effectiveness of the design.
A simple example of type hierarchy can be seen in a newspaper article. The title or headline is often the largest and boldest text, instantly grabbing the reader's attention. This is followed by the subheading, which is smaller but still prominent, providing a brief overview of the article's content. The main body of the article is typically set in a smaller size, with key points or quotes sometimes highlighted in bold or italic. This hierarchy helps the reader to understand the structure of the information and navigate the content effectively.
Rhythm
Baseline rhythm is a concept in typography that refers to the vertical progression of text lines. It involves aligning the baselines of text to a spaced horizontal grid, which creates a visual rhythm, enhancing the readability and aesthetic appeal of the text layout.
Visual rhythm in typography refers to the patterned, recurring alternations in elements of the design. This could be in the form of consistent spacing between lines of text (leading), uniform lengths of lines, or even the repetition of certain typeface characteristics. Visual rhythm can create a sense of movement, guiding the reader's eye through the text, and can greatly enhance readability and the overall aesthetic appeal of the design.
Glossary of Terms
-
Ascender:
The part of a lowercase letter that extends above the main body or x-height (such as the upward strokes in 'b' and 'd').
-
Descender:
The part of a lowercase letter that extends below the baseline (like the downward strokes in 'p' and 'q').
-
Cap Height:
The height from the baseline to the top of an uppercase letter.
-
X-Height:
The height of the body of a lowercase letter, typically exemplified by the letter 'x'.
-
Baseline:
The line upon which most letters "sit" and below which descenders extend.
-
Meridian:
The imaginary line that runs vertically through the center of a character.
-
Stem:
The main, usually vertical stroke of a letterform.
-
Tail:
The descending, often decorative stroke on 'Q', 'j', 'y', etc.
-
Terminal:
The end of a stroke that does not include a serif.
Resources
-
Example Longer URL Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium velit tortor, et ullamcorper magna interdum a. Aliquam lacinia purus a libero venenatis, quis mattis lacus cursus.
-
This is a website
In ut venenatis lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed sem sed libero eleifend rutrum.
-
Link Title
Example description of the resource