> Introduction to the Art of Typography: The Invisible Force of Design > Using Typography as a Creative Tool: Introducing Text as Art

Transcription

1 MMA 100 Foundations of Digital Graphic Design Clare Ultimo > Introduction to the Art of Typography: The Invisible Force of Design > Using Typography as a Creative Tool: Introducing Text as Art

2

3 Typography is a complex design communication system. If you are not a typomaniac (as many graphic designers are) you can still learn some fundamental ways to make the words you work with on a page speak for your design. Typography is such a common communication tool in everyday life, we often completely forget it exists. But without it, you might not know what s in your cereal box, or what exit to get off of on the highway! Route 22 West

4 Some people do nothing except design letters all day! Some designers even spend their entire careers creating font styles! An example of this is James Montalbano, who has created custom font families for magazines such as Vogue as well as a signage system for the U.S. Highways. This article in the NY Times about James and his partner on this project, explains the kind of testing that went on to create the "Clearview" font, now used in several states as highway signage.

5 A (very) brief history of the Alphabet: Alphabets are old! Over 3000 years ago, Sumerians drew cuniform to keep accounts of things bought and sold and created what we have come to think of as the first alphabet. By the 5th Century BC, the Greek alphabet was in existence, consisting of 24 signs or letters. The Greeks brought this alphabet to the Etruscans of Italy and it is thought to be the basis of the Roman alphabet we have come to use today. By the Third Century, the Romans were carving inscriptions onto their monuments and the "serif" form became a letter standard.

6 There are three fundamental Type Styles: BSerif BSans Serif BDecorative

7 Serif: The little "feet"on serif fonts help make readibility between lines easier. Most newspaper, books and magazines still use this type of font. Within most Serif fonts is a typeface called "Roman". (It gets this name from where it came from.) Inside each type family, Roman refers to the upright form of the font, not the oblique form, which we call "italic". Bb Bb Bauer Bodoni Roman Bauer Bodoni Italic A modern variation of the Serif font is the Slab Serif.

8 The Slab Serif: This kind of serif font that has a very unique kind of foot giving the edges a square sort of look. Bb Rockwell Roman BbLubalin Graph Bold Herb Lubalin was a widely celebrated font designer and one of the first ever in our time. He designed his Lubalin Graph with Slab Serifs, but notice that the shape of the lower case b is much more rounded than Rockwell. He was an innovator during the 60s and helped make round, circular shapes in fonts the latest thing.

9 Sans Serif Sans Serif means just that... without serifs or "little feet" at the top and bottom of the forms. BbHelvetica Neue Roman Sans Serif fonts, as we know them today, began to appear with the advent of the Industrial Revolution, at the beginning of the 19th Century. With printing presses all over Europe, advertisers wanted to get the attention of potential customers by using bold, attention-getting fonts. Because they are a more recent historic developement of typography, we have come to think of them as more "modern" than serif fonts.

10 There are two kinds of Decorative Fonts: BNovelty BScript

11 Script fonts Script fonts are meant to look like they were made by a pen by hand, and were originally drawn by calligraphers (who are now rare but still around!) They are often used in formal settings such as wedding invitations. Bb Snell Roundhand You are cordially invited to attend... Contemporary script fonts convey anything that might be seen as personal or hand-made. Pablo Picasso s handwriting made into a font. Bb Pablo Imade this just for you...

12 Novelty fonts Decorative fonts that are created with a specific concept or even time-periods in mind are called novelty fonts. They aren't made to really be read easily at small sizes or when you've got to show a lot of text on the page. Arnold Bocklin is considered an Art Nouveau font, as it expresses the fluid style of many fonts created during this time. Parisian references the Art Deco period. BbArnold Bocklin Bb Parisian Crackhouse is a concept font, created in the 90s by a group of font designers known as House Industries. All their fonts ended in the word house. Bb Crackhouse

13 Novelty fonts continued Many novelty fonts don't have lower case letters or extended forms of the font, such as italics or bold, which is why they are best as headline fonts. ABCDEFGHIJKLMNOPQRST UVWXYZ Bonkers Bonkers could make an attentiongrabbing headline... GREAT STUFF! But maybe wouldn t be so inviting to read if we used it for a large block of small text. Typography is a complex communication system. If you are not a typomaniac (as many graphic designers are) you can still learn some fundamental ways to make the words you design on a page speak to help convey the message you are trying to get across. Typography is such a powerful tool in everyday life, we often completely forget it exists. But without it, you might not know what s in your cereal box, or what exit to get off of on the highway! Alphabets are old! Over 3000 years ago, Sumerians drew cuneform to keep accounts of things bought and sold with (probably) the first alphabet. By the 5th Century BC, the Greek alphabet was in existence, consisting of 24 signs or letters.

