Welcome to our free Typography tutorial. This tutorial is based on Webucator's Typography course.
The study of typography is deeper than one would think. It is more than just picking a nice font for a project. The more you learn and understand the fundamentals and history of typography, the better you will be able to apply it to today's projects.
Typography is the use of the proper typeface at the proper time. Understanding the different parts of a typeface character can help you better understand the way that it will flow when placed together into written word. Whether the project is going to be printed or on screen, for business or advertising, the message must be clear.
Ascender Line: Stroke of a lowercase character that extends above the x-height.
X-Height: The height of a lowercase X. This will vary among typefaces. The x-height is one of determining factors of readability in paragraphs.
Baseline: Line onto which all characters align.
Descender Line: Stroke of a lowercase character the dips below the baseline.
Serif: Corners, or "feet," that exist on the end of the strokes. Serif typefaces are great for written paragraphs, and the "feet" improve reader comprehension.
Bracket: The connector between the serif and the stem/stroke. These tend to vary in degrees based on the contrast and angle of the strokes.
Terminal: Stroke end that does not have a serif.
Loop: Loops are found at the bottom of some lowercase characters.
Stem: A vertical or diagonal stroke.
Typography is more than just artistic text that makes a design attractive. The main purpose of typography is to bring clarity and readability to the display of information. Whether we are developing a set of professional marketing materials, or a advertising campaign comprising multiple media outlets, typography is the key to the message getting through to the intended audience.
Use proper typography to:
Look at the samples below:
The one on the left uses a sans-serif font with no discerning differences between titles or paragraph text.
The one on the right uses a sans-serif title that is a bit larger than the serif body text that has a break between the paragraphs.
The results are clear; the one on the right is easy at a glance to digest, whereas the one on the left is merged together and takes effort to dissect.
Regardless of the types of material you are building, treat each page/screen as an interface that should have much thought placed into the proper placement of each element.
Typography had its beginning as far back as the mid 15th century when the movable type was invented. Western printing has three major type families that originated from the calligraphers of the time. They were the Roman, Italic, and Black Letter (Gothic).
Since then the number of typefaces has grown and the technology used to create print publications has drastically changed. Typography today also incorporates on screen display of text.
Today type can be found in print, on websites, and on many electronic screen devices. The following is a list of the types of fonts that work best in each sort of application. Whichever fonts you choose, make sure you are choosing the fonts that are universally available to all users of all operating system and web browsers. Special fonts can be sent to the printer to install and use when needed in the print world.
Google offers hundreds of free open-source fonts that were optimized for the web experience. More details and an updated list of these fonts is available at the following link. http://www.google.com/fonts/
In this exercise, you will explore a text sample and see how a few changes will increase the readability. You may use a design tool, such as Adobe InDesign, or a simple text editor, such as Microsoft Word.