Typography For All: What You Need To Know

Typography is the art of designing with type. Not every design project has to include images for it to be successful. As a matter of fact, many times images can take away from the message that you are trying to convey in a design.

Type is the basic building block of any printed page and/or website. Many times it will be absolutely imperative to design a page using more than one typeface. Knowing what typefaces work effectively together is extremely important for the design to be successful.

Typography is often overlooked by artists and readers alike because it's just text, right? Wrong. It's the balance and arrangement of typefaces on a web page, which helps a reader verbally and visually equate the significance and order of importance of page content. Yes, text obviously functions as verbal communication that is read, but it's also a strong visual mode of communication. It works with the other objects on a stage to help a reader understand the design in a clearer manner than simply having design with just one set font style and size and it helps create the vibe of the entire page.

Good use of typographic principles creates a sense of order to a web page or an article in print. Looking at a magazine article, you'll quickly see what the title is by the larger size used in type, the author's name in a subtle and unobtrusive manner, and the body in a uniform font choice, size, and style arranged in multiple columns from page to page. Not only does this make it easier for readers to scan the page, but it helps break up the layout as well. 

Letterforms refer to the shape and form of an individual character. Changing the letterform boundaries and parts will give you a multitude of effects and styles. That's why there are so many different fonts out there! They're large and small, some are solid filled, and others are outlined, with no fill inside individual letters. 

Typefaces are a family of type that shares the same style (such as Helvetica, which is a family). Fonts are a subset of a typeface, like Helvetica bold or Helvetica 12-point italic. Fonts come in all shapes, sizes, and faces. Each one carries a tone that helps to lift a design or bring it down. That's why it's important to understand what the various typefaces are.

Sans serif fonts are probably the most commonly used on the Web today because of their readability on the screen. An example of a sans serif font would be Arial. Sans means "without" in French, so sans serif literally means without serif. What is a serif? If you look closely at a serif font such as Times New Roman, you'll see that there are small features or decorative lines added at the ends of the letterform's stroke and stem. Sans serif fonts don't have those small curls and extra features at the ends of the letters; rather, they're very uniform throughout an entire letterform, which makes it easier to read at smaller or larger sizes. Serif fonts get increasingly difficult to read as they get smaller because of their extra features, and that's why you don't see Times New Roman used very often for body text on the Web.

While serif and sans serif fonts have different characteristics, they each have a different feel to them as well. Sans serif fonts are reminiscent of those years spent learning to write the alphabet in a very clear way, so that's why they have a more informal feel to them. On the other hand, a serif font is more parliamentary and connotes a regal feel, perhaps because the earliest books used serif fonts and many still do to this day.

The space between lines of type is referred to as leading (pronounced ledding). The origin of the word is derived from the older days of the printing press when strips of lead were used to create space between lines of text. If you have large blocks of text that you have to use in your design, it's probably best to have positive leading so that it's easier to read the body text. The amount of leading between lines can alter the association between lines and blocks of text, so this is something that you should pay attention to.

Kerning is the spacing between any two individual characters, but tracking is the spacing between individual characters across the board in a uniform manner. Sometimes a typeface can have too much spacing for the job you're trying to complete, so this is where being able to control that spacing between characters comes in handy. Newspapers and magazines adjust these all of the time to fit content on lines for spacing reasons and issues.

You might have come across justification in your word processor. Full justification creates a wall-to-wall approach of text, creating a vertical line on both sides of a column. You'll see this in newspapers all the time. There are also left, center, and right justification, which, as the words themselves indicate, justify the text to the left, center, or right. 

Typography has established itself as a critical part of design, especially when it comes to rapid visualization. Choosing the right font for a project can drastically alter the overall aesthetic, so don't be afraid to create alternate sketches with a font opposite of what you would have used to see how it would work. Sometimes you just can't tell what typeface will look better until you see two versions of a design side by side.

References

Berry, J. D. (2015). "dot-font: Being a Typographer". CreativePro. Creative Publishing Network and CreativePro. Retrieved from: http://creativepro.com/dot-font-being-a-typographer/

Bringhurst, R.(2002), The elements of typographic style (2nd ed.), Hartley & Marks: Vancouver