14 Font Families Font families generally come in several weights: Roman, Italic, Bold and Bold Italic. Roman> This is the upright version of the font which is not bold. Sans Serif Serif Bb Bb Italic>This is an oblique version of the Roman font. It looks more cursive and is often used by nonprofessionals as a substitute for a script font. It is used to place emphasis on a word. Stay away from using italics as the basic font for a lot of text on a page, even if you think it looks more "friendly". It isn't easy to read in bulk! Bb Bb

15 Font Families continued... Bold>This is a thicker version of the Roman font, and can come in many varying weights, from Extra Bold to Heavy. Bold fonts are also used for emphasis in text and often as a headline font. Sans Serif Serif Bb Bb Bold Italic> This combines the bold quality with the oblique quality and is often used to emphasize a word within a sentence that is already using the bold font. Bb Bb

16 Typography Classics There are literally hundreds of thousands of fonts to choose from. Fonts go in and out of style but classic fonts like those below, can always find a interesting and innovative use somewhere in our world. Many corporations adhere to only using one or two fonts for all their company literature. Limiting font style creates a consistent look that is useful for any organization. BbBauer Bodoni BbTimes Roman BbHelvetica Bb Gill Sans

17 Where s the big difference? Designers see the differences between fonts that some people would say were the same. Just because you can see a font is a sans-serif doesn t mean it isn t very different from other sans-serif fonts. The quickest way to show inexperience with typography is not to be able to see the differences between typefaces. Both of these sans-serif fonts are the exact same size, yet the lower case letters of Helvetica are larger than those of Gill Sans. Also notice the a s and the i s in both cases and note the difference. Helvetica Gill Sans

18 More big differences... Both of these fonts are serif fonts, but once you look closely you can see that the Bodoni serifs are less cursive than the ones on Sabon. Different kinds of fonts behave very differently as body text, since fonts are also designed to have their own letterspacing (kerning) and line spacing (leading). Bauer Bodoni Sabon

19 Type Particulars Bookmakers of the 19th century began to set out some standards for typography that are still used in print media today. These can be particularly specified and help designers measure how type will fit and look on a page: Kerning is the amount of space between each letter. Leading is the amount of space between each line of text. like the space between this line and the line above it. It comes from an old newspaper technology when type Leading is the amount of space between lines of text. was set in metal strips and spacing between the lines was achieved by adding more lead strips.

20 Kerning and Leading in New Technologies The technologies that drive the internet have limited capacities that can t inform particular letter or line spacing. Since kerning and leading are built in to a font when it is created, only the simplest defaults of these properties can be used. Pages don t always hit the end-user the way you made them. And this certainly applies to the text on the page as well. Once you understand the restrictions of using text on your webpage, you will be able to control the look of your pages more accurately. If you come to internet design with a fundamental knowledge of text, your work will stand out from the rest.

21

22

23

24 A great use of Decorative Fonts is when the font helps to carry the message of the words to the viewer: The Fun SPot ORIGINAL records

25 <Review> Alphabets have developed over time, and technologies have changed the way type is used and reproduced. There are three main categories of type: Serif, Sans Serif and Decorative. Script and Novelty fonts are considered Decorative, so don t use them carelessly, in whatever medium you are designing in! Fonts have a voice purely because of the way they look. They go in and out of fashion, like anything else in our world. Knowing the basics is great for all designers, but type design for the internet has limitations you must learn to work within and make the most of. Good designers turn all limitations into opportunities.

26 > Practical Typography: The Digital Font Experience How to Manage Fonts on Your Computer > How to find fonts to download from the Internet

27 The Way Fonts Work on a Computer Fonts have to be loaded into the computer you are working in in order to be seen and in order to print out or to show up on screens.

28 The Way Fonts Work on a Computer How do you know what fonts are loaded into your computer? 1. In any program, the fonts that come up when you use a type tool are the fonts that are loaded into your computer

29 The Way Fonts Work on a Computer How do you know what fonts are loaded into your computer? 2. In the Systems Information folder, you can find that list under FONTS on the left.

30 The Way Fonts Work on a Computer How do you know what fonts are loaded into your computer? Apple comes with a built in Font Management system called FontBook.

31 Looking at FontBook Notice what fonts are open and which are not Something like FontBook, or any Font Management System will tell you if you have duplicate fonts and fix that so your computer doesn t get confused! If you had your own font folder, you could import a font from that folder into FontBook Opening a font and using it are different from having the font on your computer, or even putting it in FontBook

32 Some fonts are built into your computer These are the most common built-in fonts, Mac and PC:

33 What happens when a font is not loaded in to your computer and the document you are using requires that font? If you sent this doc out to be printed, and you did not give the printer the font, it would also print out like this.

34 There are loads of Font Management Systems out there that many companies purchase to manage their font systems...

35 Find Fonts on the Internet FREE FONTS NOT FREE Or...you can make your own font with... Font Lab Studio FontCreator Fontographer FontForge FontStruct Make a font from your own handwriting...

36 Typography for Beginners