Learning Typography

I’ve long tried to get into a MOOC for a number of subjects, alas none have stuck. Recently I enrolled in one on the topic of typography in an effort to ramp some of my design skills — visual design is a longstanding passion of mine.

Typography is the foundation to design, especially in the context of my background in instructional design. In essence, the content must be presented effectively for audiences to learn. Often times the text can get lost by the end of a project from the emphasis on visuals and interactivity in some learning solutions.

In tackling this course, my goal began to formalize my knowledge for cleaner approaches to my designs, however, in progressing, my mindset has advanced into appropriating a more refined structure and flow to the development of my content—no matter the medium to which it is being presented. In advancing my knowledge I have honed into a few of the main concepts, among the lessons on typography, to appropriate designs with a clearer perception of enhancing the experiences for audiences.

The following four components focus on my key considerations on typography improvement—so far :).


1. Typefaces

It is important to be aware of the classifications of a type such as a serif, sans-serif, script, and decorative style. In understanding the classifications, you can identify their appropriateness within the context of different projects, as some classifications can and will conflict with or inhibit the effectiveness of a body of text, ultimately losing touch with the audience altogether.

Different classifications evoke different emotions. Breaking down the styles of type and approaching them with the context and tone can provide guidance on approaching the type styles that will work best for a project. 
For example, a project that is requiring a serious matter of content will not be effective in communicating with an audience if a type chose is stylistically loose, curvy/wavy, or very thin and weak standing.

Some typeface classifications and examples.

2. Typographic Space

The next major factor is one of my most critical and includes a number of different components, such as the leading, kerning, letter spacing, tracking, line length, and alignment. I mark this as critical because these components can greatly impact the visual balance and accessibility of content in both flow and comprehension depending on the settings or lack of setting adjustments made.

Left: 10pt font with 13pt leading | Right: 10pt font with 18pt leading

For example, when manipulating the leading, too much leading can cause fracture in the lines of text, while too little leading can bunch text into a large mass that is too constricting for a comfortable read. Generally, I start with a leading range of 120%–130% and move into any necessary adjustments from there based on the type’s x-height and alignment in the documents that I am working on. In addition, depending on the alignment, typically left-align, the rag of a body of text should come into careful consideration for the left to right reading flow as well as flow of the shape that is created by an ‘invisible’ line following the along the right side of the body.

Some generalizations to improve the shape and readability among the line breaks include: creating a rag that is not too uneven and not too straight as both can be distracting, preventing the appearance of hyphened words into shorter than 2 letters long among the break, and preventing the presence of 1–2 letter words at the end of long lines. When it comes to refining and tweaking the rag and hyphenation, it may become a manual effort for your design depending on the software and the body of text you are editing.


3. Page Space

In adjusting the typographic space of bodies of text, the most beneficial and supportive way to refine these adjustments comes from utilizing grids that break down and identify the page dimensions we are working with. Awareness of our page space allows up to identify the relation or bodies of text to one another based on their proximity for the association and visual comprehension of content related or unrelated to other bodies of text present on the same page or screen. The use of a grid can define, refine, and complete our structure of content with visual flow and movement of the content or confinement and restriction of the content in our design approach. Grids are not a defining guide to our content placement and can invoke ways in which we want to break free from the restrictions of formal designs.


4. Hierarchy

This one really is quite self-explanatory but is still an important component to mention as it is a key component in creating a balance and defining the structure of different components within our content as they are presented on one page. Identifiers such as titles, subtitles, main bodies of text, or footnotes should have distinctions of who they are in the hierarchy of content and flow for your audience, through the use of the various components discussed as well as weights and sizes. In respect to establishing a hierarchical structure, it is important to maintain visual consistency in defining your content’s hierarchy.

Like what you read? Give Joshua Stoner a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.