Design 101: design elements, part 2 Typography

Previously I wrote about the importance of design in libraries, the design process and discussed three core elements of design: color, composition, and size. In this post, I’d like to focus on typography. Though not traditionally a design element, typography is more a tool or a language to use within your design to convey the message you are trying to achieve.

As mentioned previously, design elements work together to create a successful design that communicates to your audience if used well, and typography is no exception.

Type is rather complex and has a rich history. There are abundant options available with free and for-a-fee font files available. There are even resources available to have beautifully designed type on your website. Designers still create typefaces from scratch if needed, particularly for decorative uses. But it is perfectly acceptable to use already available font files and most designers do this. To create thoughtful designs using type well does not have to be difficult; with some basic knowledge, you can successfully choose the right type for the job and develop a successful design.

About fonts versus typefaces

As you work in design, it’s good practice to use the correct terminology. When most people talk about letterforms, they use the term, “fonts.” However what most people really mean is “typeface.” Fonts are really the format in which the typeface is available- librarians can understand this distinction easily. As Ellen Lupton states in Thinking With Type, “A typeface is the design of the letterforms; a font is the delivery mechanism…In digital systems, the typeface is the visual design, while the font is the software that allows you to install, access, and output the design.” Lupton’s book is a resource I highly recommend by the way. If you read nothing else about design and type, please read her book. I’ve provided the citation toward the end of the post.

Typography versus design

Typography within design should never be an afterthought. In fact, in many cases the typeface you choose can make or break a design. Every design should be a fluid creation, balancing between the various design elements and type. A designs are being created, it is best to bring the elements up together, tweaking and adjusting each piece as you go while also taking that step back to see the whole picture. As in writing, it can be more beneficial to keep the overall theme and outline in mind as you work on various details and sections of a piece; being too focused in on one small detail may be detrimental to the overall design piece.

Basics

There is a lot to learn and geek out over design and typography but rather than overwhelm, I’m going to give some good basics about type that will get you started right away. There are several main type classifications and the main three groupings are humanist, transitional, and modern or geometric.

Ellen Lupton defines each as the following: “Humanist letterforms are closely connected to calligraphy and the movement of the hand. Transitional and modern typefaces are more abstract and less organic.”

For the purpose of this post and for what you really need to know, I’m going to lump them into four categories based on the look of the typeface: Serif, Slab Serif, Sans Serif, and Decorative. There are examples of each one below.

Serif

Serif typefaces essentially have feet. Serif typefaces are essentially more organic and derive from various periods in history. You see these typefaces traditionally used in novels and blocks of text. Their use is not limited to that, however. There are many new Serif typefaces being developed that are contemporary based on their more historic predecessors.

Baskerville
Baskerville
Garamond
Garamond
Typographic Anatomy Lesson print: http://www.ligatureloopandstem.com/product/lesson-plan-print

Slab Serif
Slab Serif typefaces also have feet but their feet are blockier and slab-like, hence the name. These typefaces were developed for advertising and are more contemporary than traditional Serifs. These are used in a variety of ways but are popular for titles, posters, flyers, websites, and logos.

Museo Slab
Museo Slab
archer
Archer from the H&FJ foundry: http://www.typography.com/fonts/font_overview.php?productLineID=100033&path=head

Sans serif

As the name implies, these typefaces do not have Serifs or “feet”. They are generally more contemporary and less organic than Serif typefaces. These are very popular for text within websites, logos, and posters.

Helvetica
Helvetica
Gill Sans
Gill Sans
Keep Calm by K-Type: http://www.k-type.com/?p=2199

Decorative
Decorative or ornamental typefaces are self explanatory. These are typefaces that can stand alone as an image or illustration. They are highly decorative and should be used very carefully as they can overpower a design or clash more easily with other elements. Not all decorative typefaces are equal and many designers who are really good with decorative type do the lettering by hand and specialize in this area specifically. When done well and with skill, decorative typefaces are a true art form and when done poorly, they can quickly highlight an amateurish design. Decorative type is gaining in popularity as people, designers and non-designers alike, are embracing retro styles again and these typefaces are seeing a resurgence in use.

Rosewood STD
Rosewood STD
Decorative type from Louise Fili
Decorative type from Louise Fili: http://www.louisefili.com/

 

Bold, Italic, Underlined, Caps, and, and, and….

There is nothing wrong with using these elements. However it’s a good rule of thumb to use them sparingly and not all at once. By using them judiciously, they will have more impact and continue to maintain readability, which is key to design. Use them with caution.

Use

As you design and use type, be aware of what your type may be conveying to your audience and the medium in which you are designing in. Some typefaces are more successful on screen than others and some typefaces are specifically designed for print, screen, etc. A good resource for typefaces on the web is the 3rd edition of The Web Style Guide. There is a section specifically on typography that is helpful and gives insite into where typefaces are today.

Like all design elements and design in general, you are communicating with others. What is the type you are using saying? Does it fit with the message you want to send? Are you going for a modern and sleek look? Do you want to give your design a tactile/print feel or maybe you want it to be an homage to a specific period in design history? How does the typeface fit in with the rest of your design? What kind of mood might you be setting with the type and design elements you’ve put together? Type has a personality so be sure to choose a typeface that assists and hopefully conveys the message you want to give.

The end

At this point, you have the type basics and I hope that this gets you thinking more about the typefaces you see and perhaps use in your designs. I highly encourage reading Ellen Lupton’s book, Thinking With Type: a critical guide for designers, writers, editors, and students. She goes over a good deal of design basics and some design history and it’s a quick, enjoyable, informative read.

A couple of other good resources are: The FontFeed and The Elements of Typographic Style.

The best way to learn type and design is to just start. Things change so quickly and what was once right can become wrong or out of style very quickly. In design, you learn much more quickly by designing and making work. So pick a project and begin!