CM1-TypographyAndLayout1.pdf

Course Material No. 1 Typography and Layout 1 Carlito O. Loyola Jr. BMMA Instructor  Introduction to Typography 1 LESSON OUTLINE LEARNIN...

Course Material No. 1 Typography and Layout 1 Carlito O. Loyola Jr. BMMA Instructor  Introduction to Typography 1 LESSON OUTLINE LEARNING OUTCOMES Definition of Typography Here’s what I will teach you in this course Roles of typography in graphics material: design To determine the importance of Importance of typography in typography in graphic communication graphic design design Bad typography To identify roles of typography in Lorem Ipsum history graphic design To explore various idea that can be used in creating effective graphic design. To identify the reason why Lorem Ipsum used as placeholder in graphic design. RESOURCES NEEDED For this lesson, you would need the following resources: PowerPoint presentation for Week1 troduction to ultimedia Arts 2 TABLE OF CONTENTS 4 Pre-Test Before you start, try answering the following questions. 5 Definition: Typography 1. Explain the term typography? _________________________________________ Typography and 2. What are the importance of using appropriate 6 Communication Design typography in graphic design? ________________________________________ 7 Importance of Typography 3. What are the roles of typography in graphic design? ________________________________________ 4. Why Lorem Ipsum is used as place holder in graphic 12 Lorem Ipsum design? for your is it necessary or not? Explain. ________________________________________ 15 Summary and key Terms 16 Post-Test 17 References 3  Introduction to Typography Typography is the visual component of the written word. A text is a sequence of words. A text stays the same no matter how it’s rendered. Consider the sentence “I like pizza.” I can print that text on a piece of paper, or read it aloud, or save it in a file on my laptop. It’ll be the same text, just rendered different ways—visually, audibly, digitally. But when “I like pizza” is printed, typography gets involved. All visually displayed text involves typography—whether it’s on paper, a computer screen, or a billboard. Is typography an art? That’s like asking if photography is an art. Some photographers and typographers use techniques that raise their work to the level of art. But at their core, both photography and typography have a utilitarian function. The aesthetic component is separate. Being an effective typographer is more about good skills than good taste. And you can learn the skills. Before we start, let’s have some assessment: What’s the difference between these two signs: the text or the typography? 4 I Definition: typography You wouldn’t use Comic Sans if you expect to be taken seriously, and you heard somewhere Arial is supposed to be a “safe” choice, for some reason. Knowing how to use typography for business advantage, is partly why web designers, graphic designers and web copywriters have jobs. Typography, put simply, is how words look in digital or printed media: How words are placed and arranged in relation to the rest of the text and any other content elements, such as the user interface, colour, images or video. Choice and placement of text isn’t just to create a nice- looking, usable, readable style. The different typographical elements — including typeface, font, leading, kerning — all work together to help produce effective content and graphic design. “Typography is all about organizing shapes. Letters are shapes. Words are collections of shapes. Paragraphs are larger collections of shapes, and so on. “Good” typography organizes those shapes in such a way that they do what they’re intended to do — communicate language — with the least amount of interference. “Great” typography goes one step further, evoking a feeling to enhance the meaning of the text. - Kjell Reigstad (a Boston-based Graphic Designer) Good typography creates a typographical identity, working on both a conscious and subconscious level to strengthen the brand, user experience and messaging. Bad typography calls attention to itself — reflecting badly on the brand, providing a poor user experience, and reducing the impact of a message or call to action. People associate the way a word looks — in other words, it’s visual context — with what they think it says, and what they feel about it. Typographical elements directly influence how consumers think and feel. Typography can help you do three main things: Represent the brand, with a style that fits with and reinforces the brand voice and identity. Communicate the message, including ensuring words are quickly or easily read and understood. Provide visual appeal, retaining viewer interest and inspiring action. 5 II Typography and Communication Design You can’t design a typeface, or lay out a paragraph, just by applying geometry rules. It will likely produce a bland result. It is when you start balancing those geometric shapes with your eyeball, that you will be able to have perfect kerning and hinting this is a manual process that still needs to be learned by experience and by trying different combinations. Try to use typeface from well-known foundries. They did the heavy lifting for you — just use the typeface they meticulously designed over the years. It doesn’t matter if a font is “new,” or designed 50 years ago. Learn the history of the typeface you love before using it. A typeface is designed for a specific purpose, not just for art’s sake, so be careful to maintain the same purpose. For example, the next time you want to use an Archer font for a dentist’s business card because it’s cool, just consider it was originally designed for Martha Stewart Living magazine, and ask yourself if it belongs to the same “territory.” Once you understand the concepts of communication hierarchy, how fonts play off each other, and the personality of your client’s brand, effective typography is much easier to execute. Say you have a five-word headline. Distill it down to the one or two words that are most essential to the message. Those should get the most love with font weight, style and let lower hierarchy words play a supporting role in a complimentary font. Don’t be trapped by neat alignment. Play with varying justification and placement. Let the words hug each other. The final result should feel locked up. Always remember that in graphics communication design: 1. Typography is branding. The choice and structure of the typeface, the way it’s set, the balance on the page, is of incredible importance to reaffirm and communicate with 6  the reader. It might be seen as a subtlety, but in my opinion a distinctive type set that reinforces the brand can be so strong that it won’t need anything else. 2. Typography is structure. Typography isn’t just the typeface, is the way the whole page is set as well as how every written element on the page works together. Taking care of size, line height, spacing and so on is a huge deal, and unfortunately these small tweaks that can have a huge impact are overlooked by letting the defaults stay unchanged. You can do amazing things with a seemingly boring typeface, and you can do horrible things with an exciting typeface. Successful typography comes from using the font well, not just choosing the font well. Importance of III Typography When someone visits your graphics design, they don't care much about the graphics, they just go through the textual content. This is because, texts are the major sources of information. So while creating a content for your graphic you should take care of balancing the graphics and text. This is where typography comes into play Typography is all about adjusting the text within the design while creating powerful content. It provides attractive appearance and preserves the aesthetic value of your content. It plays a vital role in setting the overall tone of your graphic design, and ensures a great communication medium. Here are the reasons why: 1. It is a medium of communication: A design may be related to a business or art or some specific product. When you look at the design, you can easily determine what sort of information it provides. This is due to the use of typography. The arrangement of the contents, the colors and font used and 7  other minute details provide a way of communication between the audience and the graphic design it-self. 2. It attracts the audience: The basic approach of using typography is selecting the correct font. The font should be as clean as possible. It shouldn't be too small and crummy. Using fonts that are easy to read are key to presentation. The fonts add value to your text. It helps readers to perceive information from the text. The correct choice of color, font and text size can prove to be vital for attracting your target audience. 3. It holds the audience's attention: It's easy to attract the readers using typography but holding their attention requires more creativity. You can work on creating some interest within the content by highlighting texts that are captivating. Every content may contain some mundane text. If used effectively, typography can make them look attractive. The correct approach might be the use of some attractive graphics. 4. It conveys a certain mood or feeling: A content might be an advertisement of a computer game. It might contain some exciting features of the game. In such case, you should design the content that is fun, playful and glamorous. If your content requires some seriousness, you should choose fonts that are simple, plain and professional. The choice of such typeface determines how the content is understood. 8  5. It establishes an information hierarchy: Information hierarchy means categorizing the texts inside a content according to their importance. You can use different font types and sizes to differentiate the texts that are most important. You can highlight the important topics by using bigger font sizes. This will help the audience to easily determine the information that they should pay more attention to. 6. It helps to create harmony: If you design a typography and repeat the same pattern throughout your presentation, then it creates a harmony. Harmony is the leading feature in typography design. Harmonic design provides an artistic effect to your graphic design. Using same font for similar contents provides continuity. The alignment of fonts with correct proportion organizes your presentation and makes it uncluttered. 7. It reflects professionalism: The correct addition of typography in a design project reflects great professionalism. Appropriate use of text font and size gains the trust of audience. This will add benefit to the marketing of your product if your graphic design is based on business. The professional approach of design includes typography at its core. Typography defines the importance of content you provide and customer feel secure regarding the information they gain. 8. It creates and builds recognition: If you follow a pattern on using fonts and present your site with some rhythm, it adds a great value to your company brand. The audience always remembers the fonts that you use in presenting the visuals. Typography specializes your company and it works as an identification for the viewers. With the help of typography each of your content gains your company's presence. 9 As good type makes the graphic design maximize its effectivity, it could also be a reason for the graphic design to bite the dust and when translated to business is a tragic loss or a damaged reputation. Mastering this art makes one step ahead in the field of graphic design as it also affects our psyche, how we unconsciously receive a material (as proven by research) and our physical health (talk about how bad typography causes eye fatigue and eye strain). Typography is expected to be one of the trends in 2021. We will be seeing a lot of this art as typography is considered one solid brick or a crucial piece to be supplemented in creating one effective material or graphic design. Example: Usage of Gotham Fonts in Typography: Another example of typography is the usage of the Gotham font free, which is so far one of the most famous fonts in the world. It was first designed by Tobias Frere-Jones for the Hoefler & Co. The Gotham font contains four widths, eight widths, and various different designs for various places. It was developed for professional use, and has been used in a lot of notable places, including Barack Obama's 2008 presidential campaign, Michigan State University branding, and the 2016 federal election campaign of the Australian Labor Party. It has been used a lot to preserve the New York’s old designs that were feared to be lost in the arrival of new fonts and designs. This font has been described as fresh, crisp, masculine, and formal. Using such a typography in professional graphics have been very notable and appreciated by the viewers. Many variations have been said to be made in this font, however, its signature design still remains popular in the professional world. 10 How to Avoid the Bad and the Ugly of Typography You’ve seen examples of great typography. Now it’s time to look at a few examples of what to avoid. Have you ever looked at a piece of graphic design and couldn’t even read what was written? Or maybe, a visual element or two got on your nerves because the spacing was so bad. Perhaps the entire thing was an overall confusing mess. If you don’t feel like giving readers a headache, here are a few quick tips: Don’t try to stuff a lot of information at once. If you have more than one point to make, use the hierarchy technique to organize your ideas. Avoid using too many different fonts. Keep your choices to a maximum of three fonts, but if you can use only two, that’s even better. This prevents reader confusion. Keep an eye on spacing and justification. If the spacing (kerning) between fonts doesn’t look harmonious, start again. For many people, bad kerning could go unnoticed, but for designers and observant people, it can be distressing. Yes, typography is far more complicated than most people would imagine. It’s an art, one that may take years to master. But when done well, it creates brands, it grabs attention, and it conveys important messages in an artistic and unique way. 11 IV Lorem Ipsum If you've at least used some form of writing or web content management software, there is a chance you encountered the Lorem Ipsum text. But to those who don’t know what Lorem Ipsum is, it may just be a nonsensical clump of Latin words. If you dig a little deeper and do some research on Lorem Ipsum, you’ll discover the incredible history behind it. Let’s take a quick look at its history, fun facts, uses, and its alternatives. What Is Lorem Ipsum? If you've at least used some form of writing or web content management software, there is a chance you encountered the Lorem Ipsum text. But to those who don't know what Lorem Ipsum is, it may just be a nonsensical clump of Latin words. If you dig a little deeper and do some research on Lorem Ipsum, you’ll discover the incredible history behind it. Let’s take a quick look at its history, fun facts, uses, and its alternatives. A brief history of Lorem Ipsum The term Lorem Ipsum is derived from the Latin term Dolorem Ipsum which means "pain itself. " The text has been in use for a very long time and its history spans for over two millennia. But how did the great works of Cicero ultimately become a filler text? According to McClintock, it may have just been a happy coincidence. He theorized that a typesetter, who was required to make a type specimen book, used the text as a way to demonstrate different fonts. And seeing as the text should be insensible so as not to distract from the graphical features, the typesetter scrambled the words. With Cicero's work as one of the most published works during that time, the typesetter would most likely have used an excerpt from Cicero's books. Due to this strange coincidence, the garbled words of a legendary rhetorician has survived for over four century. 12 Modern-day usage of Lorem Ipsum Now that we're done discussing the history of Lorem Ipsum, let's take a look at its utility and find out how versatile it can be. Lorem Ipsum as a content filler. Whether you’re writing a short article for your blog or creating an infographic for content marketing, Lorem Ipsum fills the spaces until you can replace it with actual content. Lorem Ipsum to minimize distractions of draft copy The Lorem Ipsum text is not only there as a placeholder. You can also use it to keep you focused on the draft copy. Why do you think the typesetter intentionally garbled Cicero's work? He probably did it to avoid distraction. So whether you're designing a website or making infographics in the classroom, the lack of coherence in the Lorem Ipsum text will help you focus on your work. Lorem Ipsum helps you efficiently set up your fonts The Lorem Ipsum text is also an effective way to set up your fonts before you place your content. For example, you’re writing content for your website, and you want your website to have a specific font, length, and design. Adding the Lorem Ipsum text allows you to efficiently set up the specifics of your font before you place your content. There are Lorem Ipsum alternatives that you can use. The Lorem Ipsum text has long been a staple dummy text for most people. And even though the Lorem Ipsum text is a satisfactory one, it doesn’t hurt if you try out other dummy texts. Here are some excellent examples of alternative dummy texts. These are: Not Lorem Ipsum; Fillerati; Picksum Ipsum; Zombie Ipsum; Gangsta Lorem Ipsum; Fillerama; Nietzsche Ipsum; Batman Ipsum; Delorean Ipsum; Rick and Morty Ipsum. 13 Is it bad practice to use Lorem Ipsum? These days, the question of Lorem Ipsum's relevance is often brought up. Proponents of not using Lorem Ipsum suggest that there is no longer a need to use placeholder text at all. For them, using Lorem Ipsum will only confuse stakeholders and the creative team. In “Lorem Ipsum Is a Crime,” Jesse Day states that: "placeholder copy is a crutch that lets you put off solving the real problem in hopes that a writer will fix it for you later." Using Lorem Ipsum texts is also a pain for visual designers because they can't predict whether or not the design will break when translated to another language. The same could also be said for content designers because they’re unsure about the actual space they're working with. 14  Summary When it comes to creating brochures, flyers, logos, apps, web pages, or any graphic design element, it V needs to be eye-catching and well put-together. Otherwise, people won’t bother to look at it, let alone try to learn more about your brand. That makes typography the heart of quality graphic design. The brands you know and love have all developed their logos and marketing campaigns over the years, all of which follow a well-studied pattern of typefaces, colors, and texts, becoming the memorable references they are today. In addition, typography is often overlooked, but it’s a crucial component of user communication design. Mastering typography will see you well on your way to becoming a fantastic graphic designer! If you’re not sure where to start, why not head to your favorite designs and start making a note of what typefaces they’ve gone for. KEY TERMS Typography Lorem Ipsum Communication Design Graphic Design Branding Harmony Structural 15  Post-Test VI Instructions: Part 1: Answer the following questions: 1. How can the appropriate use of fonts enhance the design? 2. What do you understand by expressive typography? Explain with examples prepared by you. 3. While designing an advertisement for kid’s apparel brand, what kind of fonts will you choose and why? Part 2: Choose any two words and in two different compositions arrange each word to express its meaning (one word per composition). Do not use any graphics or images. Your design should be on 6 x 6 inches in black and white. 16  References VII Paudyal, N (2016). 8 Reason why typography is Important. Verizon Media Inc. RedAlkemi (2020). The impact of Typography in Graphic Design. https://www.redalkemi.com/blog/post/the-impact-of-typography-on-graphic-design Tamboc, K (2019). What is Lorem Ipsum? (History, Fun Fact, and Alternatives). Learn hub. Webcopy (2019). What is typography and why is it so important. https://blog.webcopyplus.com/2017/04/26/what-is-typography-and-why-is-it-so-important/. Vancouver, BC, Canada. 17