Basics of Typography. Typography (“type”) concerns the appearance of characters (letters), words, paragraphs, columns, etc. By comparison, the term “text”

Slides:



Advertisements
Similar presentations
The Key Element in Desktop Publishing Design
Advertisements

Typography: The basic building block of any printed page.
Typography Selecting appropriate typefaces for a document. Typography.
1 Professional Communications Working with Type Copyright © Texas Education Agency, All rights reserved. Images and other multimedia content used.
2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO TYPOGRAPHY DESIGN.
In Modern Publication Design Compiled by Dianne Smith, CJE Alief Hastings High School Houston, TX.
Typography Typogra Typography Typogra. Designers use typography to communicate a client's message to an audience. They explore the creative possibilities.
Principles of Typography
DIGITAL GRAPHICS & ANIMATION Complete LESSON 4 ADDING TEXT TO GRAPHICS.
Typography Usability & Readability
Chapter Concepts Discuss Fonts Understand Fonts
Meaningful Jargon Or, All You Need to Know to Speak Like a Geek Design and Typography 3/3/98.
The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.
1.01 Investigate typefaces and fonts.
Elements of Design Type. Objectives After this lesson, you will understand: –The 5 primary categories of type –Elements of typography –Special characters.
Typofaces give voice to words Typefaces give voice to words.
Categories TYPE of Text is the most essential ingredient in design communication. With type you communicate in two distinct ways. The first message your.
Typography Conveys mood Communicates attitude. The Letters X-height –the height of the main body of a lower case letter (literally, the x) x j Cap height.
Unit 4 – Multimedia Element: Text
Typography 2.01 Investigate typefaces and fonts..
DHS Graphic Design Typography. Type Alignment There are 5 types of type alignments: – Center – Left aligned – Right aligned – Justified – Or wrapped around.
TYPOGRAPHY.
Print Medium. • Advantages & Limitations • Typography • Readability • Layout.
Typography Terms. o.php?viewkey=d26eb03e91d5741a4a 3b.
Digital Interactive Media
INTRO TO TYPOGRAPHY BASICS Graphic Design II. What is Typography? the art or process of printing with type. In every piece of type you see, somebody has.
INTRODUCTION TO TYPOGRAPHY WHAT IS TYPOGRAPHY? Typography: The study of all elements of type including the shape, size and spacing of the characters.
1.01b Investigate typefaces and fonts.. Fonts It’s easier to understand fonts if you begin with the original definition of a font. Before desktop publishing,
Typography Graphic Design Fundamentals
Rules of Typography Comm 300. Alignment Remember the rule “If you can align, do.” Try to align everything with something. Equally space text away from.
Subject Name: Graphic Design Subject Code: 9642 Md. Ataur Rahman Instructor (Design & Printing) M.CSE, B.CSE.
Typography 1.01 Investigate typefaces and fonts. (Rev. 2011)
TYPOGRAPHY What is Typography?
Graphic Design  Graphic Design is a form of visual communication.  Communicate a message  Using typography and graphic elements.
Typography. the design and use of typefaces as a means of visual communication how to select, size, arrange, and use typefaces.
Desktop Publishing & Design. Baseline The invisible grid line the characters sit on.
UNIT 4 - TYPOGRAPHY Digital Communications I. 3-D  an effect that gives the illusion of depth.
What are we interested in? 1. Understand Design 0 2. Digital Image design 3 3. Time-based media Webpage design 2 1.
Typography A Key Element in Design A. Definition of Typography Typography is the appearance and arrangement of the characters that make up text on a page.
Words are communication. What do they say? The meaning should come before the look of the type is considered. Choose typographic styles and sizes that.
FontSFontSFontSFontS aka Typography. Font Parts Lets break fonts down by their parts!
Principles of Typography
Digital Interactive Media
Introduction to typography
Digital Interactive Media
Digital Interactive Media
Typography Design.
Digital Interactive Media
Typography Usability & Readability
The art of using text to produce professional looking publications.
INTRODUCTION TO TYPOGRAPHY DESIGN
Typography Typography is the art and technique of creating and composing type in order to convey a message. Words are communication. What do they say?
Vocabulary & Guidelines
Understanding Typography
Layout Terms Visual Hierarchy
The Art of Type 9/17/2018.
INTRODUCTION TO TYPOGRAPHY DESIGN
Principles of Typography
Desktop Publishing Terminology
INTRODUCTION TO TYPOGRAPHY DESIGN
Digital Interactive Media
INTRODUCTION TO TYPOGRAPHY DESIGN
Typography Usability & Readability
INTRODUCTION TO TYPOGRAPHY DESIGN
Digital Media Notes Your Name.
Typography Usability & Readability
INTRODUCTION TO TYPOGRAPHY DESIGN
Layout Terms Visual Hierarchy
Professional Communications
INTRODUCTION TO TYPOGRAPHY DESIGN
Presentation transcript:

Basics of Typography

