Welcome to our free Typography tutorial. This tutorial is based on Webucator's Typography course.
Although each designer will put their unique creativity into a project, there are proper base rules that you should use in order to ensure readability and clarity of message.
Be aware of the scope and audience of the project. For example, if we are presenting only text on a website, then we must limit our fonts for body paragraphs to fonts that would be available to browsers based on available technology. If we are building a design for a roadside billboard, then we need to think of using scalable fonts that will catch the eye and be very readable at a quick glance. Website layout shown above.
Each industry and discipline holds their own style traditions. By doing a bit of research on the Internet, you can determine what has already been done, what has been done right, and what new directions you may take those traditions, therefore, coming up with your own perfect layout. Please keep in mind copyright rules; just because we see a design/art element that we like, we cannot just "pluck" it out of the existing site and use it as our own. Use this research time to be inspired and build your own design/art elements making your project unique and not breaking copyright laws.
General search for a specific industry. Source: http://www.google.com
There are many sites to view other designers' work that they share with the public and design community. If you do not yet have a clear vision of what your project may turn out to be, you may want to spend some time looking at these type of sites to see what other designers are creating.
Many of these sites may offer more that just a look at the art side; they often share tips, advice, and code snips that they encourage you to take and make your own.
Inspirational design site where designers share ideas! Source: http://www.siteinspire.com/
The spacing and alignment of the text can impact the readability just as much as the typeface. When faced with a text heavy layout, often multiple columns can make the paragraphs more inviting to read.
Text in a single column.
Text in two columns.
Use good judgement in placing the proper typeface. Each typeface and font has an emotion associated. Please be aware that each person, audience, and culture may have a different notion of what that feeling is. Because of this, it is very important to always keep the scope of project and audience type in mind.
This image shows the phrase "Logo" using six different fonts, all 72 pt in size. Each one has a different vibe that it conveys. Take a look and think about what "feeling" each one gives you.
Having a good sense of white space (empty space void of content, not necessarily tied to a color) is helpful when analyzing the text layout of a project.
There are a few traditional layouts that have stood the test of time and are still relevant today. There are many layout philosophies available; here are just a few.
Static layouts are great for the print world where the designer is in control of exact placement of all objects down to the point. In the bulk of our onscreen experiences, however, we do not have complete control. Dynamic layouts are flexible and grow and shrink with the amount of data that is pulled into the layout. Dynamic layouts are the perfect option when we are faced with variables such a screen size, resolution, data-driven content, and accessibility adjustments.
Dynamic layouts can be a challenge to create, not only because of all of the variables, but also because we are incorporating code-driven technologies that will vary based on user preferences, software/hardware versions and design skills of the programmer. Although challenging to generate, they are well worth the trouble as they bring versatility to the site in which they reside.
Typography rules have been established to help set standards based on years of traditions. There is a saying "to think outside of the box," meaning to try to break free of traditional rules of thought. As new technologies that include text content arise, so do new rules and the need to push the boundaries of the existing rules. We need to "create out of the box" and push those boundaries. Current "safe" rules that still apply and should always be the basis of rules you rewrite are as follows:
Once you have a good understanding of the beginning basics, then it is time to be creative and push your designs beyond the rules. Please make sure you always follow the core fundamentals that underlie every good design.
The presentation that follows will talk more about how to ignore the rules.
In this exercise, you will apply the new rules you just learned, and also add a touch of your own creativity as well! Build a typography plan for three case studies listed below. Read each case study and fill out the form below answering questions for each case.
Round Rings Inc. is a wholesale company providing class rings for schools.
You have received a request from an existing daycare facility named ABC Childcare. They are interested in promoting to gain new clients and keep existing clients as well. They have mini trips throughout the year that encourage education. Their needs are a public-facing website and a set of marketing materials (brochure, business cards, billing forms). They already have a logo to work with and have sent you a copy (located below). Build a color scheme that will help this client.
You have received a request from a new high-end women's clothing store that specializes in vintage clothing. They will have a store front that will also need a look and feel. They have requested store front decor, public website, and business cards. They have provided their logo.
Questions: You may write this out or use a tool such as a word processor. (See sample form in Microsoft Word rules-for-typography\Exercises\PlanFile.docx
See scanned samples below for inspiration.
Case #1: Round Rings Inc.
Case #2: ABC Childcare
Case #3: Lovely Lace