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

Similar documents
TYPOGRAPHY. ascender arm (as on the capital T) descender bar (as on the capital H) counter ear (as on the lower case g and r)

understanding typography

TYPOGRAPHY. The art of type

section four typography contents introduction...44 helvetica neue...45 bodoni...46 examples of type usage...47 body text examples...

In your lifetime you ve seen billions of letters and millions of words, yet you might never have consciously noticed the typefaces you read.

Pre-Venetian or Ancient Humanist or Venetian Transitional Didone Slab Serifs

VOICE OF TYPE LECTURE 1

TYPE ANATOMY jtittle

How Typography Determines Readability: Serif vs. Sans Serif, and How To Combine Fonts.

Font classification review

fonts Some famous (and infamous) fonts

A Crash Course in Typography: Principles for Combining Typefaces - noupe

OCA Graphic Design: Core Concepts 1 Assignment 5 - Penguin Books Jane Braybrook Jane511794

What is Accessibility?

MODULE CM 2004 / STAGE 2 / SEMESTER 2 / SESSION Module title Design Principles and Context

RICH ENTERPRISES. Small Business Series. Getting Started with HTML

Typography One typeface classification

Unit 4. Multimedia Element: Text. Introduction to Multimedia Semester 2

Font, Typeface, Typeface Family. Selected Typographical Variables

Introduction A global icon needs an iconic logo. Fashion has evolved since 1969, when Gap opened its first store. Our logo has changed with the

Principles of Typography

Typography in Design The principles of design describe the ways that artists use the elements of art in a work of art.

TEXT MEDIA AND INFORMATION

PLANNING. CAEL Networked Worlds WEEK 2

Template Tidbits. Q How do I get the places I can enter copy to show up? (Highlight Fields Bar)

Wissenschaftliche Poster-Präsentation

Typesetting Tips. Put your best type forward.

Designing Research Posters. College of Art and Design Chris Jackson, Associate Dean Keli DiRisio, Assistant Professor

LESSON 7 Introduction to Typography

OCA Graphic Design: Core Concepts 1 Assignment 4 - Show Me Jane Braybrook Jane511794

ADVERTISEMENTS SUBMISSION GUIDELINES

ADVERTISEMENTS PAYMENT OPTIONS DEADLINES. Harvard Yearbook Publications Class of 2018 Parent Ads. JOHN HARVARD Full Page Ad (8x11 )...

Putting type on a page without incorporating typographic principles is merely word processing. Terry Rydberg, Author Exploring InDesign 3

jasonjuwono twentyfifteen TYPEDIA _ Typography Encyclopedia

logo 101 A solid logo design intake ensures that no time is wasted, and that you receive targeted logo options as soon as possible. Getting results.

art 118: intro to communication design // FALL 2011

Unit 3--Alignment, Formatting Font--Size, Color, Style [Bold, Italic, and Underline] Block

Multimedia for the Web: Creating Digital Excitement. Multimedia Element Text

Typography One typeface classification

JABRA CORPORATION GRAPHIC STANDARDS MANUAL

Brand Guidelines Solano County Transit (SolTrans)

2016 All Rights Reserved

Visual Identity Guidelines. Abbreviated for Constituent Leagues

KEEP CALM KERN AND. Some of the do s and don ts of Typography by Fran Pimblett

Everything you always wanted to know about Fonts*

> what is a font? Times New Roman [10 pts] Times New Roman [12 pts] Times New Roman [14 pts] Times New Roman [18 pts] Times New Roman [24 pts]

proj 5 A/B kerning & introduction to the grid

Typefaces are character sets based on distinct design characteristics.

Word processing and spreadsheet applications are among the most

O M. O M logo specs. O M O M O M O M

David Glen Smith. Fonts of Influence

A BRIEF USER MANUAL FOR. Sutro Deluxe. A Chromatic Slab Serif. Five layers to play with.

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

Friendly Fonts for your Design

