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

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)

TYPE BASICS Cartographic Design & Principles Winter 2016

VOICE OF TYPE LECTURE 1

understanding typography

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

Reading and Typography. Contributions from Bill Cowan, Byron Weber Becker, Michael Terry, and Designing with the Mind in Mind.

Alphabet. elemental visual signs 26 characters frozen sounds

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

> album art. > objective(s): Students will create a album art design for an existing artist's "next" release that utilizes imagery and text

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

Using Text in Photoshop

OUR TYPOGRAPHY APPROVED UNIVERS FONTS. Univers 65 Bold Univers 65 Bold Oblique Univers 75 Black Univers 75 Black Oblique

BRAND. For Internal Use Only Not For Use With The Public. For help and guidance on our brand standards, contact

Font classification review

Principles of Typography

jasonjuwono twentyfifteen TYPEDIA _ Typography Encyclopedia

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

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

Guiding Principles for PowerPoint Presentations

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

TYPE ANATOMY jtittle

5. Text CHAPTER HIGHLIGHTS 10/12/2016 CHAPTER. Text tradition. Codes for computer text. t. Font technologies. Multimedia text.

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

Friendly Fonts for your Design

Text. Text metrics. There are some important metrics that we must consider when working with text. Figure 4-1 shows the basics.

Chapter 12: FORMATTING TEXT

Font, Typeface, Typeface Family. Selected Typographical Variables

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

SCHOOL DISTRICT 308 VISUAL STANDARD GUIDE

Font Basics. Descender. Serif. With strokes on the extremities of the letters. T Script. Sans-Serif. No strokes on the end of the letters

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

LESSON 7 Introduction to Typography

Written Language Production

This file includes FILLABLE FORM FIELDS. Enter your answers and then save the form as a PDF with your name to submit. Ex: 4CChrisJohnson.pdf.

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

LECTURE 4 THE USES OF TEXT IN MULTIMEDIA

Document and Web design has five goals:

Web Site Design and Development Lecture 6

The building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations).

BASIC ABOUT TYPE TYPO GRAPHY

Floats, Grids, and Fonts

What is Accessibility?

Chapter 7 Typography, Style Sheets, and Color. Mrs. Johnson

How to use text. Adding a text frame

fonts Some famous (and infamous) fonts

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2)

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

EnvSci360 Computer and Analytical Cartography

Franklin Gothic. Seniors: Use larger text that is clear and legible. (Souvenir, Times, Garamond, Helvetica)

Typefaces are character sets based on distinct design characteristics.

Elements of typographic design

Typography guidelines

Introduction to Web Tech and Programming

Typographic. Alphabet. Book. Interactive PDF of typographic rules & terms YOU NEED TO KNOW. Home. Table of Contents

Typography/ Layout and Design

Type on the Web: Dos, Don ts and Maybes Ilene Strizver

Adjust the point size

Crimes Against Typography. Shela Vang 13 images Collaborative Partner: Daha Lee 12 images

ASerif. AfbcyE TYPE AND LETTERS

Presented by: Mitch Boretz University of California, Riverside. and Colleen Jolly 24 Hour Company

CSS. Text & Font Properties. Copyright DevelopIntelligence LLC

The 12 most common newsletter design mistakes

H A-Z of DTP Features

Handwriting Standards

Accessible Documents & Presentations. By Amy Maes, DNOM

Multimedia Elements Text and Graphics

Typesetting Tips. Put your best type forward.

Appendix D CSS Properties and Values

TYPO GRA PHY THE ANATOMY OF TYPE A BRIEF HISTORY OF TYPOGRAPHY WHAT IS YOUR TYPE ACTUALLY SAYING? OPEN FONT DISCUSSION

FOUNDATION IN GRAPHIC DESIGN. with ADOBE APPLICATIONS

Introduction to CSS. Fijihosting.com Introduction to CSS page 1. What are style sheets? Lovely! How do I use them?

1 of 7 11/12/2009 9:29 AM

WATER (No kerning) WATER (Automatic Kerning) WATER (Manual Kerning).

Design that Enhances Readability

GO Transit type treatments report

IDM 221. Web Design I. IDM 221: Web Authoring I 1

The Visual Scientist Presents Poster Design

Graphic Design Tips for PowerPoint

Bold, Italic and Underline formatting.

Essentials for Text and Graphic Layout

