Font, Typeface, Typeface Family. Selected Typographical Variables

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

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

Font classification review

TYPE ANATOMY jtittle

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

EnvSci360 Computer and Analytical Cartography

VOICE OF TYPE LECTURE 1

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

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

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

Typography. is the foundation of good web design

Modifying Type: effects of a letter change COLDS

LESSON 7 Introduction to Typography

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

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

TYPOGRAPHY. The art of type

jasonjuwono twentyfifteen TYPEDIA _ Typography Encyclopedia

font pairing FONT PAIRINGS GCEF

BASIC ABOUT TYPE TYPO GRAPHY

How to Create Accessible Word (2016) Documents

Elements of typographic design

BBN ANG 183 Typography Text colour: vertical and horizontal spacing

TEMPLATE ORDER GUIDE /

Typefaces are character sets based on distinct design characteristics.

INTRODUCTION TO TYPOGRAPHY DESIGN

Chapter 12: FORMATTING TEXT

ACSC 231 Internet Technologies

The Evolution of Type. Movable Type: Johannes Gutenberg Early 15th Century

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

understanding typography

Typography One typeface classification

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

Visual Style Guide. April 2016

Web Development & Design Foundations with HTML5

Alphabet. elemental visual signs 26 characters frozen sounds

Principles of Typography

How to use text. Adding a text frame

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

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

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

HURME GEOMETRIC SANS

Document and Web design has five goals:

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

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

LECTURE 4 THE USES OF TEXT IN MULTIMEDIA

BRAND GUIDELINES January 2017 leanconstruction.org

INTRODUCING THE Transition family

PRESENTATION BOARD LAYOUT

THINGS YOU NEED TO KNOW

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

Web Site Design and Development Lecture 6

Graphic Standards Manual. Athletics

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

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

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

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

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

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

Brand Overview COLORS / FONTS / LOGOS rd Street, Suite 210 Denver, CO communityengineeringcorps.org

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

Download Typographic Specimens: The Great Typefaces Kindle

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

LOGO & BRAND STANDARDS GUIDE

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

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

Logos. North Dallas Shared Ministries

Web Development & Design Foundations with HTML5

Floats, Grids, and Fonts

Graphics. HCID 520 User Interface Software & Technology

Before & After. Use the Principles Cheatsheet! From The Non-Designer s Design Book, Robin Williams Non-Designer s Design 8

Graphics. HCID 520 User Interface Software & Technology

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

Frequently Asked Questions about Text and Graphics

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

Third Party Identity Guidelines

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

BRAND IDENTITY STANDARDS GUIDE

InDesign. your. Resumé. a how-to guide for creating a professional resumé using InDesign

TYPOGRAPHY 1. letter-form mechanics. letter-form MECHANICS

Step by Step: Scientific Poster Making Using PowerPoint 2010

HEL HEL HEL HEL VETIC HEL VETIC HEL HEL VETICA HEL HEL ETICA ETIC VETIC HEL VETIC HEL HEL C VETICA ETI- HEL HEL VETI HEL VETICA VETIC HEL HEL VETICA

BRAND GUIDE Indianapolis Classical Schools

F PROT. Sub-brands FILE SERVER SECURITY

Writing and Document Design Lecture 6 Typography

Build websites that suit the needs and abilities of users

corporate identity guidelines

The Future of Web Typography. Richard Rutter

Visual Identity Guidelines. Abbreviated for Constituent Leagues

Creating an Accessible Microsoft Word document

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5

What is Accessibility?

BRAND GUIDE JANUARY 2013 PREPARED BY JULIE ZACK GRAPHIC DESIGNER

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

ALL CAPS Text set completely in UPPERCASE or all capital letters. Also refered to as: Uppercase

Typography One typeface classification

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

Basic Brand Guidelines

Typography. Text in Illustrator and InDesign. Martin Constable February 11, RMIT Vietnam

Transcription:

Font, Typeface, Typeface Family Font: A font is a set of printable or displayable text character in a specific style, weight, and size. E.g. Helvetica Italic 10 Point. Typeface: The type design for a set of fonts in a given style is the typeface. E.g. Helvetica Italic. Typeface Family: The set of type designs for a set of fonts, and its variations. E.g. Helvetica Thus, a typeface has many fonts, and a typeface family is what we change in word processors when we switch from Calibri to Times New Roman. Confused? Many designers get these mixed up. It s worth memorizing the differences if you plan to continue in a design field. Otherwise, the world will understand what you mean when you say font instead of typeface because the two terms are now used interchangeably. Weight: Bold, Standard Selected Typographical Variables Case: Upper case, lower case, all capital letters, small capital letters Size: Point size; 100 minimum for decorative fonts, otherwise size 6 is the smallest that may be used on a map. Always kept the same within a class. Color: kept consistent within a label class in the visual hierarchy; should be the same color as the point symbol (if labeling cities) or a blue color if labeling water features. Choose the same blue color as the water feature, when possible. When not possible, choose a contrasting blue color for legibility (example: use a darker blue to label a light blue lake). Style: Roman (upright) or Italic (slanted to the right; true italic has a stroke or flourish that goes to the left and is not just a slanted version of the Roman) Serif: used for physical features. Only one serif type family should be used on a map. Sans-serif: used for cultural features. Only one sans-serif type family should be used on a map. Decorative typeface: Neither serif nor sans, used for titles only. Tracking: The spaces between ALL letters: example, T R A C K I N G. Polygon labels should use tracking to fill the polygon. Leading: The space between lines of text; example, the spaces between the label below: North Atlantic Ocean

Kerning: The spacing between individual letters; i.e. between a D and an F. Can sometimes be adjusted to increase legibility when individual letters are too close or too far apart, but adjust with great care. Glyphs: The set of extra characters available with a font, such as for use with mathematical equations or foreign languages. Also includes old-style numerals (see below for an example of old style numerals in Garamond; bottom row) Ligatures: connections between letters in text. Common ligatures include ff, tt, ae, oe. Some are discretionary, meaning that they must be added in if the designer wishes to use them (ae, for example) or standard, like the ff ligature, which is the default within a given text. Swashes: decorative flourishes for letters. These can be turned on in Illustrator, but are not defaults. Many typefaces do not have swashes available. Do not use swashes on text smaller than size 100. See below for some swashes from Caslon:

Blending Typefaces Adapted for G370 from Prof. Dennis Miller s typography lectures 1. Do not use more than two type families on a map. 1 serif, 1 sans serif. 1 decorative typeface can be used for a title. 2. Think about contrast do not use typefaces that look too similar. 3. Consider families: you can stick with a single typeface family. It is helpful to pick one that comes in a variety of weights, styles, and widths. 3a. Consider the kinds of characters you will need. Small caps? Different styles (i.e. italic, bold)? Foreign accents? You can recognize opentype fonts that have these option with the word pro at the end of the typeface s name (i.e. Caslon Pro). 4. Typeface combinations based on contrast are better equipped to establish hierarchy. Vary weight, size, and style, as well as leading, interparagraph spacing, and tracking (letter fit). 5. Look at fonts from the same stable. Try combining typefaces from the same designer! You can find out who designed a typeface on Wikipedia, and look at some of their other typefaces. 6. Historical accuracy: do not use a typeface that was designed after the period in which the material is set. 7. Combine characteristics: consider strokes, x heights, cap heights, letter width, bowl shape and structure. If you are mixing typefaces in the same paragraph, make them both the same x height. A serif and sans-serif can be matched by comparing the similar skeleton. Here are some classic combinations: Georgia Verdana Garamond

Bodoni Franklin Gothic Baskerville Garamond

Perpetua Palatino