Typography (“type”) concerns the appearance of characters (letters), words, paragraphs, columns, etc. By comparison, the term “text” refers to the meanings conveyed through deliberate use of particular words and phrases.

It is said that Typography puts the personality into text – giving it expression just as tone of voice gives character to speech. Typography has its own special language that enables individuals to discuss issues without misunderstanding.

Typography ascender descender counter baseline point size cap height x height The Language of Typography Type characters

“ Leading ” (pronounced “ledding”) controls the space between the lines. ( The origin of the term is the lead metal strip used to separate lines of hand-set type.) Leading can be can be adjusted in fine increments and specified accordingly. General categories are “ solid ” (as in the top paragraph), “ minus ” (this centre paragraph), and “ open ” (this bottom paragraph). Apart from enabling a block of text to be squeezed to fit on a single page or expanded to fill out to a full page, leading also effects the overall lightness of tone of a block of text on the page. The Language of Typography Line spacing

“ Kerning ” controls the space between two characters. The use of kerning is noticeable in letter pairs such as “ T o ” where standard spacing produces a gap between the characters. Setting the kerning tighter results in a slight overlap of space but a more integrated feel – “ ”. Conversely, the standard spacing of a group of characters such as “ ill ” tends puts them so close that they virtually blend together. Opening up the kerning results in a more legible and aesthetic “ i l l ”. The Language of Typography Character spacing

“ Tracking ” is similar to kerning except that it controls the space between all of the characters in a block of text. Tracking can subtly (and virtually invisibly) compress or expand a block of text to fit an available space. It can also be used to tighten or loosen a line of text such as a headline to achieve a heavier or lighter impression. The Language of Typography Character spacing

“ Alignment ” refers to the arrangement of the edges of body text. The most common is “ Left Aligned ” (often termed “ Left justified ”) – the left edge of the block of text forms a neat vertical alignment, while the right side is left uneven - “ragged” (rag - edd) according to how the words fill out the space on each line. This paragraph is Left Aligned. The Language of Typography Alignment

Less common is “ Right Aligned ” ( “ Right justified ”) – the right edge of the block of text forms the neat vertical alignment, while the left side remains ragged according to how the words fill out the space on each line. This paragraph is Right Aligned. The Language of Typography Alignment

More common in informal situations is “ Centred ” alignment – lines of text are arranged to fit symmetrically either side a a centre line. This paragraph is Centred. The Language of Typography Alignment

Most newspapers, high quality books and magazines use “ Justified ” alignment. Both left and right edges of the text block are neatly aligned. Achieving this requires some modifying of the spaces between words to ensure each line is the exact same length (with the exception of the last line of the block which appears in standard left alignment). The result is a very formal, neat block of text that may also suffer from some strange word spacings unless hyphenation (splitting words at the end of lines) is used. The Language of Typography Alignment

FONTS (TYPEFACES) There are four basic styles of font -  Serif  San serif  Decorative  Script

Serif fonts A “serif” is a line or curve that projects from an end of a letterform. The origin of the serif is the marks made when chiseling letters into stone. Serifs

San serif fonts “San” means without, so a san serif character has no serifs.

Large blocks of body text are usually in a serif font because the horizontal serifs tend to assist flow of vision along the lines. Serif fonts tend to provide a “traditional” and conservative feel to a document.

San serif fonts are well suited to shorter blocks such as headlines and titles, but can also be used to provide a contemporary feel to body text.

San serif fonts tend to be easier to read at the very small and the very large extremes of size

Decorative fonts Decorative (or “ Novelty”) fonts are definitely not suitable for large blocks of body text They might convey a particular mood, but tend to be tiresome to read if used for more than one or two lines.

Script fonts Scripts simulate handwritten letter forms. They are generally used for elegant or formal occasions. Modern scripts include informal and hand printing styles. Scripts vary considerably in legibility and readability. They generally should not be used for large blocks of body text but can be very effective in short passages.

Many fonts appear to be virtually identical to others, but there are subtle differences. Minor variations such as height/width ratio, the “weight” of the strokes, and alternative forms to some characters are sufficient to give a different “mood”, especially when used in a large block of text. Note these character variation examples -  a a  g g  K K  M M M  R R  W W W  b b b b b b G G G P P P P P

Some common Serif fonts are  Apple (Adobe Garamond Pro)  Apple (Bahaus 93)

Summary  Typography concerns the appearance of letters, words, paragraphs, etc.  Terminology - font (serif, san serif, decorative, script), point size, x-height, cap height, baseline, counter, ascender, descender, leading, kerning, tracking, left aligned, right aligned, centred, justified.  Serif fonts easy to read in large blocks of body text; they have a traditional/conservative feel.  San serif fonts good for headlines, and for their contemporary feel in body text. Easier to read at very small and very large point sizes.  Decorative fonts should be used sparingly (and never in body text). Main application is as feature characters.  Scripts are elegant but often have poor readability.