Lost & FOUNDRY ABCDEFGHIJKLMNOPQR STUVWXYZ #$ % _ '".,:;!? &(){}[]/\* ABCDEF GHIJKLMNOPQRSTUV

Character Formatting. Formatting the Text in Text Frames

INTRODUCTION TO TYPOGRAPHY DESIGN

Responsive Typography

ACSC 231 Internet Technologies

from The Elements of Typographic Style by Robert Bringhurst, page 171

SAMPLE PAGES. Syllabus coverage chart. viii Syllabus coverage chart

Teach Yourself Microsoft Word Topic 2 Selection and Formatting Techniques

Microsoft PowerPoint 2013 Module

Goudy Old Style & Garamond. A Type Comparison Book by Brittany Hansard

Document Design Chunking Similar Information Together

GRAPHIC STANDARDS MANUAL

The first time you open Word

anatomy cap height x-height baseline descender ligature finial terminal ascender spine small capital uppercase counter cross bar lowercase

Central Michigan University. Signage Design Standards. Signage Design Standards. May 16, 2008

a e yp fi Letterform Anatomy Ascender Shoulder Tittle Bowl Crossbar Stem or Main Stroke Terminal Leg Ascent Line Cap Line Mean Line Baseline

CSS: Formatting Text. CSS for text processing: font-family. Robert A. Fulkerson

Accessible Document Guidelines

Understanding PowerPoint s Text Capabilities

C L A S S 2 T Y P O G R A P H Y. FOUNDATIONS OF GRAPHIC DESIGN MW 8 a.m.

Transcription:

> what is a font? > what is a font? A font is set of glyphs (or images) that represent a complete series of alphabetic and numeric characters, punctuations and symbols in a particular size and style (or typeface) which may include boldface, italic or bold italic. Example: Georgia Regular (size 18) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890., ' " ; :?! / - ( ) [ ] < > @ # $ % ^ & * + = Georgia Bold (size 10) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890., ' " ; :?! / - ( ) [ ] < > @ # $ % ^ & * + = Georgia Bold Italic (size 14) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890., ' " ; :?! / - ( ) [ ] < > @ # $ % ^ & * + = > what is a point? All fonts are measured in points, which equal 1/72". So if you typed your name in a (correctly built) font, and set it to 36 points, the letters would be 1/2" tall. Helvetica [10 pts] Helvetica [12 pts] Helvetica [14 pts] Helvetica [18 pts] Helvetica [24 pts] 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]

> categories of fonts > what are the categories of fonts? serif fonts that have counterstrokes, or feet, on the ends of main strokes of letters Times New Roman Garamond sans serif fonts that do not have serifs, or feet, on the ends of main strokes of letters Arial Gill Sans script fonts that resemble hand-written text and can be formal or casual Formal: Script MT Bold Casual: Bradley Hand ITC deco (decorative) fonts that are graphically enhanced for visual impact; should never be used in small sizes (body copy) Jokerman Laconic

> body copy vs. deco fonts > what is body copy? Body copy is informational text comprised of complete sentences, paragraphs or more. It is presented in smaller font sizes. Due to its extended length and smaller point size, body copy always utilizes clean, easily readable fonts such as Arial, Helvetica or Times New Roman. What you are reading right now is body copy text. > how to tell if a font is deco or body copy All fonts work fine in large sizes, but only body copy fonts should be used in small sizes. Also, some deco fonts have serifs while others have only slight graphic enhancement. It can often be hard to tell the difference between deco and body copy fonts. Serif Example: Minion Pro ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 Deco Serif Example: Cooper Black ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 So how do you know the difference? Simply answer this question: "Can I imagine reading an entire novel in this font with ease?" If the answer is no, it is a deco font. Look at the two samples below. Which is easier to read? The bottom font has serifs, but the letters are so thick that it makes it hard to read in such a small size. Body Copy (Times New Roman) Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Deco (Aardvark) Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