Using Text in Photoshop

Typography. is the foundation of good web design

Script Lettering For Artists (Lettering, Calligraphy, Typography) By Tommy Thompson

8 Web Design Principles to Use IN ELEARNING DESIGN

EssEntial indesign skills Brought to you By InDesign

GD I // SPRING

User-Centered Website Development: A Human- Computer Interaction Approach

Graphic Design. shawacademy LESSON 5. summarynotes INTRODUCTION TO TYPOGRAPHY. For further questions visit us online at:

THE ORIGINAL HOME IMPROVEMENT SPECIALISTS SM STANDARDS OF USE GUIDELINES

Section 1.1 Definitions and Properties

Style guide.

THINGS YOU NEED TO KNOW

ONE K CREATIVE. tools for social impact storytelling: CREATING A CONSISTENT BRand

Modifying Type: effects of a letter change COLDS

Mount Marty College BRAND BOOK

Graphic Standards 1/28/13

Synopsis This module introduces calligraphy, the basic principles of typography, and applications of typography.

DOWNLOAD PDF ABSOLUTE BEGINNERS GUIDE TO MICROSOFT OFFICE ONENOTE 2003 (ABSOLUTE BEGINNERS GUIDE)

Chapter One Modifying Your Fonts

Producing Marketing Materials

Slide 1. Slide 2. Slide 3. Consistency. Consistency

The same can also be achieved by clicking on Format Character and then selecting an option from the Typeface list box.

In your lifetime you ve seen billions of letters and millions of words, yet you might never have consciously noticed the typefaces you read.

WEB TYPOGRAPHY FOR WEB DEVELOPERS. Matej Latin Lead UX/UI Designer at Autotrader.co.uk

Teach Yourself Microsoft Word Topic 2 Selection and Formatting Techniques

BREE FONT FAMILY UPDATE WHAT HAS CHANGED

FOUNDATION IN GRAPHIC DESIGN. with ADOBE APPLICATIONS

HOW TO PACK A SUITCASE

Typographic hierarchy: How to prioritize information

Brand Manual

LECTURE 4 THE USES OF TEXT IN MULTIMEDIA

Project 2 reminders: Hand in your typed book summary/response at end of class today. Make sure to include your name and section.

Quick Reference Design Guide

TYPE. Design Process

CSS. Text & Font Properties. Copyright DevelopIntelligence LLC

How to Create and Submit a Press Release

Excel Basics Rice Digital Media Commons Guide Written for Microsoft Excel 2010 Windows Edition by Eric Miller

Chapter 1. Getting Started

Baskerville. abcdefghijk For fun I like to jump cars while reading a quote by Albert Einstein.

How to make your neighbourhood newsletter look good

Object-Oriented Thinking

Design Principles. The Four Basic Principles That Underlie Good Page Design

Copyright. For more information, please read the Disclosures and Disclaimers section at the end of this ebook. First PDF Edition, February 2013

History of Typography. (History of Digital Font)

Creating Word Outlines from Compendium on a Mac

Practical Mathematical Handwriting

Transcription:

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

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

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.

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.

There are three fundamental Type Styles: BSerif BSans Serif BDecorative

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.

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.

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.

There are two kinds of Decorative Fonts: BNovelty BScript

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...

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

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.

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

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

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

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

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

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.

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.

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

<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.

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

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.

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

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.

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.

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

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

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.

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

Find Fonts on the Internet FREE FONTS http://www.dafont.com http://www.fontsquirrel.com http://www.urbanfonts.com http://www.fontspace.com NOT FREE http://myfonts.com https://www.fontshop.com http://www.linotype.com https://typekit.com Or...you can make your own font with... Font Lab Studio FontCreator Fontographer FontForge FontStruct Make a font from your own handwriting... http://superdevresources.com/create-font-from-handwriting/

https://www.youtube.com/watch?v=sbyzhoiyfx0 Typography for Beginners