> styles and alignment > what are the various type styles? type styles are thicknesses and proportions of characters within a font medium/regular or Roman standard stroke weight values of a font; medium/regular usually associate with sans serif fonts, Roman usually associated with serif fonts oblique/italic canted letters; oblique usually associated with sans serif fonts and is strictly at an angle (such as Arial); italic usually associated with serif fonts and tends to have a cursive quality (such as Times New Roman) bold stroke weight is thicker compared to medium/regular or Roman settings extended letters are wider in comparison to it medium/regular or Roman setting condensed letters are more narrow in comparison to it medium/regular or Roman setting black stroke weight is thicker compared to bold setting > what are the various text alignments? left align- lines of text are flush to the left margin center align- lines of text are centered within the margins with equal residual space on each side of lines right align- lines of text are flush to the right margin left justify- lines of text are flush to both margins except the last line which is left align force justify- all lines of text are flush to both margins LEFT ALIGN aliquis doluptat. CENTER ALIGN aliquis doluptat. RIGHT ALIGN aliquis doluptat. JUSTIFIED aliquis doluptat. FORCE JUSTIFIED aliquis adiatum doluptat.

> architecture (basic) > what are the various parts of a font? size the total height of the text, measured in points, from the highest part of any character to the lowest baseline the imaginary line on which text seems to rest upon the distance between baselines in known as "leading" (see example below) capline the imaginary line uppercase letters seem to reach mean line the imaginary line lowercase letters seem to reach x-height the height of lowercase letters (without ascenders) measured from the baseline to the mean line ascender the part of lowercase letters that rise above the x-height (meanline) descender the part of lowercase letters that drop below the baseline

> x-height > why is the x-height of a font important? The height of lowercase letters compared to capital letters is significant. Generally speaking, fonts with tall x-heights are easier to read. Unless of course, the become so tall that they impede upon ascenders and descenders, thus making it hard to read. Fonts with high x-heights can be more casual and youthful. Fonts with low x-heights (allowing for longer ascenders and descenders) tend to be more formal. See examples below. Normal x-height This is a traditional x-height relationship with capital letters. [Times New Roman] The Quick Brown Fox Jumped Over The Lazy Dog. Tall x-height Taller x-heights, which create shorter ascenders and descenders, is more casual and youthful. [Century Gothic] The Quick Brown Fox Jumped Over The Lazy Dog. Short x-height Shorter x-heights, which create taller ascenders and descenders, is more formal. [High Tower] The Quick Brown Fox Jumped Over The Lazy Dog. Normal x-height Tall x-height Short x-height

> leading > what is leading? Leading (pronounced ledding) is simply the distance between baselines of text. Outside of the design world, people refer to this as "spacing." A "double spaced" paper has gaps between lines of text that are twice the normal size. > why is leading important? Leading can have a dramatic impact on readability. Too tight is as bad as too loose. There is no standard rule here- text needs to "feel" right to the reader. Traditionally, fonts default to a leading value that is 120% of the font size. As an example, Arial size 10 is defaulted to a leading value of 12 points. DEFAULT [Size: 10pt Leading: 12 pt] mod dolor sequam iriliquipis nonse ea cor acipis nim ipsusci et at utet dit. Vero euguer ing ex et nit acidunt am inis el il in vel in vel ute cor. Sit ut nis nim aliquis adiatum doluptat at. TIGHT [Size: 10pt Leading: 9 pt] mod dolor sequam iriliquipis nonse ea cor acipis nim ipsusci et at utet dit. Vero euguer ing ex et nit acidunt am inis el il in vel in vel ute cor. Sit ut nis nim aliquis adiatum doluptat at. LOOSE [Size: 10pt Leading: 15 pt] mod dolor sequam iriliquipis nonse ea cor acipis nim ipsusci et at utet dit. Vero euguer ing ex et nit acidunt am inis el il in vel in vel ute cor. Sit ut nis nim aliquis adiatum doluptat at. > what leading value should you use? Default leading is usually fine for body copy text (smaller informational text comprised of complete sentences, paragraphs or more). But when it comes to large text, default leading is usually way too much. It is best to start with a leading value equal to the font size, though most of the time you will need to decrease it even more for it to "feel right." INCORRECT Fonts in large sizes have awkwardly big default leading values. CORRECT The leading here was decreased until the distance "felt right."

> kerning & t r a c k i n g > what is kerning? Kerning refers to the space between a specific pair of letters. This is particularly evident with: slanted letters like A, V, W and Y irregular shaped letters like f Example: Kerning refers to the space between two specific let ters in a particular word. > what is tracking? Tracking refers to the spacing between a series of letters of text (such as an entire word, sentence or line). Example: Tracking refers to the space between a series of letters of text such as an entire word, sentence or line.